The context
‘Burrito’ the design system of Userlane, is the result of a collaborative effort between a team of talented designers and me. When I joined the company, the design system had already been 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 was released 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 remain visible and distinguishable. Additionally, certain colors may not have been present 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 to better visualize when we create or update a component, ensuring that the elevation remains 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 was increased for better visibility and readability.
When I start working on a component, I usually look at other products or design systems to see how they design their components and where they use them. For the date picker, I checked platforms like Personio, Jira, Google Material, and Google Analytics. I also explored inspirational platforms such as Dribbble, Collect UI, and many others. This is the beginning of my exploration before jumping into Figma and starting to design the component.
During the exploration stage, I try to figure out how I can improve the component and fix the issues we had before. For the date picker, I explored many ideas around a vertical and horizontal layout. I also tested different options such as with or without the sidebar, input or dropdown to make the selection, etc. I worked on the different states for the days as well (default, hover, active, selected, start date, end date).
Another important thing is to optimize the component when I create it. I mean that I use several Figma properties and auto layout, of course, to ensure that it can be easily and quickly used or modified in our flows.
I pay attention to testing the component in context and ensure that specifications and design decisions align with the product. After exploring different directions, I conduct a feedback session with other team members in order to collect their comments. After that, I improve and iterate on the component until I prepare the final version in pixel-perfect detail.
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 includes options such as selecting a specific date, a range of dates, or pre-set time frames like 'current month' or 'All time.' This feature enables 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, as there were unnecessary elements (which are now optional) that created a lot of noise. The new version is 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 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 reviewed different design systems' documentation to make a first selection of the directions I wanted to take at this point.
During the exploration in light mode, I tried to simplify the component and avoid all elements that could bring more noise than anything else. I also started working on the different variants with the correct color tokens.
For the dark theme, I did the same. I experimented with both an outlined and filled style because, at this point, it was interesting to explore both options. The dark theme is not necessarily a literal translation of the light theme. Just because we had the background component filled in light mode doesn’t mean it will be filled in dark mode as well.
Later on, I ran a feedback session to gather remarks from designers and move on to the next steps, which are polishing the component, writing specifications, and conducting the handover with developers.
Switch button
I also improved the switch button to provide better visibility for the user. The issue was that the user couldn’t clearly tell 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 clearer which option is currently activated. This improvement ensures a more seamless user experience when navigating switch options.
Regarding the exploration phase for the switch button, the work had already started before I took over. Some other designers had explored different ideas, so I started from that stage. I focused mainly on the dark theme because the light theme already worked well. The exploration was primarily around the colors. I tested different ideas to make the active switch option stand out more 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 using Supernova, a design system management platform that allows teams to organize and share their design assets and components.
Basically, when we start documenting a component, we usually begin by collecting content from other design system documentations. This helps us find inspirational resources and ensures that we have covered all the aspects of the components and foundations we want to address.
We created a centralized 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,' which you can see on this link. Overall, Supernova is a powerful tool for documenting and managing a design system, helping teams work more efficiently and deliver better products.
Design system documentation is the blueprint for consistent, efficient and effective design.
