Lara Design System
Nexti and Orsegups
A multi-brand Design System
Year
2021 - 2023
Client
Nexti and Orsegups
Paper
Categories
Design System, accessibility, usability testing, tokens, and handoff
Impact
3
Designers
3
Developers
1
Product Owner
Organization
Design libraries
Prioritization
Mapping and prioritization of components
Immersion and definition
In this stage, information about the component to be developed must be collected, understanding its variations and different applications. With some information about the component, it should be brought to the Tech and Design team (everyone) so they can evaluate whether all possible use cases have been covered. This stage serves to ensure that the component undergoes fewer modifications throughout the steps.
Development and discussion
The component is built from the definitions extracted from the previous phase, always with the Visual Styles and Tokens file open next to it, because that is where all the applied values come from: padding, spacing, color, typography, opacity, shadow, and border. Nothing is defined by eye, and the construction is only finalized when all the variants that the design system will consume are ready, and not just the default state. Next comes the Critical Review, a weekly meeting where the creator presents the development, the other designers try out the component on their own, observations go directly into the file, and the agreed-upon definitions are noted down for the project. Putting the component in the hands of someone who didn't design it is what reveals early on what only makes sense to the person who built it.
Documentation and technical review
The documentation is built in Zero Height, drawing on the references gathered during the immersion and organized into three pillars. The design pillar covers the component's variations and its maximum and minimum sizes. The usage pillar is the most extensive: when the component is used and for what purpose, how the content should be written, a do's and don'ts table taken from the support file, behavior during transitions and rendering, as well as positioning and spacing. The third pillar is accessibility, outlining the criteria that apply to that specific component. Once the documentation is finalized, the Figma file and the Zero Height page are sent to the team leads, whose feedback determines what still needs to be changed before publication. Only after this is the component announced to the team.
Preliminary and final presentation
Before publication, the component undergoes two presentations to the broader group. In the preliminary presentation, design and technology view the component that has just come out of the technical review, with room still left to question structural decisions. In the final presentation, both teams see the finalized version accompanied by documentation, which is what will actually be consumed in day-to-day operations. Separating these two moments avoids the most common situation in design systems, which is when development only discovers the component after it has already been published and there is no room left for change.
Publishing and continuous improvement
The Design System must be adopted as a product of continuous standardization practice. The team must participate as much as possible in the choices, and this should reflect in everyone's work, generating less development time, more consistency between components, a holistic view of the work, and best practices.
Accessibility
18 accessibility criteria respected
The components
Three levels of complexity
Tokens
Design Tokens
Learn more
