Keeper Security - Credential Manager
Multi-platform UI refresh and design system with cohesive, accessible, and scaleable experiences
Product Design | Web App | Browser Extension | Mobile | Design System | Accessibility | Product Strategy | Project Management
My Role
Lead Designer

Interaction Design

Visual Design

Prototyping
Design System
Strategy and Management
Testing and QA
Collaborators
1 Designer
2 Engineers / platform
1 QA / platform
Phase 1 Duration
Design: 4 months
QA: 2 months
Overall: 9 months
Releases
Electron: Apr 23’
iOS: Aug 23’
Extension: Aug 23’, Mar 24’
Android: Sept 23’
Overview
I owned and led strategy and end-to-end design of the complete UI refresh of Keeper’s password manager apps across web, desktop, mobile, and browser extension. The refresh unified the user and brand experience across platform, introduced aa all new, highly crafted design system, improved and usability and familiarity, and ensured that all products are accessible and compliant with Web Content Accessibility Guidelines 2.1 AA.
Problems
In discovery, we identified 3 primary problems with the old versions of the apps.
1. Inconsistent
An overwhelming amount of components and patterns were inconsistent making it difficult for users to understand why similar experience behaved differently within a single app and across platforms. This also made the system hard to maintain and update, and document for both design and engineering. Too many custom components and brittle code created a extra work and confusion for teams.
2. Outdated
Our competitors were updating their UI and we risked looking outdated in comparison and out of touch with modern app design. Experiences felt disjointed and put into question the trustworthiness of our services because of the lacking build quality.
3. Not Accessible
Our apps were not accessible and did not meet Web Content Accessibility Guidelines. Color contrasts were off, focus states were not visible and keyboard controls created more problems than help.
Opportunity
How might we update all of Keeper’s experiences to be consistent, modern and accessible?
1. Consist Quality
Every component, interaction, and pattern needs to be updated to be part of a cohesive system that is harmonious across platforms. We need a new design system for consistent, easy to follow user experiences and to make it easier for designers and engineers to use, update and maintain the system.
2. Modernity
Update screens, interactions and flows across all of Keeper’s apps with an engaging, modern aesthetic that is inviting, polished and promotes trust and forward thinking.
3. Full Accessibility
All components, interactions, and experiences need to meet Web Content Accessibility Guidelines 2.1 AA or higher to ensure that our products are equitable to the most people and comply with government and enterprise requirements.
Launched Designs
The following designs shipped publicly to all of Keeper's users.
An all new, well crafted, and accessible design system
The design system was redesigned from the ground up with hundreds of new components detailed with variant states that follow a 4-point grid and share a cohesive system of details that harmonize every interaction and flow across all of Keeper’s products. Every component and its variants meet accessibility guidelines and have well defined keyboard control guidance. I worked closely with designer and engineers to meets their respective needs and create a system that empowers them to make quicker, high quality design decisions on all future projects with built in accessibility considerations and a framework for continuous improvement and expansion.
All new components library with variants for every context
Example of record list item variant states
Electron web and desktop app that is fresh, modern and accessible
Before the web vault had a basic layout with squared components and dividing lines and lacked accessibility. To lighten and modernize the app, we removed most of the dividing lines and added extra padding to float components and used negative space and hierarchy to group items. Before the record detail was set to 60% of the screen width which would make record fields so wide on large displays that it was hard to know which controls belonged with which field. For better clarity, we turned the record detail into a bottom sheet with generous padding and a default width of a smart phone. Opening and closing the details slide in and out from the bottom for a delightful, dynamic interaction.
​
For quality of life we added website icons to record rows and record details for better recognition and added a prominent share button to encourage secure sharing (a core benefit of a password manager). Every component, state and interaction was updated for consistency. A 4-point grid underlies all design elements from padding decisions to friendlier, more inviting radii. The overall impact is a harmonious, high quality app that is easier to learn, instills trust, and delights to position Keeper as a progressive, forward thinking leader in the credential management industry.
Before
After
iOS app with harmonized details and patterns
We updated the top bars, record details and bottom nav to match the android and align with the web vault and browser extension. We lightened the top bar to take advantage of the small bezels, iconic notches, dynamic islands and status bars. The bottom bar was update to be consistent with shared benefits and limitations of Android bottom navs. As with the other apps, all other screens were updated for color and matching details with meticulous attentions to WCAG compliance.
Before
After
Android app with new theme and bottom nav
Android was very out of date using a previous dark, gradient background theme lagging behind the other platforms using accessibility friendly white background. We focused impact on the home "My Vault" view. We changed the background of the record list and top bar to white and added a user friendly bottom nav tab bar to match the web vault. Favorites and two-factor authentication tabs are prioritized to improve quality of life with quick access to most used functions. Just like the web vault we updated every other screen and all other components with matching color pattern which dramatically modernizes and fits the Android experience within the greater Keeper ecosystem. All sizes, contrast ratios, and overall details are also updated and tested to be accessible.
Engineering used this refresh as an opportunity to rebuild every component to the new Jetpack Compose language for easier future scalability, maintenance and overall efficiency. This project became a powerful opportunity to streamline multiple, large, foundational improvements and set us up to keep reaping benefits from our strategic, forward thinking, front loaded efforts.
Before
After
Browser extension as mini mobile device companion
The browser extension underwent the largest transformation. Before it would change in height based on content which caused a lot of bugs and the fonts and icons were too small for accessibility standards. We realized that extensions are like mini mobile devices within browsers, and leaned into this insight as a guiding concept to improve usability. We fixed the dimensions at 360x600 similar to android phones. We also matched the top bar, search, and record rows to the web vault and added website icons to login records. The updated extension reinforces the brand and familiarity between Keeper products.
Before
After
Release Results
After a 6 months of hard work we launched the first phase of the web and desktop apps in April of 2023 with the other platform refreshes launching in August and September of 2023.
1. Consistency and Quality
The updated apps and new design system are well crafted and cohesive across all experiences and platforms. Consistent patterns and components make it easier for users to onboard and to retain their familiarity from platform to platform. With the new system, engineers and designers can focus more on larger design and engineering goals because components are now easier to implement and design decisions are more streamlined. The new system helps engineers and designers who were not part of this project and all future projects have an improved flow. We also significantly reduced the amount of brittle code which helps inevitable updates tremendously.
2. Modern, Exciting and Trustworthy
As soon as the first refresh launched, there was excitement and from both our customers and pride from our internal users. The redesigned apps are inviting and emphasize lightness, ease, and clarity. The apps are more delightful and more engaging to demonstrate and support.
3. Accessible Now and Into the Future
The web, desktop, and browser extension apps are now fully WCAG 2.2 AA compliant with the mobile platforms and the admin console slated to comply in the near future. Accessibility considerations are now a part of every project and the new design system and documentation of patterns serves as a framework for continuing adherence and implementation of standards.
Ongoing Impact
There are multiple phases of this project that are still scheduled to be released and are being developed and tested at the time of this writing. The foundation established in this project influences all future features and additions to the design system.