Zyte (formerly Scrapinghub) is a growing remote-based business. As the demand grows, keeping track of the UI elements, design processes, and management can be challenging. I led the creation of their first living and breathing design systems in Figma to reduce setup times by up to 70%.
User Research
After conducting interviews with the Product Tech Lead, UX Design Lead and auditing existing UI elements, I created the design system using Figma's best practices and Brad Frost's Atomic Design Methodology.
Pain Points
Designing without a design system can be time-consuming, as each element must be created from scratch.
Lack of a single source of truth for evolving UI elements.
Lack of scalability of UI components for future projects.
Lack of consistency.
Information Architecture
To enable users to find information and accomplish tasks, I used the Information Architecture method to organize, structure, and label content effectively and sustainably, considering the interrelationships within the system.
Design Solutions
Visual Design
I complied with the marketing brand guidelines, while the visual design choices such as colours, typography, spacing, and interactive states were created to focus on hierarchy, readability, and accessibility.
Figma variants are a feature that allows designers to group and organize similar components into a single container. Variants map to properties that align with code components following the prop/value format used in popular frontend frameworks like React and Vue.
A design system approach using reusable and scalable atoms to build molecules and organisms.
I created a simple and concise guide for each user interface element to help users such as front end developers and designers understand how to use them.
A working example of a dataset card template component with nested atoms, placeholders and turned into variants. Please note that this version uses the former approach of using base components. The newer version lets you create multiple base components without nesting base components as instances.
Working example of a dataset card template component with nested atoms, placehoders and turned into variants.
A design system approach using reusable and scalable atoms to build molecules and organisms.
Conclusion
It is essential to start developing a single source of truth early on because, as a designer, it saved me a lot of time focusing on more important tasks. Syncing design decisions with front-end development code using tokens would be even more satisfying, so everything you see is as pixel-perfect as possible!
