Liz Shinn Studio logo About Blog Work
Threshold

Financial Dashboard & Design System

I worked with Threshold to build a product design system and financial dashboard that empowered users to find financial freedom through web3 staking.

UI Lead

2019-2023

Design Systems
Design Documentation
Product Design
UX/UI Design
Web Design
Threshold design documentation screenshots

The key problems

Wasting time reinventing the wheel

The team was wasting time debating over bespoke solutions and correcting inconsistencies in designs that didn't have a cohesive user experience.

No hub for design decisions

Decisions were getting lost in team chat threads, and we needed a central source of truth.

My approach

A design system would help us work better as a team. The UX Lead and I researched the available open source options. Together as an engineering and design team, we chose Chakra's open source React library as our base system for development.

For the design team, I built out Chakra's limited Figma file using an atomic structure with Threshold's branding, using Theme elements (e.g. color, typography, grids) and Component elements (e.g. atoms, molecules, organisms).

Threshold design documentation screenshots
Threshold design system in Figma

Design challenges

Engineering and Design had different priorities

The engineering team prioritized extensive 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 systems need maintenance

As we introduced new features, we periodically needed to tend the design system. Myself and the UX Lead Sasha worked together to tend the design system as we added new features to the Threshold financial dashboard. We settled on a sprint schedule to coordinate our efforts.

Applying the design system

Using the design system for the Threshold dashboard helped us to work together as a design team more efficiently and to provide visually consistent designs to the engineering team.

When new design hires joined the team, they benefited from the documentation and could quickly get up to speed. You can see a few screens from the product below in both dark and light modes.

Threshold dashboard
Threshold dashboard

Open sourcing on GitHub

A core value of our team at Threshold was to build in public and contribute to research efforts in the web3 space.

I published Threshold's web3 design documentation and components to GitHub as an open source design system so that other teams could either use it for reference or fork it for use in their own projects.

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