Couple of months ago, after constantly being pestered by a friend, I finally set up a LastPass account and started using it on my iPhone. If you’re not familiar with LastPass, here’s a brief overview of what it is:
LastPass is a password manager that can create and remember your passwords. It also allows you to save credit card information and notes securely. All of this locked behind a secure master password.
However, after integrating the app into my day-to-day workflow, some features felt very cumbersome to use. So I finally scratched my itch to redesign the app. The redesign was unsolicited, so it’s strictly based on my experience with the iOS platform as a user and a designer. Since I did not have access to user data and/or research about LastPass’ current design, I did my best to think through every single detail and keep the overall feel of the app intact.
I broke up the redesign into two phases:
- Current Design Analysis — An evaluation of the current app
- Unsolicited Redesign — Suggestions for a better User Experience through a more intuitive User Interface
Current Design Analysis
The biggest pain point that I identified was in the information architecture of the app. One prominent frustration was the confusion caused by poor navigation and features scattered all over the app. I visualized the current information architecture to see what was going on:
- Hidden & unorganized features — LastPass’ best features are scattered throughout the app. For example, Emergency Access and Identities are features that are currently placed under Tools, which is unintuitive.
- Overlapping features — There are multiple ways to trigger similar features. An example of this is Clear Cache and Clear cache on Logout which are found in different parts of the app.
- Confusing Language — Text used to describe features and functionalities throughout the app is expansive and overly verbose. An example is the Add Access screen below:
Redesign — Let’s get to work
In this part, I rearranged the information architecture(IA) and redesigned some of the user interface (UI). Let’s address some of the problems:
Revised Information Architecture
My main goals in reorganizing the information architecture were:
- Increase visibility of key features in the app for easy access
- Remove some of the duplicated features that may not be as useful.
Here’s my version of the revised IA:
Ideation and Paper Prototyping
I decided to sketch out some solutions to structure different ideas before I committed to high-fidelity designs.
UX Suggestions and Redesign
Experience #1: Settings
One of the most important changes that I made was getting rid of the Tools section in the tab bar and organizing it’s content into the Settings section.
Experience #2: Vault (Home Screen)
I increased the font size for the text in each cell as the current font size was a bit hard to read.
Experience #3: Action sheet for further actions on a saved password
Experience#4 : Changing user Identities
Switching Identities is a task that’s better associated with a user’s Account rather than Tools. I also cleaned up the action sheet according to iOS Human Interface guidelines.
Experience #5: Adding emergency access to your account
In this workflow, I concentrated on the Add Access screen to make it less descriptive and airy without compromising the necessary details.
Experience #6: Account Details
Experience #7: Generate a new password
The configuration for password settings and requirements are currently hidden under Show More Settings. I redesigned the screen so the useful settings appear on the same screen for easier accessibility to the user.
Experience #8: Advanced Settings
LastPass gives an option to clear browser cookies, browser cache etc in two different places — the Actions submenu and the Advanced submenu, both within Settings. Under Actions, you can manually clear the cookies, cache etc whereas under Advanced, you can turn on a switch to clear these settings on log out. I decided to only keep the option to do the former under Advanced Settings as clear cache on logout shouldn’t be exposed to the user and instead be on by default.
Experience #9: Help & Support
Technical Support on the Help & Support screen currently opens up an email draft window. I switched it to a tinted blue button labeled “Email Us” to make it clear that its a tappable button. The other options on this screen are self-explanatory so I took out the detailed text that accompanies each button.
Reflections on my work here
What started out as a complaint of “Why is this app so hard to use?” turned into a month long endeavor into understanding how the simplest of actions can be made confusing with poor design. Although I underestimated how much work would go into redesigning an app and understanding the nuances of various use cases and work flows, this project was a great opportunity for me to push myself and hone my own design skills.
“Recognizing the need is the primary condition for design.” — Charles Eames
I hope you enjoyed reading about it as much as I enjoyed writing it. Be sure to ❤️ it below and leave comments/suggestions.
Note: LastPass just updated their app and renamed the “Tools” tab to “Security”. Everything else is still the same.
Edit (07–25–17) —The LastPass team got in touch with me and I had a good chat with their Head of Product Design.