Summary
When I joined Bitwarden in 2021 the company was using 3 different web frameworks to design and build their 3 web based interfaces: web app, desktop app, and browser extension.
Multiple UI frameworks caused our users to have an inconsistent user experience, and internally slow design and development processes. I partnered with a front-end architect to advocate for and launch a unified atomic design system.
Impact
The design system has empowered Bitwarden to address growing user and client sentiment that the company had outdated and hard to use UI. Engineers have responded to the developer component library as one of the most easy to use libraries that they have worked with–citing “I finally don’t have to fight the framework when implementing designs”.
Find the most recent version at components.bitwarden.com
Timeline 11/2021-Present
Major Tasks Create Figma component library
Document component design guidelines
Draft UX writing guidelines
Establish design system management processes
Document component design guidelines
Draft UX writing guidelines
Establish design system management processes
Redesign components to modernize the UI
Platforms Web app, Electron Desktop app, Browser extension
Design Tools Figma
Storybook
Chromatic
Tailwind
Markdown
Github
Zeroheight
Storybook
Chromatic
Tailwind
Markdown
Github
Zeroheight
UX Methods General Research
Competitive & Comparative Analysis
UI/UX design
Competitive & Comparative Analysis
UI/UX design
Screenshots from 2021 showing the same form built using different 3 different UI frameworks
Component Audit
I started with a component audit in our web app - the most robust and well documented of the web frameworks in use. I consolidated the different patterns and marked which design patterns we wanted to keep.
I made subtle design recommendations to make the components more consistent, accessible, and usable, but ultimately tried to keep patterns the same so that during migration to the new system users would not be disrupted but mis-matched UI.
Bitwarden button audit with suggested updates
Bitwarden callout audit with suggested updates
Bitwarden card and list audit with suggested updates
Bitwarden text field audit with suggestions
Bitwarden checkbox and radio button audit with suggestions
Design tokens
From the component audit, I was able to identify design tokens currently in use. I documented:
• color variables and usage
• typography styles
• border styles
• corner radius
• focus indicators
For color variables, I checked each color variable for WCAG compliant contrast and made subtle adjustments if needed. Then I worked with engineering to create a Tailwind theme–the engineering CSS framework chosen to style our new component library.
Documentation for the Tailwind color variables used in the first version of the Bitwarden Design System
Building components
As I built components in Figma, the engineering team worked to build them in code so that they could use them within the product.
We started with common patterns like buttons, form fields, and tables since these were used on almost every page of the web application.
Design documentation
For each component I built in Figma, I included design documentation which included:
• usage guidelines
• visual states for interactivity
• other configurable properties – such as size or style
• accessibility notes on visuals, screen reader behavior, and other best practices
I drew reference from other well established Design Systems as I worked, including: Polaris, Carbon, and USWDS, to name a few.
Later, I translated the documentation into markdown and opened PR's to include component documentation directly in Storybook. This allowed design and engineering to have 1 place for all things related to the Design System.
Migrating the web app
From early 2022 through mid 2024, the engineering teams worked to migrate the web app to the new design system’s component library when capacity allowed.
Any new features would be built using the new library, and any page redesigns would be seen as an opportunity for engineering to migrate that page to the new library.
Before migration to design system
After migration to design system
Migrating the extension
In 2024, we had made enough progress with the web app interface it was time to extend the design system’s benefits to the browser extension. At the same time, the business prioritized a full extension redesign. This empowered the design team to move forward with component UI updates to modernize the interfaces further.
Before-extension UI with gray colors, lots of icon buttons, and inconsistent elements
After: redesigned UI with lighter welcoming colors, rounded UI elements, and consistent elements.
Design system redesign
The goal of the redesign was to bring in more branded elements and to modernize the existing components. With this in mind we made primarily design token level changes including:
• updating color variables to include brand variables and lighter status shades
• increasing border radiuses to provide a more friendly UI
• updating font styles from Open Sans to DM Sans
• using the branded blue for micro interactions, such as hover states, to bring a more branded feel
• updating form fields to have a nested label
Next steps: migrate desktop app
Throughout the project set a vision to share the web app interface with the desktop application–this is a common pattern across the industry and would save designers and engineering teams time leveraging the same solution across 2 interfaces.
To gather support for this, I conducted user interviews on user expectations when it comes to using a web app and a desktop interface. The research pointed to users expecting the same experience, often citing it being frustrating when a feature is located somewhere else or not at all when switching between web apps and their desktop equivalents.
With this strategy in place, the Bitwarden design team hopes to work toward migrating the desktop application to mirror the web app interface in the near feature.
User quotes supporting the idea of a shared web app and desktop interface
My take aways
Framing your initiatives to the motivations of stakeholders is imperative to success.
Early on, we struggled to gain buy-in and dedicated engineering resources to build the component library. I initially focused on showing the benefits I felt were important and "no brainers"– better UI consistency, better accessibility, and more efficient development. But this storyline wasn't convincing.
Once I realized what the stakeholders cared about–responding to user complaints of outdated UI – I worked with the Director of Product Design to show how we could solve this concern using a Design System. This led the company to expediting the web app migration, prioritizing the extension redesign, and spinning up a dedicated Design System engineering team to support the work.
Following this project, I've started asking more questions earlier to identify executive goals and motivations. Then work to frame my proposals around what the stakeholders want to achieve.