Nati Asher

Buildots Web

- ROLE

Product Design and

Team Lead


- FOR

Buildots


- DATE

Since Jan 2020


- TYPE

Webapp



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 journeys 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 :)

The “before”

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 in parallel to user interviews and design of new features.

Research

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.

Some of my research resources – Competitors Overview, Personas and Usage Analytics

Some of my research resources – Competitors Overview, Personas and Usage Analytics

Some of my research resources – Competitors Overview, Personas and Usage Analytics

Sharing below some selected features and pages I’ve worked on –

Explorer Screen Revamp

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).

The new Explorer page in action :)

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.

Issues Screen Revamp

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.

Part of the comparison between the old Errors and Loose Ends

Old Errors Screen

Old Loose Ends Screen

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.

Mapping an ideal issue lifecycle, together with new available actions

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.

Issue side options according to parameters and status

Popups for actions

Activity and Element Side Views

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.

Full screen showing the activity summary, schedule and notes

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.

Full screen showing the selected element on map and it’s detail on the side

The Element side view in some of its different variations – Element ongoing, No image available, With Issues, With element ID for Buildots internal users, Element done

Design System Creation – Sketch + Figma

I created the Buildots Design System 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