Overview
Description
Prototype of dynamic interaction of opening and closing records details that sold the direction of the UI refresh.
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
The dark background of the top bar and record rows going all the way across made the app feel dated. Many font and icons sizes and styles were not accessible and inconsistent with other apps. The bottom bar was also dated and did not have an Android equivalent style without brittle custom code.
After
The my vault home screen was refreshed to match the web vault and android in theme and components. Font sizes and icons were updated to be accessible and to match other apps. The tab bar was redesigned along side Android to match and take advantage of native components for easier updates and maintenance.
How might we help average and large vault enterprise users find what they are looking for quicker?
Description
Key Impacts
Description
Takeaways
Description
Electron web and desktop app that 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
Dated, boxy, basic design with overly tight spacing and awkward layout and interaction choices. Record details are unnecessarily wide and lack visual hierarchy.
After
Every component and state is well crafted and harmonious and fits in a 4-point grid. The layout has better padding with more breathing room and there is improved visual hierarchy. Added website icons to records for better identification. The record detail is now a bottom sheet that animates from the bottom and has a width closer to smartphone. The new design is clear, consistent, dynamic and inviting.
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
Outdated classic color theme. Had not been updated in over 5 years. Brand identity barely aligns with the rest of Keeper's offerings. Inconsistent flows, modals and styles with the app. Too much custom, brittle code.
After
Updated the colors and details to match the web vault. The top bar takes better advantage of modern edge to edge displays. We added a bottom nav with frequently used views and to be consistent with iOS. The entire app was recoded using Jetpack compose and material friendly components for better, speed, maintenance, and updating.
Browser extension as mini mobile
device style 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
Font sizes, icons were too small for accessibility. The window size was too narrow at 320px and the vertical size would change depending on the content which was very bug prone. Things were too small and layouts were too tight and cluttered.
After
The new browser extension is fixed at 360x580 creating more space for larger fonts, icons and more airy layouts. The record row list matches the web vault list components with floating dividing lines, website icons and hover options. All components were updated and tested to meet accessibility guidelines.
🏗
More is Coming Soon
Cant wait? Reach out for details.