Burrito : Userlane’s design system

I have played a key role in building the first design system at Userlane. My contributions included working on the improvement of various components and writing comprehensive documentation to ensure a smooth implementation of the system across the organization.

Date
2022
Team
4 product designers
5 developers
My role
Improvements on components
and foundations. Collaboration
on documentation (Supernova)
Deliverables
Specifications, descriptive
content, high fidelity
component

The context

“Burrito”, the design system of Userlane, is the result of a collaborative effort between team of talented designers and I. When I joined the company, the Design system was already started. We worked together to establish a consistent and intuitive design language that would be used across the entire organization. From color palettes to typography to component libraries, we covered every aspect of design to ensure a cohesive user experience. The first version of the design system went out at the end of 2022.

Design systems unite teams and products.

The foundations

The colors

One issue that can arise when implementing a dark theme for a design system is ensuring that all colors used in the system are still visible and distinguishable. Additionally, certain colors may not have existed in the design system's palette and need to be added specifically for use in the dark theme. We used general tokens and semantic tokens to manage the palette.
The elevations

When creating new components in a design system, it's important to pay attention to the elevation of each element. Elevation can be used to communicate hierarchy and create visual interest, but it must be applied consistently and thoughtfully to avoid confusion or clutter. I created this plan, in order to better see when we create/update a component that the elevation is still consistent with the rest of the component library.

The components

Date picker

An improvement made to the date picker component in the design system was a revamp of the user interface. The original design was cluttered and confusing, making it difficult for users to select the desired date. To address this issue, the layout was changed to a horizontal view, which improved the visibility of the dates and made it easier for users to select the date they wanted. Additionally, the size of the dates were increased for better visibility and readability.
When I start to work on component, I usually have a look into others products or Design system in order to see how do they design their components and where do they use them. For the date picker I had a look on Personio, Jira, Google material or even Google Analytics. I also look at inspirational platforms such as Dribbble, Collect UI, and so many others. This is the beginning of my explorations before jumping into Figma and start designing component.
During the explorations stage, I try to figure out how I can improve it and fix the issues we had before. For the date picker, I explored many ideas around a vertical and horizontal layout, also I tested with or without the sidebar, input or dropdown to make the selection etc... I worked on the different day’s states as well (default, hover, inter, selected, start date, end date).
Another thing important is to optimise the component when I create it, I mean that I will use the several Figma’s properties, and auto layout of course, in order to be easily and quickly use or modify in our flows.

I pay attention to test the component in context, and ensure that specifications and design decisions will fit with the product.After having explored different directions, I conduct a feedback session with others team members in oder to collect the comments. After that I improve, and reiterate on the component until I prepare the final version in pixel perfect.

A date picker is a simple yet powerful tool

that helps you navigate time with ease.




The date picker in the Portal (dashboard) allows users to select a specific time frame for the data they wish to view. This could include options such as selecting a specific date, a range of dates, or pre-set time frames such as "current month" or "All time." This feature allows users to easily filter and view the data that is most relevant to them within the dashboard, making it more efficient and user-friendly.
Message box

A recent improvement made to the message box component was simplifying the design, because there were unnecessary elements (which are optional now) which bring a lot of noise. The new version is now cleaner and more streamlined, making it easier for users to focus on the important information presented in the message box.
I also reworked this component with dark theme tokens in order to make it better fit with the new dark theme. This rework improved the overall aesthetic and allowed for a more cohesive and polished design.
I did a benchmark for the message box as well, I saw and red different Design system’s documentations in order to make a first selection of the directions I wanted to take at this point.
During the explorations in light mode, I tried to simplify the component, and avoid all elements which can bring more noise than anything else. I started to work on the several variants as well, with the right color tokens.

For the dark theme, I did the same, I just tried with an outlined and filled style, because at this point it was interesting to explore both, knowing that the dark theme is not necessarily a literal translation of the light theme. Just because we had the background component filled in light, doesn’t mean it will be filled in dark as well.

Later on, I ran a feedback session, in order to get remarks from designers and move on to the next steps which are polish the component, write specifications, and conduct the handover with developers.
Switch button

I also improved the switch button to provide better visibility for the user. Basically the issue was that the user wasn't really able to clearly know which switch option was activated or not. By incorporating the use of primary color, and redesigning the shape of the switch button, it is now more clear which option is currently activated. This improvement ensures a more seamless user experience when navigating switch options.
About the exploration’s phase for the switch button, the job has been started before I took over it. Basically some others designers played around, therefore I started to work from this stage. I only worked for the dark theme because the light one worked well. It was especially an exploration around the colors, I tested different ideas in order to make the active switch option more stand out when the user clicks on it.

The documentation

Design systems are an essential tool for creating consistent and cohesive user experiences across digital products. They provide a set of guidelines, components, and patterns that help teams collaborate effectively and build products faster. At Userlane we document the design system by using Supernova, a design system management platform that allows teams to organise and share their design assets and components.

Basically when we start documenting a component, we usually start by collecting some part of content in other Design system’s documentations. This help us to find some inspirational resources and to ensure that we have cover all the aspects of the components/foundations we wanted to cover.

We created a centralised library of design elements, such as colors, typography, buttons, and forms. These elements can be easily shared and reused across different projects, ensuring consistency and reducing the need for repetitive design work. We also document the usage and behavior of each component, making it easy for designers and developers to understand how to implement them correctly.

We have created the first version of the Design system called “Burrito”, that you can see on this link. Overall, Supernova is a powerful tool for documenting and managing a design system, helping teams to work more efficiently and deliver better products.



‍
See the Userlane’s design system

Design system documentation is the blueprint for consistent,

efficient and effective design.