Save-a-Site & Auto-Form-Filler Improvements in LastPass
LastPass is a password manager, auto-form-filler, random password generator & secure digital wallet app.
The problem & its significance
In 2016, at a time when LastPass had just about 8 million registered users, LogMeIn decided to set a massive goal for LastPass: 10 million daily-active-users by 2020. One of our first steps towards this lofty goal was to improve the browser extension features; save-a-site and the auto-form-filler.
These features were rolled out to users and tracked together, so I thought it would make sense to tell both stories here. A 2-in-1 deal, if you will.
Product and business goals
Retain active users by delivering a sticky, valuable product
Improve basic save-a-site flow to cut down on user confusion and user error duplicates
Strip down and rebuild the in-field dialog box to be more opinionated about what a user needs to do at any given moment
Note: To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study.
Role \ Lead UI & UX Designer
Our team consisted of three designers: two primarily focused on UX (one junior and one senior product designer) and one primarily focused on UI (myself) for the save-a-site feature. We worked closely with the product team, and collaborated with data analysts and engineers.
I led the UX and UI design for our auto-form-filler feature. I worked very closely with product to develop an iterative rollout plan of these feature improvements that aligned with our roadmap and business goals. I also partnered with a user researcher to run usability studies testing some of my auto-form-filling concepts.
Who will be using these features
Research found that our browser extension features were most beneficial to our tech-savvy power-users, but not resonating with our larger target audiences: college students, young professionals, do-it-all parents and the un-tech-savvy grandmas. We hypothesized that if the features were easier to access and use, we'd see an increase in adoption.
Feature one \ Save-a-site
I joined the LastPass design team when they were just finishing up their first round of testing for this feature. I began by working closely with the design team and getting up to speed with the work they had done so far. I also met with product and marketing to learn more about the people currently using our product, and the people we aim to reach.
"Before" LastPass save-a-site browser extension feature
Design goals
To improve the save-a-site feature, the design team had a few key objectives:
- Improve accuracy for detecting the user's sites and associated credentials to build user trust
- Similarly, improve save-a-site prompt accuracy; Only show when user has logged-in/created an account and has not saved the site in their LastPass vault
- Keep user in-context rather than opening a new tab to reduce cognitive load when forcing them out of their intended task
- Increase usage and saving-to-vault speed
- Simplify the save-a-site form and provide a way for users to save their site with 1 click
- In addition to the ease-of-use improvements stated above, redesign the motion and overall aesthetics
Design process
- Research/gather requirements
- Research: watch studies from first-round of usability tests
- Rapid sketch exercise
- Propose design concepts & review with team
- Validate design (second-round of tests)
- Iterate based-off feedback
- Create and propose design language to be embedded throughout product
- Product motion designs
Rapid sketch exercise
To get the creative juices going, I time-boxed a half-day to rapidly produce concepts and ideas without the use of our existing patterns. This exercise allowed the team and I to see new possibilities and think outside of our existing guidelines. These designs eventually led us to the version we shipped.
Digital Sketches
Defining a card pattern in LastPass
While I was working on these features (as well as an IA overhaul), I was beginning to really see the importance of defining concrete UI patterns in LastPass. I wanted to not only introduce an updated look to our card pattern, but also redefine them. I had several hypotheses of how this could benefit our users:
- Increase in the user's trust: For a password management tool, trust is everything. Creating a consistent design language inside and outside of the app will help the users know and trust that they are using LastPass.
- Add familiarity from the real world: We saw a parallel in a card UI pattern and the many physical cards that our users store in LastPass (credit cards, drivers licenses, rewards cards, etc.).
- Bring delight to the overall experience: Mimicking something you can physically lock-up inside your vault provides a level of gratification that could incentivize user to save more.
As a result, we introduced this card pattern concept into LastPass, used to represent items in a users vault, across all platforms.
Final design iteration
Once we had established the card pattern in LastPass, the design for this feature seemed to just fall into place. If cards represented items in (or about to be in) a user's vault, all the design needed to portray was LastPass holding the new card asking the user if we could add it to their vault. Following hierarchical design principles and standard usability guidelines, the placement of the remaining elements were straightforward.
Save-a-site in motion
I created animations in CodePen to communicate the motion design to the engineers.
Feature two \ Auto-form-filling
While LastPass was in startup-mode, they did what most business do early on: they gave their users anything and everything they asked for. At the time it worked well because it helped build a devoted user-base, but as the product matured, some of the tools were starting to resemble pocket-sized versions of the entire LastPass product. The auto-form-filling tool fell victim to this and the design and product team felt that in order to increase it's usage we needed to redesign and redefine it.
"Before" auto-form-filling-feature in LastPass' browser extension
Design goals
To improve the auto-form-filling feature, the design team and I had the following in mind:
- Rearchitect the information in this feature, removing superfluous options and radically simplifying what’s there
- Advocate form-field accuracy to provide new and existing users the right information at the right time
- Conceptualize other ways to present contextual data
- Implement tracking for this feature so we can quantitatively measure what users need for this feature
Design process
- Gather requirements
- User-flow creation
- Information architecture audit and redesign
- Design
- Dogfood
User-flow creation
To get in the user's mindset, I collaborated with a senior product designer and product manager to whiteboard the user's "happy path" when filling out a form. I digitized this exercise later for the team to reference in conversations moving forward.
Results
By seeing how users ultimately want to use this tool, this exercise discovered the superfluous options and paved the path to improve the information architecture. Turns out our happy-path for this feature took a tremendous amount of engineering effort, so we worked with together taking an iterative approach to quickly improve the feature now and work towards our end-goal. We broke our efforts into three phases:
Phase 1: Simplify existing feature (this)
Phase 2: Re-conceptualize feature (available upon request)
Phase 3: Can't disclose
Information architecture audit and redesign
When auditing and redesigning the feature's taxonomy, I gathered earlier customer insights to get in the right mindset of the user. Here's what I kept in mind:
- I am like everyone else in the world and hate filling out forms.
- No matter how big or small the form is, I would like it filled out as quickly as possible so I am happy again.
- I've clicked on the LastPass icon because I need a specific piece of information that I may remember and am too lazy to type or that I do not remember.
- This could be an important form so I expect LastPass to present the information I need as clearly as possible.
- When using the generate password tool, I suspect the sites that I use to have similar passwords strengths, so I don't care about what the password actually is. I care that it works and keeps me safe.
"Before" information architecture for Auto-form-filler
"After" information architecture for Auto-form-filler
Design and validation
Leveraging the design language work I had done for the save-a-site feature (see "Defining a card pattern in LastPass"), it made perfect sense to also introduce our card pattern into the auto-form-filling feature. We dramatically simplified the generate password flow by allowing users to create a password in one click and tucking options to customize in a more options button. The product and design team also worked with engineers to ensure that at least the top 1000 sites had a major improvement in auto-form-filling accuracy, allowing us to simplify the options presented to the user and feel more contextual.
Final design iteration
The final design remediated many known issues and user complaints, so the team felt rigorous testing for this version was not necessary and so we could direct our research efforts towards phase-two. In phase-two of this project, I worked with a user researcher and we made sure we included testing our card pattern concept into the study. We found users really benefiting from our cards, validating our assumptions of them building trust and adding familiarity/delight.
Outcome \ Save-a-site & Auto-form-filler
The results of these improvements were overwhelmingly positive. The initial rollout plan for these features was expedited due to the increase in usage by new and existing users.
With these features, the design team and I were also able to persuade our product team to prioritize the implementation of a/b testing and user behavior tracking tools for LastPass.