The Bitwarden Blog

Bitwarden Design: Updating the web app navigation

DF
geschreven door:Danielle Flinn
gepost:
Link Copied!

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.

What’s new

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.

Individual Bitwarden vault UI before and after

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. 

Product switcher gif

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.

A peek backstage

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 

Strengthening the navigation model

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

Early concept showing idea for 2 navigation layers.
Early concept showing idea for 2 navigation layers.
Refined concept showing the updated navigation structure that ultimately formed the base for the revised design.
Refined concept showing the updated navigation structure that ultimately formed the base for the revised design.

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.

Concept image displaying Bitwarden on a tablet-sized screen. Not reflective of current implementation.
Concept image displaying Bitwarden on a tablet-sized screen. Not reflective of current implementation.

Clarifying admin interfaces

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.

Admin view of Bitwarden vault UI before and after
Admin view of Bitwarden vault UI before and after

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. 

Validating design changes

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”.

Results from the desirability study. No participants selected these additional options: Boring, Busy, Cheap, Overwhelming, Unattractive, or Unexpected.
Results from the desirability study. No participants selected these additional options: Boring, Busy, Cheap, Overwhelming, Unattractive, or Unexpected.

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. 

What’s next 

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!

Get started with Bitwarden

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!

Product Updates
Link Copied!
Terug naar Blog

Get started with Bitwarden today.

Maak uw gratis account aan

© 2024 Bitwarden, Inc. Voorwaarden Privacy Cookie-instellingen Sitemap

Go to EnglishStay Here