sofya
Product Designer
Web Integrator
Prop Tech
From Scratch
SaaS
BtoB
About
Sofya is a SaaS platform designed for professionals in the real estate sector. Sofya combines several solutions that enable stakeholders in this field to collaborate, from document storage to graphical visualization of data or building plans. Each project member can work independently while being notified of the project's progress in real time.
My Roles
- Design and development of Sofya's electronic document management platform
- Rebranding of the solution in preparation for the launch of the new flagship product
- Creation, maintenance, and evolution of the design system across all solutions
- Front-end development and integration of designs throughout the entire solution
Context
The initial mockups for Sofya's electronic document management solution followed the trend of other similar solutions aimed at real estate professionals: outdated user interfaces and complex user experiences. Hired as a Product Designer at the project's inception, my goal was to give the platform a look and feel as close as possible to a B2C product, to stand out from the competition. By ensuring the simplest possible user experience while maintaining a high number of features, Sofya quickly established itself as the most user-friendly platform on the French market, while remaining rich in business-specific functionalities.
In addition to my role as a Designer, I actively contributed to the front-end development of the beta version of the application. As the team grew, I primarily focused on integration, working as a lead HTML & CSS developer and ensuring the maintenance and proper implementation of the design system across Sofya's entire technical ecosystem.
Clean but rich
interface
Benchmark
Workshops
Beta version
Clean
But Rich
interface
Benchmark
Workshops
Beta version
Problem
One of the main challenge when designing the main interface was to display a large number of informations without clutter. This was particularly evident during the design of the main interface, where all the documents for a project are stored (the number of documents can exceed 4,000). This grid can include more than 25 columns of metadata, and while each column contains important information, users—depending on their role or the project phase—do not need access to all this information at all times. As a result, not all information is relevant to the user at every moment.
Conception
To ensure a readable and pleasant display, we first identified the columns most frequently used by users and set these as the default grid view, hiding all other metadata. By adding a display menu, we allowed users to select which columns they wanted to add or hide based on their preferences.
To further simplify access to information, each column has its own filtering mechanism, tailored to the type of information it contains (e.g., text, date). These filters can be combined to achieve a precise and customized display of documents.
Since configuring these refined display settings can take time, we introduced what we call "views." A view represents a set of displayed/hidden columns, filters, and sorting preferences. Each new combination created by a user is treated as a new view, which they can save in just a few clicks if they think they might reuse it later. To make this system easier to use and help users save time, five default views—developed during workshops with building professionals—are available to all users.
Subsequently, we noticed that within a team, only certain users who frequently used the electronic document management platform took the time to configure views. However, since all team members working on similar tasks have similar display customization needs, we added a sharing feature.
This allows users to share their views with their team members, eliminating the need for everyone to configure the same views individually. This feature also enabled us to set up specific views for multiple teams at the start of a project and share them directly, ensuring a smoother onboarding experience with the application.
User Friendly Admin
Pannels
Feedbacks
Iterations
User testing
User
Friendly
Admin Pannels
Feedbacks
Iterations
User testing
Problem
During the research phase, we observed that a significant number of users of competing solutions complained about the inability to finely configure their workspace without resorting to support services. As a result, we decided to make all project settings editable by the administrators of the workspace.
The project settings include a wide range of rules specific to the French construction sector, the management of information display, and granular access rights control for different sections of the application. This refined configuration also helps maintain a clean and uncluttered main navigation interface.
It was necessary to design a user journey and configuration panels that would allow a novice administrator to make the right choices while clearly understanding all the available features.
User flow
The original design of Sofya included a separation of the different “categories” of settings into five distinct groups. This fragmentation forced users to follow a complex navigation pattern and prevented them from having a comprehensive view of all the rules applied to a section of the application. Initial user research conducted on this subject quickly revealed that :
- The ability to combine multiple small groups of settings did not align with real-world expectations.
- Users tended to create a single group of settings for each folder they needed to manage.
Old Administration section structuration
New structuration
First, I decided to group all the configuration features into a single section to simplify navigation.
Since this set of settings could be overwhelming for a user, I then designed an onboarding module to guide users through configuring the main features. This module also includes the option to duplicate rule sets from another project, saving expert users a significant amount of time. Additionally, default "Sofya" settings are offered to users, allowing them to set up a basic nomenclature structure in just a few clicks. These default settings are based on a thorough study of the most common settings across numerous real estate projects.
I also made extensive use of empty states, particularly working on them to leverage the available space for training users on the available features, as well as on the actions needed to complete or progress their project configuration.
Finally, the entire interface was enhanced with buttons that allow users to view help texts, detailing the exact impact of their modifications. I also created detailed online documentation and included many links to this documentation within the administration interfaces.
To make navigation more accessible, I also added a visual representation module of the document validation workflow, using drag-and-drop functionality to allow users to intuitively and visually manage complex access rights tasks.
Liked what you read ? Try and have some more !