Product Design and
Since Jan 2020
I've been leading the UX Strategy and Product Design Team at Buildots since January 2020, first as sole designer and then also managing 2 product designers while still hands-on.
During this time I partnered tightly with the Product Managers to research and define the features that bring most value, and the optimal ways to display the various data Buildots can provide.
Over the last year I created a complete design system from the company, defining principles, guidelines and components… first in Sketch, and later in Figma. The product made a huge leap on its UX and design, went through an entire overhaul which also included PDF documents and emails as part of the customer journey we want to support.
I designed to the detail new screens and features, updated and improved existing ones, worked on responsiveness and microcopy, became the best friend of my front-end developers, onboarded new designers and got drunk on construction data :)
I first started by doing a deep assessment and mapping of all elements in the system existing across pages.
I found out serious inconsistencies and different patterns for similar actions, the usage of two fonts which didn’t help with hierarchy and content, different colors for the same elements and overall less than ideal interactions. Navigation was sub-optimal and the dark colors toned down the app. Most screens were not following any JTBD definitions and features were… random.
At the same time, I made lists of the elements required, and the features to be supported in the new, unified elements to be created. This was the base for the beginning of the Design System project, which took place as I interviewed users and designed new features.
I proceeded with learning the field as well as doing competitive research, user interviews and personas. I chose Airtable as the tool to store and share my findings across the company. I watched endless Hotjar videos and sunk into data in Google Analytics and Mixpanel. All these tools gave me robust insights about the usage of our product and the most important screens and flows to take care of.
I guess it will always be work in progress, but I am super proud to see how far we’ve come in our product. Sharing below some selected features and pages I’ve worked on –
Explorer is one of the most popular screens in our product, specially during Covid-19 times when access to the site is limited. The page allows to explore freely every single spot of the site according to the different capture dates.
The page was functioning properly, but it had a few fails: – Map taking a lot of real estate and not leaving enough place to see, well, the image. – Unnatural navigation into a popup to compare this image to image from a previous date (that’s how we see if things have progressed).
I fixed the page by allowing to switch between the three modes: View 360, Compare and 3d View in one place. Also, planned a map that is small but expands when needed to navigate between captured spots.
Customers were thrilled! Especially the commercial teams who use this page often to compare between dates.
When I first started at Buildots, the construction issues shown to the user were divided into two:
– Errors: Elements that were done differently from the plan/model (wrong position, wrong installation, some other esoteric reasons…)
– Loose Ends: Elements that were left undone after a trade finished working on site.
Over time and after multiple user interviews, Hotjar recordings and several Tableau sessions, I understood that site managers actually treat these two in the same way – both are just things that need to be fixed.
We were showing different information but there was no good reason for this – Errors were shown in a table, while loose ends were shown on a map. You could close errors or send them to another system but could not do that with loose ends. All these differences were arbitrary and not based on a specific need or flow.
I decided to integrate issues in one screen, highlighting the common parameters and finding creative solutions for the differences between them.
I integrated a toggled view of table and map for both, and created a brand new way to see the issues' details. Lastly, I allowed place and robustness for new actions such as bulk closing, sending to email and more. Work included planning empty states, loading states, little info and all edge cases as usual.
Viewing a specific element’s status and details is one of the main functions at Buildots. At first, it was opened as a side within a popup, which led to multiple problems:
– Little real estate for the picture, which is critical to understand the status of the element.
– Limiting layout, with a weird and unclear information hierarchy
– No place to add more information blocks and actions in an accessible way. – Closing the side to go back to the map was unclear and not comfortable, as seen in recordings.
– Buttons on image were too little and not easy to click.
To overcome this issues, I suggested a different interaction – when opening an activity on a level, it shall open a secondary page instead of a popup. This gives us the required flexibility to show more information about the activity, allow for bulk actions and have better control over the information hierarchy.
For the element view, I planned a bigger thumbnail, with a clear access to the functions 360 View, Compare and 3D Model (these last two were new features). The list of blocks on the side view is flexible – some variations can be seen below.
I created Buildots' DS from scratch, first on Sketch and a year later re-auditing and recreating in Figma. It was important for me to give it a solid philosophy before going deep into components, so that the work done would serve accurately our user needs while being simple and straightforward, modern and elegant.
The work spanned from principles to style guide, components and patterns, following the Atomic Design approach. My main inspiration sources: Shopify Polaris, Salesforce Lightning, IBM Carbon and Hubspot Canvas, among others.
See the entire project here