LastPass
Role
Product Designer
Timeline
Platform
Web, Mobile, Watch
Responsibilities
Overview: Leading the industry through design & experience
The LastPass product has evolved significantly over the years since its inception which has produced an incredibly valuable tool for our customers. However, the vault user interface have grown progressively difficult to maintain and modernize. While the product serves millions of customers, we faced multiple issues to keep existing and to get new users as well.
Challenges
Putting people first doesn't mean we want to lose money on the other side, so defining our opportunities was key for both sides.
Frontend legacy
Outdated components and the fragile legacy frontend code makes the developer work slower and modifying the code many times in one section breaks other parts of the UI.
Numerous, various stakeholders
The vault is the heart of the product, it affects every division from marketing, the mobile team to the support article tech writers. Coming up with a feasible MLP was key in order to succeed.
Although frameworks alone are not enough to solve problems, we used the double diamond here as a tool to rely on customer insight as its input. It helped us to identify gaps in our understanding that we had to address before proceeding.
Taking careful steps for a huge success
As a kickoff during a workshop, we had an activity where we addressed the problems and ideas that we knew over the past years from frustrated users to be able to get a landscape of the elements that needed to be focused on in the future.
Discover what others do right & wrong, and learn from them
Learning from others is a powerful exercise. We analyzed our competitors and industry leading tools to understand how we can do better. This meant discovering other apps what could be their selling and losing point to users that needs to be kept or even improved in our product for a long-term success.
Dashlane
1Password
Bitwarden
NordPass
ProtonPass
KeePass
User-benefit focused copy
UX copy is tailored to the expectation of the users.
Notification center
A central place where all of the notifications can be managed.
Favorites & Recently used
Favorites & recently used section as main sorting options.
Handling multiaccounts
Easy switch between multiple-accounts/vaults
Categories as filtering options
Use categories as filtering instead of main navigation logic
Easy add/edit options
Create a quick add/edit that supports the main user intent
Unclear primary call-to-action
The primary CTA is sometimes hard to find.
Busy, crowded interface
The white space is small, which makes the interface crowded.
Poor item hierarchy
The item hierarchy between vault items is poor.
Visually hidden premium ad
Premium advertisement is not visually differentiated enough to incorporate it with main action elements.
Poor visibility for helping informations
The visibility of special informations, such as shared, linked, at risk etc. are hard to recognize.
Even if we all have a gut feeling, it was pretty important to support them by looking at internal data that describes how users use our product.
Number of element data
30 day usage data of business & consumer users
We looked for the variety of elements number and how the number of elements change the behavior in terms of finding an item.
70% of consumers: 50-500 items
38% of business: less then 50 items
5.87% of business: 1000+ items
As a conclusion, we found that the more items a user have the more they use the search & menu items to find an item. This led us to make the search in a primary place, and introduce a default A to Z sorting option for the users.
User intent usage survey
3467 responses from business & consumer users
It was an interesting insight that users are using our platforms quite differently. We analyzed the top user functions that are used on each platform.
On web: Launch/navigation, Search/Check, Find password, Finance/Banking
On mobile: Search/Check/Find password, Launch/open, Add password
*Although this insight was pretty useful, later, designing for mobile and other platforms were cut from the scope due to development resources and its complexity at this stage.
Personas: Designing for the right people
Over the last 5 years, the company addressed personas to have a sense who of we are designing for. We used these as a starting point where we can always turn back when its needed.
Scoping our existing features to create a prioritized list
In the beginning we scored each potential feature, ultimately developed a prioritized list. This structured approach helped align our efforts with both business objectives and user needs, while remaining mindful of technical constraints.*
*We prioritized features based on their potential to have the most effect on first value attainment, growth of the user base, and support design system adoption. We also considered technological dependencies, integration with existing systems, and the optimal order for implementation. We also included features based on usability, focusing on the ease of access and intuitiveness of each feature in its current state within the vault, as well as task completion efficiency, aesthetic appeal, and interface clarity.
Primary actions
Launch item
Add item
Edit item
Delete item
Duplicate/Clone item
Copy data
Add to Favorites
Multi select
Move to folder
Drag & drop
Item placement
Search
Sorting
Filtering
Folder creating
Folder structure
Folder management
UI shell
List view
Card view
Left navigation
User menu
Out of scope
Sharing
Password generator
Security dashboard
Starter kit
Identities
Notifications
General overview of problematic areas
We conducted a quick expert review, where we primarily focused on functionalities that needed to be improved. This exercise helped us to focus more on each function and react to its usability issues in the future.
Mapping out all available information and data insights
We used a UX board to visually organize and map out all available information and data regarding the current state of each key feature, based on the factors like usability, user feedback, accessibility and competitors. This allowed us to better align our prioritization efforts within the team.
Understanding our customers through user interviews
Over the years, we conducted user interviews in order to deeply understand how customers use the product and what kind of differences we can see regarding the usage of each features. Firstly, we targeted users with a lot of items stored in their vault both in the B2C and B2B segment.
Design related takeaways and recommendations
While I only highlighted a couple of sentences in the previous sections, we had multiple hours of tapes. After analyzing them, we created a list regarding the most commonly mentioned things.
List view
Favored for its simplicity, high information density, and efficiency, so focus on that.
Maintain an uncluttered, scannable layout that highlights key details (e.g., app/website name, username, access, risks, last used date, etc.).
Improving performance
Collaborate with engineering to identify and address lag in large vaults.
Implement a hybrid solution combining infinite scroll with pagination or lazy loading to improve navigation speed and user experience, especially for large datasets.
Search
Add the ability to search also by URL
Highlight it, and make it easier to reach in every scenario.
Access information visibility
Include clear, intuitive indicators of who has access to shared folders.
Educate and help users regarding their passwords security.
Scalable user interface
Create a design that scales seamlessly, catering to users with both extensive and minimal vault content while emphasizing clarity and ease of interaction.
In 2024, LastPass released a brand new visual brand identity across the marketing team and this project was the first where we had the opportunity to create a long term vision regarding how the product would look like by using the new elements of the brands such as colors, logo, illustrations, typography. Later, we developed a whole system around that.
Overview: A brand new experience
Our priority was to solve problems but we came up with a solution that can function as a solid foundation that can be transformed into a long-term vision related to the product experience across the whole organization as well.
New sidebar: Showing what
is important
We reduced the number of options on the sidebar by removing the filter type of items. This move helped the user to make faster decisions and be able to explore the whole product right away.
Expand/Collapse
Main navigation
Get Help
Global search
Banner
Profile settings
The header was divided into two parts. In order to help the users find their wanted items quickly, we introduced a tab section to be able to see the user’s most frequently used items. Also, we put the item type filter and the view selector contextually closer to the actual items to maintain a visual, logical connection through the interface.
Reimagined item view: Seeing what users want to see
The goal of the main item view was to provide all of the desired information related to the item itself. Users can see their data, while being informed regarding the risk level of the item to be able to take immediate action. The table itself can be customized so users can tailor it to their needs.
Bringing it together: Editing an item with ease of use
The edit item feature was made in parallel by another team during the months we worked on the Vault experience, but there was opportunity to bring it all together so we transformed their solution into the new interface of Vault by keeping and integrating their findings and features. This was important since our research showed us that users mainly use the web vault when they need to edit or share an item.
Results of the usability testing
The goal of the usability testing was to collect vault users' feedback on the new version of the vault design and gathering the UX and usability related issues especially on the vault item list view, search and primary actions (such as Launch, Copy, and View). We were able to talk with daily vault users both B2B and B2C from LastPass and competitive products as well.
Users have solved the crucial tasks in the vault and there weren't blockers in the flows.
Most of the users understood the folders and subfolders and experienced the concept logical and standard.
Users preferred the Status column and security information about the items.
User Nr.1
“Colors are super helpful because I can see them immediately. So green, green means you're good, secure, good, good to go. But red is scary.”
User Nr.2
“The way you open the folder, I mean it was easy enough, you just clicked on it, it showed you what was in it”
User Nr.3
“I think it looks really, I think they look clean. That's kind of cool. I think it looks better than the current design.”
User Nr.4
“So I honestly think this looks a lot more modernized.”
All made by LastKit*, and the refreshment of our design system
*LastKit is the design system of LastPass. As one of the early designers in the team, I closely contributed throughout the years to design, build and evangelize a complex but flexible design system across the organization.
The project led us to refresh our internal design system and follow the changes of the new brand and designs. We updated all of our internal blueprints, components, tokens and more.
We also helped more than 5 teams, integrating the new design system while remaining consistent and keeping the quality, and increasing the velocity of shipping features.
Bonus: Expanding our vision across every platform
We knew, that if we come up with such an innovative, but also different solution for web, we need to prove that it can be used across every platform. Although the change of the functionality was not in scope, the systematic, visual changes took place for the platform below.
iOS
watchOS
Web extension
LastPass MFA
iPadOS
Android Watch
This project was quite a journey. We sometimes didn't see the light at the end of the tunnel, but always had the desire to move forward, explore and learn new things while pushing the boundaries. It was an excellent teamwork, and this taught me the importance of stakeholder mapping, and a clear MVP.
The project went on the roadmap of the year of 2026 and will be done by multiple teams in smaller chunks. They already started to work on the navigation, followed the content area and the connection of the other features of LastPass.