Work/5/5/Case study

A design system for Affinidi’s identity apps.

The Affinidi developer console: My projects
The Affinidi developer console: Analytics
The Affinidi developer console: Schemas
Molecules from the Affinidi design system
Molecules
A nested attribute form
A nested form
Company
Affinidi
Role
Lead Product Designer
Year
2022 – 2023
Team
3 designers, 1 PM

Brief

Multiple product teams had spent years on what was supposed to be one product. Each had drifted into its own visual language. We built one design system to pull them together under a single developer console. It took about six months, in 2022 and 2023.

Outcome

The design system was adopted across 3 product teams. It was also the foundation for 4 white-label credential applications. Design-to-dev handover went from weeks to days.

3Product teams
4White-label credential applications
weeks→daysDesign-to-dev handover

My part

As Lead Product Designer, I was the link between the Berlin and Singapore teams. I led the team in designing and building the design system’s components, using atomic design. I also owned the final product: the developer console that brought everything together.

Link

affinidi.com

Decisions

Key decisions.

1/2

Atomic design from the start

We had 4 products and hundreds of misaligned components. Starting at the atom level meant any future product could compose from the same building blocks instead of duplicating them. It also gave us a shared vocabulary across the Berlin and Singapore teams.

The Affinidi style guide: brand, utility and neutral colours, text styles and icons

2/2

White-label as the proof of concept

To me, the test of a design system is whether it can adapt without forking. So we duplicated ours and swapped the style guide. We used the copy to build new branded applications in a fraction of the original time. The architecture held up.

A page template from the design system: a drawer over the console

More screens

The Affinidi developer console: the log in page
Log in
The Affinidi developer console: bulk issuance
Bulk issuance
Next / 1/5 GALVANY Operating System