Summary

The Bitwarden extension was often called outdated with poor UX and UI. Sales prospects were being lost because their business users did not enjoy using the interface–saying it was ugly and hard to use. I worked as the primary individual contributor under the Director of Product Design on overhauling the design of the Bitwarden extension, in parallel with a design system refresh. 
Impact
• Modernized the Bitwarden extension experience
• Streamlined onboarding 
• Increased usability 
A survey showed that users were excited for the new interface, with ~88% of the 250 responses showing positive support for the update.

Timeline               02/2024-12/2024
Major Tasks        Develop UI/UX for browser extension
Platforms             Web browser extension
Design Tools       Figma
                                   UserTesting.com
UX Methods       General Research
                                   Competitive & Comparative Analysis
                                   UI Concepts
                                   Prototype
                                   Usability Testing
                                   Desirability study
Discovery

During discovery the Director of Product Design and I completed a heuristic analysis, reviewed internal and community usability issues, and bugs filed on Github. The biggest opportunities I found were:
• Search and Autofill experiences were inconsistent and had poor labeling: Vault and Tab
• Lack of structure in form organization
• Lack of Bitwarden branded elements 
• Poor visual hierarchy 
These issues made users feel the app was buggy, disorganized, overwhelming, and hard to use–especially for users unfamiliar with password management.
UI showing inconsistent behavior, outdate visuals, and many icon buttons
UI showing inconsistent behavior, outdate visuals, and many icon buttons
UI showing inconsistent patterns, filters taking up 60% or more of the page, and redundant labels
UI showing inconsistent patterns, filters taking up 60% or more of the page, and redundant labels
Form UI showing no hierarchy, inconsistent icon placement, low contrast, and content overload
Form UI showing no hierarchy, inconsistent icon placement, low contrast, and content overload
Empty state UI showing lack of hierarchy, poor contrast, no delight, and complex copy
Empty state UI showing lack of hierarchy, poor contrast, no delight, and complex copy
Wireframes

With the discovery insights in hand, we developed low fidelity wireframes of the login and create account forms showing updated content hierarchies and labeling that improved both the UI and UX of the product. 
From here, we incorporated the existing design system’s components to show how much the UI would improve using what we already had. 
Then we completed a 2nd version that included UI tweaks to the existing design system components that further modernized the interface.

The legacy extension UI, a black and white wireframe showing improved hierarchy, a higher fidelity design using design system components that improves the design further but still has opportunity

Iterating on design fidelity

With a solid UI direction, I moved on to tackle the design of extension's landing page. To solve the primary usability issue, inconsistent UI between the Tab and Vault pages, I decided to combine the 2 pages. 
The search options would now be clearly available from the landing page if an item did not appear right away on the home page. I also offered a direct autofill button for users to fill credentials vs. the implicit action for clicking an item. 
Then to improve the login form organization, we grouped form elements into logical and scannable cards with subtitles.

6 wireframes showing different concepts for organizing the page data, searching, filtering, and autofilling.
The final visual shows a bold new button, search, chip filters, and 2 lists showing autofill suggestions and all items.  

4 wireframes showing different concepts for organizing the Login form.
The final concept shows fields with nested labels, logically grouped content in legends, and a save button in the footer. 

User testing

With enough screens designed, we conducted moderated usability tests where both existing Bitwarden users and new users completed a set of common tasks in both the fully redesigned screens and the existing UI.
The updated design showed a higher average rating for visual appeal, usability, and overall experience.

Metrics showing the new design had a 23% increase in visual appeal, 20% increase in usability, and 10% increase in overall UX when compared to the legacy UI

Desirability study

During the research sessions, I used a desirability study to help synthesize user responses into actionable metrics. Users were asked to select words they felt best represented the prototypes they had just interacted with from a list of predefined words that I had categorized as negative or positive based on my desired user response. 
Users associated more positive words to the new design over the existing, saying it was: Familiar, Modern, Professional, Trustworthy, and Engaging

Graphs showing the legacy UI had 55.6% positive words and the new design had 91.1% positive words

Executive buy-in & timeline

The Director of Product Design and I presented the results to the leadership team and successfully received buy-in to prioritize the full project. 
Design system update

Engineering made the call to have teams work in tandem. The design system team made component updates in parallel to the feature teams working on applying the components to the extension’s design. With this in mind, I applied the same style adjustments used in the test prototypes to the rest of our design system. This included:
• updating color variables to include marketing brand variables and lighter status shades
• updating font styles from Open Sans to DM Sans
• increasing border radiuses to provide a more friendly UI
• 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 
Finalizing designs

I spent the next 4 weeks applying the same new UI patterns and principles to the rest of the application. 
I continually referred to the notes from the project discovery to address each reported usability issue while redesigning the UI and engaged in product, design, and cross-functional critique of the designs as they unfolded. This resulted in: 
• Simplified form structures 
• A more usable and accessible custom fields experience
• Improved settings organization and navigation

Screen recording of the Figma prototype showing the new UI and completing common user actions such as autofill, creating a login item, and filtering the vault view.

Handoff

For each of the teams I created handoff documentation that highlighted each change, documenting the functionality, accessibility behavior, and calling out specific components that should be used.

Example of handoff documentation for the team building the vault experience.
Each flow and product edge-case is highlighted with an annotation

My take aways

This project was one of the most challenging and yet rewarding projects I have ever supported. 
My biggest hurdle during the work was managing multiple teams and requirements at the same time. Because the engineering team had decided to have feature teams and the design system team work in tandem–communicating to the feature engineers and QA what the design system team was implemented was a constant challenge. 
By maintaining responsive, clear, and open communication we were able to complete the project without any major issues. If I were to support a similar project in the future, I'd advocate for more time to build out the designs using existing designs styles for the feature teams and then have a 2nd set of designs showing the final interface for the last round of QA testing. 
Back to Top