Boosting consistency, speeding up design by 70%, and enhancing collaboration
design system
Style guide
UX design
UI design
illustrations
design handover
Saas
web 3.0
Summary
Goals and challenges
Create a design system that enables scale
Focus on foundations
Clean up outdated system logic and component structure
My role
For this project I worked together with two lead designers. They were responsible for defining the strategy and planning, I supported them by designing the components and handing them over to the developers who were building it.
Results
Built a master-system for all the micro-systems
80% faster design implementation (based on several tests) and reduced costs
Smoother collaboration between design and development
Enabled designers take more efficient and consistent design decisions
Feedback/learning
“Keeping the Figma files separate and strictly using Zeplin for developer handovers, helped to identify mistakes, ensured high quality, and structured processes, enhancing communication and collaboration between designers and developers.” - Product manager
Background
Affinidi
At Affinidi, we worked on multiple product streams in parallel. The Affinidi console helps developers create privacy-preserving services that are GDPR-compliant and more. These services ensure the highest quality of privacy for users, allowing them to regain ownership over their data and benefit from their data. In order to showcase relevant use cases, we designed several consumer apps.
The challenge
Two years after launching Affinidi, we had developed a diverse array of products. Our Berlin team created some, our Singaporean team crafted others, and we built additional products for clients.
Our goal was to unify these varied offerings into a cohesive suite within our developer portal. Naturally, each product had its own distinct look and feel, creating the need for a new, overarching design system.
Integrating these different products into a single, cohesive entity was a significant challenge.
The project
A design system is crucial for ensuring consistency, efficiency, and scalability in digital product development. By providing a collection of reusable components and standardised guidelines, it creates a unified visual language and cohesive user experience across different platforms and products.
This not only streamlines the design and development process, reducing redundancy and errors, but also enhances collaboration among teams
Ultimately, a robust design system enables organisations to innovate faster and deliver high-quality products that meet user needs and expectations.
Approach
For our design system we used the Atomic Design approach. Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:
Atoms
<
Atoms
<
Organisms
<
Templates
<
Pages
Style guide
The style guide below served as the foundation for our design system. While most elements were predefined, additional elements were incorporated as needed.
Atoms
The style guide below served as the foundation for our design system. While most elements were predefined, additional elements were incorporated as needed.
Molecules
Molecules can be created by combining two or more atoms. For instance, an input field and a button can combine to become a search form - below is a selection of molecules from our design system.
Organisms
Multiple molecules together form an organism - examples of an organism are for example, a header, sidebar or signup form
Page templates
Templates are the glues that combine the different organisms or individual sections to create a complete design.
Pages
The highest lever of hierarchy in an atomic design system are the actual pages which makes a product. Below are selection of the pages of our developer portal.
Applications
The developer console
This design system was originally created for our developer console. The developer console provides tools to enhance data privacy and transparency within the applications of our customers.
