Redesigning Lokalise user onboarding
One of the new sign-up screens that we implemented
One of the new sign-up screens that we implemented
Lokalise has a massive growth in between 2018 to 2022, we doubled our revenue year over year, and raised a $50M series B funding in 2022.
However, as the market got worse, we noticed a massive drop in the acquisition and activation rate since late-2022. This is a red flag for us as we know the activation rate is closely linked to retention, and we know we are at risk of losing future revenue when looking at the trend.
As the founding designer of the growth team, I had the opportunity to establish the foundation of the design process. Here are the key stages:
🔎 Investigate: This initial stage involved several steps. First, I believe the best way to design good UX is to experience what the user experiences. Therefore, I always start by dogfooding myself and measuring the journey with the Psych framework to get started. We then conduct both quantitative and qualitative data to get an overview of all the problems so that we can prioritize the most impactful problem to start with.
🧠 Design & Collect Feedback: At this stage, I conducted a workshop with the team to prioritize the problem and brainstorm solutions together. After that, I turned the top-voted solutions into prototypes to collect user feedback and iterate the design based on the feedback for several more rounds before finalizing the UI.
📏 Measure: Once the UI is implemented, we launched it as an A/B test and a continuous research program to measure the impact of the design. Based on the data and user responses, we made informed decisions about further investing in the feature or pivoting to new ideas.
My design process
When we first established the Growth team, I was the only team member in the team (Both PM & EM hadn’t started yet). Since I had no one to rely on and plan stuffs, I could only rely on my designer colleagues (i.e., Lokalise design team).
The first thing I did was to ask everything to join me in evaluating the current onboarding (aka, dogfooding). This exercise helped us internally gauge how effective our onboarding process is and kick off discussions on potential improvements.
Q: Let’s do a little quiz. What are the top 3 problems you observe? 👇
Take a moment to think — No cheating!
Got your answer? Scroll down...
1. Cognitive Load 🤯
Cognitive load refers to the mental effort needed to complete and understand a task. Instead of making it easy to start using Lokalise, we overwhelm users with a long list of actions and calls to action (CTAs), which takes time to process.
Here's a heatmap of how the user's attention is diistracted
2. Banner blindness 🙄
The top banner is something that everyone ignores. In fact, the average click rate of a top banner is just around 0.004%. However, at the same time, this top banner is breaking the user experience.
3. Interruptive Experience 💀
Finally, showing users a pop-up that blocks them from accessing the app right away disrupts their flow and can lead to irritation, especially when the pop-up is also cluttered with multiple CTAs.
Problems that we identified from dogfooding ourselves
My reaction, we we first started
Clone the onboarding analysis template
Close
2. Analyzing Quantitative data
After mapping out the end-to-end experience, I also partnered with my PM and Data Analyst to look into quantitative data together — where we tried to dig into all the data to find out user behavior, where people drop off, what features they are using during the trial period.
Significant drops occur between sign-up to project creation (48.8%) and project creation to file importation (75.2%).
And I fell in love with Amplitude so much that I even run training sessions for new joiners.
3. Interviewing customer & prospects
After identifying where drop-offs occur, we began conducting interviews with both prospects and current users to understand why they were leaving during the onboarding flow.
Interviewing users who recently gone through the onboarding
1. Design Sprint (i.e., Prioritize as a team)
After we had done our research to identify the problems, I facilitated a design sprint workshop with my PM, Engineers, Data Analyst, and User Researcher to prioritize the problems together as a team and propose solutions.
Sneak peek of the workshop
From the workshop, we identified several solutions to improve the user experience:
Preview Translation (Results): To motivate users during the sign-up process.
A JTBD-Based Homepage: Designed to align with the 'Jobs to Be Done' of the visitors.
An interactive sign-up process to help users get familiar with the product.
A Passive Checklist: To help users navigate and utilize the product effectively.
Workshop fan? Click to see the full agenda
Tap to read
Close
I always start by doing a little icebreaker to get people settled into the workshop.
We then look at all the problems we gathered and vote to decide solving which problem area will give us the most impact.
After deciding the problems to focus on, I like to have a short session to turn problems into HMWs so participants don't focus directly on the solutions.
On the second day, we then started brainstorming about the solutions based on the HMWs
Lastly, we have everyone sketching during the workshop to visualize the idea and vote as a team which one to prototype.
2. What did we learn from testing these ideas?
Following the workshop and prototyping phase, we conducted user testing with prospective users to determine which idea would have the most significant impact.
Here's what we learned from the prototype testing:
A sneak peek of the onboarding analysis we did
3. More iteratons of design & testing
Incorporating user feedback, I began iterating on the design to address the usability and UX issues raised by testers. This ensures we deliver a high-quality product.
I had so many versions that Figma had memory issues loading them 🙈
.webp)
The design iteration of checklist
After two rounds of testing, we began polishing the final Minimum Viable Product (MVP) to prepare it for shipment and real-world user testing.
We also released a new JTBD-based homepage to increase sign-up rate
We also did a small update to motivate users during sign up
#1 - Better in-app onboarding
We introduced an actionable checklist to guide users through the onboarding process, helping them navigate Lokalise more effectively.
#2 - JTBD-based homepage
We rolled out a JTBD-based homepage after discovering that visitors often come to Lokalise to localize specific content types.
#3 - Sign-up low hanging fruits
We also dedicated a week to lightly refresh our sign-up pages, showcasing Lokalise features and updating copywriting to better communicate our offerings.
Combining all the implementation and design we delivered, we managed to:
And here’s one user feedback that made me extremely happy.
“I have never used Lokalise before but I feel like I have used it. That’s a weird feeling.” — Prospect of Lokalise.
I wrote an article on onboarding together with Felix Lee from ADPList. If you are interested, feel free to check it out.
Designing user onboarding: lessons from Figma, Duolingo, and more
Find out the common mistakes in designing onboarding and learn the secret sauce behind engaging onboarding from 20+ top tech companies.
#AI
13 mins read | 46k+ reads
