Choose your view options

Case study · LastPass

Rethinking the LastPass mobile vault.

A redesign built around the most common job, getting a saved login fast, that beat the existing app in testing and became the basis of the new LastPass mobile app.

Company / product
LogMeIn, the LastPass password manager mobile apps (iOS and Android)
My role
[Your title; e.g. Product Designer, lead designer on the mobile redesign]
Team
[PM], [iOS and Android engineers], [other designers]
Stakeholders
LastPass product leadership, the desktop and design system team, [support or customer success]
Methods
Analytics review, app-store review analysis, workshops, task-flow mapping, concept sketching, unmoderated remote usability tests, testing against a control
Tools
[Sketch, InVision, UserTesting, analytics tool]

Problem

The LastPass mobile app hadn’t seen a meaningful update in more than three years. Analytics and app-store reviews pointed to basic problems with finding and using saved logins. The iOS and Android apps had also drifted apart from each other and from the desktop experience.

Solution

Using usage data, I focused the redesign on the most common tasks: finding a saved login, searching, and navigating the vault. I took two contrasting vault concepts to unmoderated usability tests. Then I refined the winning “classic” layout and tested it against the existing app.

Impact

  • A clear winner in testing: users found specific items more easily with the classic layout, hit fewer points of friction, and found it more visually appealing
  • Beat the existing app in a follow-up test, which eased fears of alienating loyal users
  • Approved for development, becoming the basis of the new LastPass app [Add: what shipped and any numbers from after release]

Context and problem

Business context: The LastPass desktop product had just introduced a new information architecture and design system that let users save many new types of items. The mobile apps hadn’t kept up, so mobile users were getting an older, inconsistent experience.

Customer problem: On mobile, people mostly open LastPass to grab a saved login while they’re trying to sign in to something. The old app made that slower and harder than it needed to be.

Evidence: We grouped app-store reviews into categories of pain points, cross-checked them against analytics, and ranked the categories by importance. Usage data showed which actions dominated. Selecting a saved login (“site login”) happened about 16.1M times on Android and 7.9M times on iPhone. Search came next, with about 5.7M uses on iPhone and 3.4M on Android.

Problem statement: How might we help people find and use the login they need in seconds, with one consistent app across iOS, Android and desktop?

The most common mobile actions: site login and search far ahead of editing or viewing items and notes.

My role and constraints

I owned: Designing the task flows for each common action, building the prototypes for both concepts, running the unmoderated usability tests, and iterating on the winning design for the follow-up test against the existing app.

I partnered on: Analyzing analytics and app-store reviews, setting goals in team workshops, and developing the two vault concepts and the information architecture.

Goals we agreed on

  • Make it faster and easier to find things on mobile
  • Simplify common flows
  • Close the gap between the desktop and mobile experiences
  • Unify the iOS and Android apps
  • Bring the desktop design system to mobile

Constraints

  • Loyal, outspoken users: A big change risked a backlash from people used to the old app.
  • New information architecture: Both concepts had to support the new item types already introduced on desktop.
  • Two platforms: iOS and Android conventions had to be reconciled into one experience.

Process

  1. Understand what people actually do

    We identified the most common actions in the app, where users came from before each one, and what they did next. That told us the context of each action.

    Key insight: On mobile, people mostly open LastPass to grab a login in the middle of signing in somewhere else. So the first round focused on four areas: navigation and information architecture, the layout of the vault and its items, search, and finding an item to log in to a site.

  2. Explore two contrasting concepts

    Our workshops produced two opposite approaches to the vault. Option 1, “Classic,” was the safer choice: a practical list layout close to what users already knew. Option 2 was a new card layout that showed more item types up front, to encourage people to use the app in new ways. Both had to work with the new information architecture from desktop.

    Option 1, a classic list with search and an item-type filter, next to Option 2, a card layout of passwords, cards, addresses, identities and more.

  3. Map the flows to test

    After designing the information architecture and navigation, I mapped a simple flow for each common action so we could build them into the prototypes. For example, the full steps for copying and pasting a login: open LastPass, log in, find the item, copy, go back to the app or browser, paste, and log in.

    Option 1’s navigation and menu structure, and the step-by-step copy-and-paste flow for a site login.

  4. Test, then test again

    I prototyped both concepts and ran unmoderated remote usability tests that took people through the common flows. Using what we learned, I refined the winner, built more task flows, and ran a follow-up study comparing the new design with the existing app.

    A usability test recording comparing the Classic “All items” prototype with the card-based “My Vault” prototype.

Key decisions and tradeoffs

Scope of the first round

Options
Redesign everything / focus on the top tasks
What I chose and why
The four areas the data showed mattered most: navigation, vault layout, search, and finding a login.
Tradeoff accepted
Less common actions, like editing notes, waited for later rounds.

Vault concept

Options
“Classic” list / the new card layout
What I chose and why
Tested both instead of choosing by opinion. Classic won: easier to find items, less friction, more visually appealing.
Tradeoff accepted
The bolder card layout, which might have encouraged new behaviors, was set aside.

Proving the change was safe

Options
Ship on the strength of the first test / test against the current app
What I chose and why
Ran a follow-up study against the existing app to address the fear of alienating loyal users.
Tradeoff accepted
An extra round of testing before development.

The solution

The refined “classic” vault keeps the familiar list but rebuilds it around the most common job: getting a login fast.

Search first

Search sits at the top of “All items,” since it’s the second most common action.

Item-type shortcuts

A row of shortcuts (Password, Payment Card, Address, Bank Account and more) gives one-tap access to the new item types from desktop without cluttering the list.

Recent items first

Sites you used recently appear above the full list, and each one has a copy button, so a typical login takes a tap or two.

Bottom navigation

All items, Folders, Add, Favorites and Account move to a bottom bar that’s easy to reach with your thumb. The same structure works on iOS and Android, styled with the desktop design system.

[Final screens for search results, an item’s detail view and the add-item flow.]

Impact and results

Both rounds of testing succeeded, and the design was approved to become the basis of the new LastPass mobile app.

  • Classic vs. card layout: Classic won: easier to find items, less friction, more visually appealing. [Participants, task success, time on task, ease ratings]
  • New design vs. existing app: The new design performed better than the existing app. [Participants, task success, preference]
  • After release: Portions went into development. [App-store rating before and after, time to log in, support tickets]

“[Quote from a test participant]”

[Test participant]

Reflection and what’s next

All projects