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
UserTesting.com
UX Methods General Research
Competitive & Comparative Analysis
UI Concepts
Prototype
Usability Testing
Desirability study
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 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
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.