Bitwarden Design: Updating the web app navigation

For several years Bitwarden has researched and improved the user experience across the Bitwarden applications. It started with updates to the web app for Bitwarden Password Manager and extended to the Admin experience. The design team took new research and learnings from the work on Bitwarden Secrets Manager and are bringing them to the Bitwarden web app with the latest release. This design features a new navigation layout tailored to meet diverse user needs.

Immediately noticeable, the new design features a vertical navigation which allows for easier scannability and navigation between pages while also improving the visual aesthetic of the web app.

In addition to the new vertical navigation, the updated experience distinctly separates the Admin Console (previously called Organization Management) and the Provider Portal (available to Bitwarden MSP clients) from the main Password Manager application. Users can switch between each of these Bitwarden products quickly and easily. 

This gives Bitwarden organization administrators more clarity on when the interface relates to admin tasks and when it relates to their individual Password Manager needs. Separating out the Admin interface also lays the groundwork for a unified management experience supporting multiple Bitwarden products from a central Admin Console.

During the project the Bitwarden design team identified several opportunities to improve the Bitwarden web application user experience:

• Develop a stronger navigation model for enhanced scannability and easier access to subpages

• Increase visual cues to differentiate the Admin Console from the Password Manager

• Enhance the overall web application’s aesthetic appeal 

When looking at the existing Bitwarden web app design, the team aligned on 3 primary goals to help strengthen the navigation and design of the web app: 

1. Transition to a modern, vertical navigation pattern

2. Incorporate expandable sections for straightforward subpage access

3. Expand the content area for better use of screen real estate

The vertical navigation design achieves the visual scannability goal by consolidating primary and secondary navigation layers into a central location, while also providing a modern feel. Importantly, it is familiar to users by maintaining consistency with common industry tools and services. 

Using a vertical navigation also widens the application’s content area, which provides a more flexible model to grow with the product as new features are introduced. Finally, the design lays the foundation for building a responsive experience across a variety of screen sizes.

During the previous research and exploration for improving the Admin web app experience, it became clear to the Bitwarden team that the organization administrative pages (Organizations) functioned primarily as a separate Admin Console.

The team looked at other suites of SaaS products and each had a separate experience built specifically with administrators in mind to manage the tools and services they had purchased. With the launch of Secrets Manager, it was clear that Bitwarden would need to move in this direction to allow administrators to use a central experience to manage all things Bitwarden. 

The team pulled the Organization management pages into a dedicated Admin Console to help clarify how this interface should be used. 

With the new navigation and separate admin experience defined, it was time for the team to test the redesigned web app experience. 

The team recruited several participants to assist with the evaluation of the new design, including organization administrators, users from the Bitwarden community, and non-Bitwarden users.

The participants were given tasks related to navigating between the Password Manager and Admin Console, as well as between pages within each interface. Their feedback was overall positive and enabled further refinements seen in the final design.

The mix of Bitwarden users and non-users were surveyed on the visual aesthetic of the application. After viewing the updated design, participants were asked to choose several words from a list that included both positive and negative options. The results from this desirability study showed that 98% of the words chosen were positive–with the top 2 words being “clean” and “modern”.

With this research complete, the team was confident that the new web app design was both usable and improved the user's visual perception of the application. 

The new web application experience offers benefits for all Bitwarden users. Bitwarden will continually improve by adding quality of life features, refining the visual aesthetic, and by iterating on general usability updates.

The new web app design elevates the Bitwarden experience, making it easier to navigate the Password Manager experience itself and switch between other products and management interfaces. The Bitwarden Product Design team recognizes and thanks the Bitwarden community for always being a valuable source for insights and participating in numerous rounds of user research to bring you this design update. If you’d like to participate in future feature development or testing, be sure to sign up for future research opportunities here!

Experience the new design for yourself! Log into your account today, get started with a free personal account, or begin a 7-day business trial to start exploring the new interface and all the other amazing security benefits of Bitwarden!