top of page

Keeper Security - Credential Manager

Enhanced search for consumer and enterprise users and
a framework for expansion

Released April 2023

Recently Viewed - Quick Search.jpg

My Role

Lead Designer, Interaction Designer, Visual Designer, Design System, Prototyping, Testing and QA

Collaborators

PM - Laurie Crowe
Engineer - Jason Schirmer
QA - Brooke Lang

Duration

Design: 1 month
Engineering: 3 months
QA: 2 months
Overall: 6 months

Overview

The average user has over 240 password accounts and businesses typically manage 1000s of passwords. Improving searching and browsing records was essential to support managing growing numbers of credentials.

I led the end-to-end design of the web and desktop credential manager search filter system, search suggestions, and improved search results.

We significantly improved finding records and sets of records for both large vault business admins and consumers. Many users report that they now primarily use recently viewed as their main for finding items.

Platforms

Web App, Desktop App

Highlights

Launched search improvements

Quick access to recently viewed records

When the search field is focused with no input state, users can see recently viewed records. Users tend to revisit the same records often and this is a minimal way of covering most search cases without needing to search.

Recently Viewed.jpg

Typing less gets better results

When actively typing in the search field, users now see better results with folders and records mixed, matches found are prioritized by title, and nested matches appearing at the top level.

Search Results.jpg

Flexible, stackable filter chips for really narrowing searches

We improved and combined existing filters with new ones into an intuitive filter bar that allows for powerful narrowing of results with easy activation, combination and resetting of filters.

More Filters.jpg

Newly crafted, accessible components and patterns

This project introduced dozens of new components and patterns that have been rigorously crafted and documented to be accessible and easy for designers and engineering to use.

Components.jpg

Context

Growing vaults, enterprise requests, opportunity and limitations

Background

We just release record types which would increase surely increase vault sizes. We were also starting to encourage users to store more of their sensitive documents with encrypted storage.

At the same time, a number of large enterprise admins were asking us for better tools to sort, organize and search their vaults. With some specifically asking for advanced search that is common in popular drive services and some making it a contingency of signing deals.

Enterprises and large organizations make up the majority of Keeper accounts, and IT admins have the greatest influence over software and credential management decisions. Any features that help make it easier for admins to manage credentials positions Keeper to be a top choice and encourages the purchase of more employee licenses.

Constraints

Time - We only had a 6 months to design, build and test the initial phase MVP.

Small Team - We would only have one product manager, one engineer, and one designer.

Changing a Mature Product - We needed to be careful to not disturb and confuse millions of existing user workflows when making changes to search and browsing.

Performance - Decryption of records already pushes performance in very large vaults. Any improvements needed to avoid negatively impacting performance. 

Problem Space

Getting to the roots

What are user’s saying about searching for items?

We conducted interviews with our enterprise user community, enterprise support, consumer support and internal users to gather their pain-points, feedback and suggestions.

Interview Quotes.jpg

Taking stock with a UX audit

A deep dive into existing patterns revealed very limiting search, sort and filter tools that often returned unexpected results and required further manual browsing.

Nested Folders.jpg

Folders push relevant results below the fold

  • Because folders are always at the top, important results often end up below the fold.

  • Nested items show every expanded folder pushing results even further down.

Results Order.jpg

Poor results order

  • Search does not rearrange results based on relevance.

  • Matches contained within records often get order priority over matches in titles.

  • Users must type exact titles for adequate results.

Unclear Filters.jpg

Filter status is not clear

  • It’s hard to tell when and which filters are active.

  • There is often confusion around missing records because of an invisible active filter.

Results Order.jpg

Limited sort and filters

  • Sort and filters are too few and too basic.

  • Filters are on/off only and limited to one at a time.

  • All records types are always showing including those not in use which creates overwhelm and clutter.

Key problems identified

Poor Search Results

Important results often get pushed below the fold by folders, folder trees, and rigid vault ordering.

Limited Narrowing

Sort was limited to alphabetical by title or date modified and there were only 5 filters that were strictly one at a time.

Impossible Browsing

Scrolling was virtually useless in larger vaults unless results were filtered by a search query. Sort orders didn't do much to help.

Opportunities and Goals

How might we help users better find items in their vaults?

Better Refinement Tools

How can we help users managing large numbers of records to narrow their search/browsing?

Relevant Suggestions

How can we predict what users likely want to find before even performing a search?

Launch and Expand

How can we quickly deliver an impactful first version and build a foundation for future expansion?

Approaching Solutions

What filters to build first?

Divergent brainstorming and convergent dot voting

First we we diverged and tried to come up with as many filters and sort ideas as we could. Then we surveyed users and internal users and came up with over 40 different options. Knowing we could not make them all for the initial build, we used dot voting to identify the most wanted items.

Dot Voting.jpg

New Constraint

No new APIs

Part way into the project the backend team informed us that many of the most desired filters would require new APIs and that they were too wrapped up to build any for this project.

Does it even API?

Learning that we could create any new APIs was a bummer, but it also helped us focus our decisions through the lens of feasibility.

API_.jpg

Deciding on the initial filter set

We further refined the list down to 9 filters that are most common in file sharing apps that would minimize design and engineering time. All other filters were moved into a future phase bucket and sort orders were postponed to minimize overall scope.

MVP Phase 1 Filters.jpg

Initial filters detailed out

Each filter was further developed to determine nested choices and interactions with each.

 

Initial designs revealed that all nine could be overwhelming. We split the the filters into two groups: a default filter row and a menu for adding more filters to a second row. Future filters can also be easily added to this overflow menu.

