Liz Shinn Studio logo About Resume Work

Threshold Web3 Design System

Summary

As UI Design Lead, I built a complex Web3 design system for the Threshold financial dashboard, coordinated with a cross-functional team to maintain it, and open sourced it to Github for the Web3 community.

My Role
UI Lead
My Key Services
· Design Systems
· Cross-Function Collab
· Advocation for Adoption
· Design Documentation
· Open Source Publication
Client
Threshold Network
Core Team
UX Lead: Sasha Tanase
Engineering Lead: Chris Battenfield
Timeframe
2021–2022

The Key Problem

Product features were bespoke and lacked visual consistency

Without a central design system to coordinate design efforts, Threshold product solutions quickly deviated from consistent application. Introducing a design system and maintaining it as a team helped to streamline the design process.

Early Thinking

After researching the available open source design systems, I found that there weren't strong Web3 solutions. The UX Lead Sasha and I compiled notes on the top 10 systems we found.

Our priority was a system that had a Figma community file, flexible code, well-maintained documentation, and an open source usage license. We decided to use Chakra and adopt an atomic Design System structure.

I organized our Figma file and documentation into Theme elements (color, typography, grids, etc) and Component elements (atoms, molecules, organisms, etc.).

Threshold design documentation screenshots Threshold design system in Figma Threshold design documentation screenshots

The Challenges

Engineering and Design prioritized different things in an open source Design System

The engineering team wanted robust code docs, positive reviews from other engineers, and flexibility in customization. The design team prioritized visual maturity, active maintenance, and a robust existing Figma resource. After some debate, we landed on Chakra as the best solution for both design and engineering.

Design System maintenance takes time, so it's best if it's a team priority

As we introduced new features, we periodically needed to tend the design system. Sasha and I settled on a sprint schedule to coordinate updates to the system as new things were introduced and pinged each other for review in Figma.

The Results

I revised and rebranded the Chakra Community file to work for Threshold. Myself and Sasha worked together to periodically tend system updates as the Threshold financial dashboard grew in complexity.

After maintaining the system through several feature launches, I had a robust resource for the UX/UI community in the Web3 space. So, I packaged up the system and published it to GitHub. My goal was to provide a design resource for internal teams across the Thesis studio working on other Web3 projects, as well as outside design teams that could also benefit from our design research.

View Design System
Screens of the GH repo Screenshot of Github library