Affinidi’s Design System — Boosting consistency, speeding up design by 70%, and enhancing collaboration
Demonstrating the ROI of our design system convinced leadership to invest in it. Our tests showed a 70% reduction in design time, along with smoother developer handovers and numerous other benefits.
About Affinidi
At Affinidi, we worked on multiple product streams in parallel. The Affinidi console helps developers create services that are GDPR-compliant and go beyond. 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.
Challenges
Translating the complex concepts of the technology into comprehensible and engaging designs
Performing research and user tests to enhance designs and propose new features and useful purposes of the technology
Developing and maintaining a design system to increase design and development efficiency
Maintaining a coherent look and feel amongst several products and apps using the design system
Designing custom-made and compelling illustrations to improve the user experience and enhance comprehensibility
Responsibilities
UX/UI design, usability testing, design systems, illustrating
“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
During my time at Affinidi, amongst many things, I learned about UI design guidelines and frameworks like Google Material, ensuring feasible designs and a smooth developer handover.
The Affinidi console
The Affinidi console is a developer portal that offers a collection of tools which enable developers to build secure and transparent products that empower individuals to get more aware and to regain control over their digital identities
The consumer apps
To illustrate the ease of implementation with the Affinidi Console, we designed multiple consumer apps that showcase relevant use cases of their technology.
The Design System
Increase design and development efficiency with a Design System
To maintain a consistent visual style across all products and meet the demands of our agile startup environment, we developed a living design system. This system allowed us to rapidly design and implement prototypes, enabling regular testing and iteration to create functional and desirable products.
Keeping developer handover separately from our Figma design files
While using Figma for designing and prototyping UIs, we utilized Zeplin to manage all styles, components, and final designs. Although Figma now offers similar functionalities, keeping final styles and components separate in Zeplin was beneficial. This separation helped identify mistakes, ensured high quality, and structured processes, enhancing communication and collaboration between designers and developers.
