UX and visual design for the Modulab component library
Sketch symbol library
Alignment with development for sketch library and react components
With the Modulab Design System we aimed to increase speed to market by creating a shared library of reusable components and guidelines. This saves production hours, helps to speed up the UI design and development process for every project.
We want Modulab to take care of the UI patterns. This empowers designers to work on the things that matter most, the users.
Modulab supports platforms in three markets and is growing. To keep the experience consistent for our users it must be based on the best practices with a clear set of standards.
With only one single source of truth, we want Modulab to be easily maintainable to keep the design and technical debt low. No more asking who has the latest design.
Design trends and features change over time. Modulab needs to be built in a way that enables it to keep up to date with ever changing design trends.
To get a buy in from both management and product teams, they needed to see the value of the design system quickly. We want the design system be:
Google Material Design was used as a starting point and guide for component states and best practices. There was no need to re-invent the whole wheel for this project so Material Design made sense as the foundation and we diverged for certain components where required.
Brad Frost’s atomic structure was used to create a robust design system, allowing us to roll out higher quality, more consistent designs faster by breaking the UI into components instead of pages. The components needed to follow brand guidelines for a unified site feel but follow updated spacing, styling and vertical rhythm to increase the usability of the sites. Parent and child themes were created so the component styles could be easily adapted for each brand site, which also saves development time!
Atoms serve as the foundational building blocks that comprise all our user interfaces. These are things like: buttons, tags and icons:
Molecules are relatively simple groups of UI elements functioning together as a unit, such as a selection controls and input fields.
Are groups of molecules joined together to form a relatively complex, distinct section of an interface, such as a content card:
The rollout of the Modulab Design System came with a need for measurable success metrics. It’s still too early for results but the metrics in place are: