KeeperFill® Browser Extension Improvement Redesign 2019 - 2022
BRAND INTRODUCTION
Keeper Security is transforming the way businesses and individuals protect their passwords and sensitive digital assets to significantly reduce cyber theft. Currently, Keeper is pleased to release an updated version of our popular browser extension, which incorporates new productivity and user experience enhancements that our customers have been asking for. This includes a simpler, more holistic workflow when creating new records.
Mobile Device - Android, iOS and Apple Watch / Keeper Desktop App
PROJECT OVERVIEW
KeeperFill® is a browser extension that lets you autofill your login credentials in your favorite websites. Almost half of our user base only uses the Browser Extension (BE). This is their sole experience with Keeper and it needs to be clean and seamless. The old BE UI design was outdated and not aligned with our brand guidelines. Some competitive solutions have cleaner feeling user experiences. During this redesign, I not only made it much neater and aesthetically pleasing but also met 508 & Web Content Accessibility Guidelines (WCAG) Compliance Solution. This is a big progress to Keeper Product for maximizing our users range and creating the entry point for contracting with the government.
Key Features
RESPONSIBILITY
I am the Product Designer responsible for this project. I complete the user experience design and the user interface for this project. I conduct the design process through the research and ideation in order to create a final product for our users.
Main Tasks
Design Tools
-
User Stories, User Flow
-
Sketches, Wireframes
-
Prototype, User Testing
-
User Interface, Visual Design
DESIGN PROCESS
My First Step is Defining the primary scope of the project by collaborating with Project Managers. We build up persona and determine key user’s stories to define Functional Requirements.
Next, I explore Ideas for potential solutions by Researching through the use of a competitor analysis and current user feedback and constructing user flow and a ton of different quick wireframe sketches that represent a variety of ideas.
From here, the next step is Building prototype and have tech review with the Engineering team to make sure my design solution is doable and deliverable on time. Upon design approval, the Beta version is released for selective users to Test the new features.
With their valuable feedbacks, I can Iterate my design and create visual design and high fidelity user interface to finalize and deliver the project.
Team Collaboration
-
CEO
-
CTO
-
Project Managers
-
Engineering Team
-
QA team
-
Customer Support Team
PROBLEMS
If we compare the BE design with other platforms, The old Browser Extension UI design is outdated and not aligned with our brand guidelines.
GOALS
-
Update Keeper brand guidelines to align with the rest of platforms.
-
Fulfill 508 & Web Content Accessibility Guidelines (WCAG) Compliance Solution enable to work with the government customer.
-
Improve UX flow and add new features to meet user needs.
CHALLENGES
The major challenge happened when we were releasing the new design into the market. Our team thought we were giving the whole world to our users by changing the new design altogether. Our customer service ticket got blown into the roof with complains. Our users were freaking out because they are not familiar with the new interface and they do not know how to access their stored information.
During team review, we gathered information and understood the fact that people cannot accept changes so quickly especially when this is in regard to security and financial account. We quickly reverted the update and redesign the release into different phases.
Old UI Design
UI Redesign
RESEARCH
Product Adoption Curve
During team review, I proposed a concept I learned before called technology adoption lifecycle. This is the process by which a new idea or new product is accepted by the market. Essentially, this is an acceptance curve for users to adapt to new products.
We launch a new design, it takes time for people to accept it. Typically, only a small portion of the customer population will accept these changes in the early market. The goal is to reach the point indicated in green, the chasm, where a design is breaking into the mainstream market.
-
Innovators – had larger farms, were more educated, more prosperous, and more risk-oriented
-
Early adopters – younger, more educated, tended to be community leaders, less prosperous
-
Early majority – more conservative but open to new ideas, active in the community, and influences to neighbors
-
Late majority – older, less educated, fairly conservative, and less socially active
-
Laggards – very conservative, had small farms and capital, oldest and least educated
Thus, we understood the fact that people cannot accept changes so quickly especially when this is in regard to security and financial account. We reverted the update and redesign the release into different phases.
Facebook Case Study
One great example is when Facebook released its new version of UI layout and looks at 2020. Similar to our project, Facebook received tons of complaints about the new design change.
There were tons of unofficial online sources, articles, and videos to help users to switch back to the old/classic Facebook layout. At that time, it was possible to switch back to the old Facebook layout. But that option has now been removed.
FINAL SOLUSION
In light of that lesson I have learned from previous releases, I divided the main features into 4 phases to release. At the same time, based on my Facebook case study, we kept the original design for users to revert to the old design. In this way, users have enough time to adapt, navigate, and familiarize with this user interface and experience redesign.
Phase 1 － Interstitial Refresh
with 508 & WCAG Compliance Solution.
Keep components at the same position but refresh the UI to meet with 508 & WCAG Compliance Solution.
508 & WCAG Compliance Solution.
Phase 2 － Dark Mode Version
Design System
Phase 3 - New Features and UI added
Multiple Account Selector
If you have multiple logins for the same website, click on the dropdown menu to expand the selection and display all of the matching records.
Security - Stay Logged In
-
When Stay Logged In is enabled, it allows you to stay logged into Keeper when you close out of your browser or even restart your computer. In order to use this feature you must first enable it in your extension's settings menu.
-
Before you proceed, Keeper recommends that you enable Auto-Logout in order to protect your vault in the case that you step away from your device while logged into Keeper.
-
Once Auto-logout has been enabled you can set the timer to the duration you prefer.
Phase 4－New UI and Flow Implement
DELIVERABLE
Deliverable
Deliverable
KeeperFill® is a browser extension that lets you autofill your login credentials in your favorite websites. Check here to instal the most updated version.
-
Decreased complaint tickets by 30% compared to 1st release
-
Fulfill 508 & Web Content Accessibility Guidelines (WCAG) Compliance Solution
-
Open doors for working with government projects
IMPACT
REFLECTION
Takeaways
-
Considering users' learning curves and giving them enough time to digest and adapt new features
-
Applying Agile methodology to product development
-
Implement Change Management and Design Strategy
-
Finding a sweet spot between aesthetically pleasing and fulfilling 508 & Web Content Accessibility Guidelines (WCAG) Compliance Solution.
Next Step
This Browser Extension Improvement Redesign is one of my most significant projects at Keeper, which means a lot to me. I have worked on this project for 2 years and I'm still iterating my design for next release.
View More Projects
