Imagine your LEGO set only has bricks of one size and color. You can build some things, but it's limiting! In your design system, variant components are like the different LEGO pieces (bricks, plates, slopes). Incomplete variants mean you're missing essential pieces to create a variety of UI elements.
Imagine your LEGO instructions use cryptic symbols instead of clear pictures. Confusing component properties are like those instructions - hard to understand! Properties define how a component behaves. If they're unclear, designers waste time figuring them out.
Imagine getting a giant box of LEGO bricks with no instructions for any builds! A lack of documentation is just as frustrating for designers. They need to know how to use components effectively.
I started by defining the foundation that each component would need, including:
Atoms / Molecules / Components
Reusable UI elements built from atoms and molecules (forms, navigation bars)Component states
Different visual appearances of a component (active, disabled)
The previous version also suffered from complicated and unclear property options.
Ex: The Button component are not got define well, some of the size got disable button but some them not
Old design
New design
The previous version documentation is not very complete, which led to confusion among designers on how to use components that received special treatment.
Old version
New version
Lazada's implementation of a dark mode system necessitated a similar update for our design system components. To ensure a smooth workflow for developers, we adopted a token-based approach for our components. This makes implementing dark mode, along with other color schemes, a breeze. This is especially crucial as dark mode functionality has become an essential part of most development projects.
I made it 1 click for designer to easy to switch light mode or dark mode
I am adding interactions to each component, along with a rationale for each interaction.
Interactive components allow for a clearer understanding of the design during presentations to stakeholders.
These components eliminate the need for manual interaction setup, saving designers time and effort.
This ensures consistent and user-friendly interactions throughout our designs.
Realized that sometimes there have a problem to explain to developer about how the animation works
The reason implemented that animation into the component, to make designer easier and don’t need to setup interaction manual anymore.
I also create a regularly grooming session for our components with developers to make sure they are all connected to developer tokens
Rebuilding the design system highlighted the importance of having a well-defined foundation. This could include establishing clear design principles, component libraries, and a style guide.
The ability to customize properties (like dark mode) proved valuable. This flexibility allows designers to adapt the system to different needs while maintaining consistency.
Creating comprehensive documentation empowers designers and developers to understand and effectively utilize the system.
Building a dedicated library of pre-built interactions and animations that designers can easily drag and drop could further streamline the design process.
Design System: Rebuilding the LEGO for Success
Frankim