Builder
The problem
Builder is a B2B platform that facilitates managing a lean construction process. Eventhough the users highly evaluated it’s functionalities they complained about it’s poor usability.
The solution
After Product discovery workshops I redesigned the main part of the tool.
The outcome
The new proposal prooved to be much more intuitive and improved significantly the overwhole user experience.
Before
Main painpoints
Lack of clear stucture and navigation
Creation of elements outside of main workspace (board)
Edition of elements through forms
Unappealing, confusing UI
Unclear way of versioning the project
After
Solutions implemented
New clear structure and 2 sidebar navigation
Creation all elements from the main workspace (WYSIWYG)
Properties panel to enable element’s edition
Clear UI corresponding to company’s branding
Versioning bar
The design process
Low-Fi wireframes and tests of 2 proposals
As I believe tests on early stage of product development are esential to validate if the product vision is compatible with user needs and business goals we tested 2 different proposals.
Test
We conducted the test with six different users who were tasked with creating a planning. During the session, I observed where the biggest pain points emerged.
Feedback analysis
After completing the tests, I summarized the collected feedback. I created an illustration where red cards symbolized users' pain points, while green elements represented aspects they were satisfied with.
Feedback analysis
Next, I compiled a table presenting feedback from all users regarding different stages of the task. This made it easy to identify which elements required the most changes and refinements.
One such issue was setting a date in the calendar— in one of the proposed versions, none of the users were able to do it without assistance from the observer. In an alternative version, users were able to complete the task independently.
Feedback analysis
The tests revealed that one of the proposals was significantly more intuitive for users. However, not all of its elements were well thought out.
I created an illustration where I marked the areas requiring the most significant changes in red, and we decided to proceed with its development.
Structure
I started by defining the structure and interface elements to consult with developers and align on the scope of work.
Flows
Since our tool included many complex functionalities, I began defining the behavior of individual elements and testing them with both users and developers.
I noticed that complicated user flows were often difficult to understand for the people I spoke with. To address this, I supplemented them with concise illustrations that visually explained how the elements worked. These turned out to be highly effective and useful during meetings.
Analysis of zoom
While working on planning, users frequently used the zoom function—either to get an overview of the entire project or to examine details of a specific activity. To improve clarity, I developed variants where the level of detail adjusted dynamically based on zoom level, making the information easier for users to interpret.
Component library
Since the builder tool introduced custom elements that were not yet part of our design system, I created a dedicated component library for it, ensuring consistency with the existing system.
Final design
