Background
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.
LastPass is a powerful product especially with the growing need for privacy and security. After embarrassingly using a Google doc to manage my passwords, I finally made the leap to LastPass.
Uhh…Google Docs?
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:
Current Information Architecture
Pain Points
- 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:
Add Emergency Access
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:
Revised Information Architecture
Ideation and Paper Prototyping
I decided to sketch out some solutions to structure different ideas before I committed to high-fidelity designs.
Initial Sketches
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.
Settings
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.
Vault (Home Screen)
Experience #3: Action sheet for further actions on a saved password
Action Sheet
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.
Switch Identity
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.
Emergency Access
Experience #6: Account Details
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.
Generate Passsword
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.
Advanced Settings
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.
Help & Support
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.
👉🏽📱 Here’s the link to my fully interactive prototype. Feel free to play around with it. 😀
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.