Filters Defined.png

Approaching Solutions

Filter forms or filter chips?

Being tight on time, we had to commit one framework.

Filter forms seem to be more familiar and common, but they can be intimidating and hard to discover. Many popular services are replacing or modifying their filter systems with the added benefits of filter chips.

Form.jpg

A. Advanced Search Form

Traditional - May be more familiar for some users because this pattern has existed longer.

Everything in One Place - May be more familiar because this pattern has existed longer.

Overwhelming - Gives the perception that all filters need to be read through and decided on before proceeding.

Hidden - Hard to discover and hard to tell if filters are active and omitting important content.

Outdated - Compared to common filter solutions, this looks old.

Limited - Harder to update. Could require a lot of scrolling with planned filter options.

Chips.jpg

B. Filter Chips

Gradual Refinement - Encourages users to add one filter as needed. Allowing gradual refinement and minimizing overwhelm.

Discoverability and Clarity - Filters appear and persist when a search is performed. It’s easy to tell when filters are activated.

Easy Reset and Removal - Easier to dismiss individual filters or reset all.

Update Friendly - This system more modular and makes adding planned future filters easy.

Modern - Looks more progressive and aligns well with user’s expectations popular apps.

Less Familiar - Some may be unfamiliar and intimidated by the new.

More Clicking - The modal is obscuring and requires more back and forth clicking.

Approaching Solutions

How could we surface desired items without performing a search?

It's common to suggest when a search fields is focused. We would do the same, which would allow us suggest and experiment with new results orders without disturbing existing flows.

Ideally, we wanted to implement an algorithm that would suggest relevant items based on multiple factors and usage patterns. It would take too long to figure out the complexities and engineering and testing time would be unpredictable.

Insight

Recently viewed make great suggestions

Most of the time users revisit the same items. Instead of complex suggestions we could effectively show users recently viewed records and get most of the impact with minimal effort.

Suggested Items Concept.jpg

Concept 1: Recent Searches and Suggested Items

Comprehensive - This would allow for all the common search suggestions types.

More Targeted - A custom algorithm could be better tailored to people's needs.

Complex to Define - Creating an new algorithm would be time consuming just to figure out logic.

Requires News APIs - We do not keep track of folder.

Requires More Testing - Any complexity would require more iterations of testing and time.

Recents Concept.jpg

Concept 2 : Recently Viewed

Effective - Most people look to reopen recently viewed or modified item. Modifications require viewing.

Easy to Implement - MVP could be done with front end local memory without a new API.

Easy to Test - Because this is not an algorithm it would require little testing.

Update Friendly - This system more modular and makes adding planned future filters easy.

No Sync Across Devices - Recently viewed items on one device could not be seen on another.

Limited - We do not keep track of folders.

UI Design

Meticulously crafted visual design, interactions, and design system

New filter dropdown menus

Previous filters were binary only. The new filters called for a dropdowns that allow for single and multi selection, scrollable lists, and a search for when there are too many options.

For ease of use we made the dropdown search always focused and ready for input. Selected items move to the top of the list for clarity and easy dismissal and the chip counter shows how many are selected. Every filter can be reset from the chip or the dropdown bottom bar.

A lot of emphasis was put on design specs for smooth engineering collaboration.

Dropdown Menu v2.jpg

Easy to use components for users and the product team 

Distinct selected states makes it clear when a filter is active. No more wondering why some records are not show. 

 

We wanted the new dropdown filters to be as easy to activate and remove as binary filters are. To that end we added reset and remove buttons for one-click spot resets.

 

Having multi-segment chips made for a challenging component requiring separate focus states for each side and additional keyboard considerations. I managed to create a single, reusable Figma component that houses options for every combination and prevents invalid combinations making it easy for designers to configure. Working closely with engineering we also created mirror components in our React library.

Filter Chips.jpg

Finale and results

Newer users love recently viewed records and the improved results in the search dropdown. When surveyed, many reported just using recently viewed over other methods to find records.

Some longtime users, on the other hand, were so used to the previous system that they requested a way to hide the new features. Based on feedback we kept the new search improvements as they are by default and added settings to in future release to hide undesired features. It turned out to be wise to preserve the old system.

The sales team was very excited to have a new, significant differentiator (specifically targeting business admins who are primary decision influencers) to helping to win deals.

Post release interviews with enterprise admins and business support teams revealed that once users recognized the potential of the features they became excited and comfortable to make specific requests for filters and sort within the new system.

What to expect from a sequel

With so much potential for this new system, here are just a few directions I'd prioritize.

More user research and usability studies

 I would love to perform small scale usability studies to observe how admins perform search tasks and how they onboard and offboard employees to gain further insights into our release and discover new unmet needs.

Make recents even better

Based on the success of the recently viewed dropdown, I would prioritize a new API that would sync views across devices, and add recently added, modified for an even better "Recents" dropdown. Expanding recents to mobile would also be huge.

Filter by owner or sharer

We couldn't do it with phase one, but the single biggest request and most useful workflow would be to filter by the user owner or the person who shared an item. Users don't always know the name of a records, but know who it came from.

Encrypted file view tab

Encrypted file storage and the drive model is an important area of growth. Exploring a files tab with previews, document viewer, and better file management inside an encrypted environment could be very competitive in a landscape where cloud drives are mostly unencrypted. 

Up Next

Multi-platform UI refresh and design system with cohesive, accessible, and scalable experiences

bottom of page