Churn Rate Reduction With the Help of UX - Case Study On Xeropan
The secret of reducing churn rate? Well done churn analysis and action on the results. In this case study, we show how we enhanced the user experience and gave solutions to reduce the churn rate for Xeropan.
A gamified language learning application, Xeropan helps people learn English with fun exercises such as interactive videos, chatbot conversations and weekly lessons.
They realized a lot of users stopped using their product after downloading it and going through the user onboarding process. So they asked us UX studio to reduce customer churn rate and increase user loyalty.
In this case study we cover:
- The user onboarding redesign process,
- Problems and their solutions, and
- Takeaways: our tips to reduce churn rate
From the UX redesign process to churn rate
Scope and team
The work started in April 2018 and took seven weeks. We redesigned the Xeropan Android application (still a work in progress, so the old version still comes up in the app store).
One researcher and designer from UX studio worked closely with Xeropan’s CEO and developers. Besides the regular design related tasks, we had to make sure everything went well (communication, deadlines, solving product related issues).
Increase in churn rate: defining the problem
The beginning of the process was exciting because of the complex problem we faced. What increased the churn rate? We only knew that something didn’t work with the onboarding UX. In order to find out why people had stopped using the app, we did what we always do. We started digging.
Kickoff workshops
The kick-off process started with a bunch of workshops involving Xeropan’s CEO, developers, and marketing and language experts to find out more about the industry, the company and their customers.
We identified the goals of the collaboration, talked about fears and obstacles, features, competitors, technical requirements, created the brand’s persona, and mapped the current and ideal user journeys.
We also checked the analytics data. It showed how a lot of users stopped using the product after downloading and going through the user onboarding process.
Initial user research
We wanted to find out more about the problem, so we had to dive deep into the details. Since they still had an existing version of the product, we decided to run user tests (with mini interviews) to find out where the customer onboarding process went wrong.
To also learn more about testing, check out this guide to successful usability testing.
We conducted a competitor analysis as well to find out more about the user onboarding best practices to reduce churn rate.
Taking the existing application under a microscope, we also did a heuristic evaluation. To improve the user onboarding experience, we collected potential usability problems and ideas.
Findings
After evaluating our findings, we found we were facing a complex problem.
Three main issues that caused the increase in churn rate:
- Users found the user onboarding flow annoying and didn’t understand the main story.
- In-app navigation proved very difficult, and people didn’t find things they wanted.
- People had accessibility issues using the app.
Solutions to decrease churn rate
1) Initial user onboarding
The problem
Xeropan’s onboarding flow wanted to tell the user about the backstory of the time traveller Professor Max. It should have shown how the world became a chaotic place where people forgot how to speak languages, and that only the user can set things right by learning English and moving forward in time.
However, while testing the old version, we found that most people just didn’t get it. They found the onboarding flow difficult to understand – mainly due to unclear copy.
People also mentioned that they got excited when opening the app for the first time and wanted to discover it on their own. But they soon got frustrated because loads of onboarding chat bubbles popped up, blocking their way.
They felt overwhelmed and wanted to get rid of these things that kept appearing on their screens unrequested.
User onboarding flow and the feature called “Word Builder” (old version):
Users didn’t want the app to tell them what to do next. Instead, they rushed through the whole flow without reading the story details and the feature-related instructions.
It also didn’t help that once you cleared away a chat bubble, you couldn’t bring it back. So, later when people wanted to use that feature, they didn’t have any instructions since they had already deleted it in the beginning.
The UI proved to be complicated too, thus people ended up not with understanding the features.
The solution: an ideal user journey
After discovering the problems our users had faced, I started sketching. I came up with ideas to achieve the ideal user journey.
We wrote a new copy and removed almost all the chat bubbles. “Smart cards” with shorter, easier to understand instructions replaced them.
These elements don’t pop up. They rest on the same level as other UI elements, letting the user decide when they want to read them and when to clear them.
After a brainstorming session with the Xeropan team, we put together a high-fidelity prototype. Then, we started testing it with people from the target audience. After a few iterations and another brainstorming session with the engineers, we had the final version of the onboarding flow.
The redesigned version of the user onboarding flow and the feature called “Expressions” (previously “Word builder”):
We found that people enjoyed the new onboarding flow and finally understood the basic story as well. The ability to discover the app at their own pace eased their frustration.
We also redesigned Xeropan’s landing page because we found that the onboarding experience starts right there for many people.
2) Navigation and structure
The problem
Our users couldn’t find what they wanted easily or differentiate the core lessons from the practice exercises. It affected the onboarding experience and customer retention, so the churn rate as well.
They also didn’t understand the big pencil icon’s function. They believed it would create a new list of lessons, practice their passive vocabulary or edit something.
In many cases, people didn’t know their location. They found it difficult to go back to this main view with the island when they wanted to see the navigation bar again.
It also didn’t work like in other Android apps. Once you tapped on an item, the bottom bar disappeared and you went one level deeper. See the profile page below for an example:
The solution
Evaluating the test results showed us the pain points our customers faced. So, we started working on the new navigation and structure to make the user onboarding experience better.
We made paper sketches to iterate through many of my ideas and discussed the pros and cons with the team.
When we had a good enough concept on paper, we built it in the prototype to find out what our users thought about it. After a couple of iterations, Xeropan’s new navigation was born.
As the Android Guidelines say: “Android users expect your app to look and behave in a way that's consistent with the platform.”
So, we redesigned the bottom navigation bar which now behaves like those in other Android apps. It shows the users their page location and doesn’t disappear when they tap on it.
Also, with the new copy, people can differentiate the core lessons (Learn tab) from other exercises (Library).
Clearly, copy makes up a very important part of designing an experience, but how to test it? Find out more about UX copy testing from one of our researchers.
3) Accessibility issues
It might sound surprising, but accessibility issues can also affect the retention rate. The following section shows examples of how we fixed some of the problems.
Buttons that didn’t look like buttons
Imagine your users can’t find the main call to action on a page. It could make it difficult or even impossible to use the application, couldn’t it?
Unfortunately, exactly what happened when we tested the old version of Xeropan’s Android application. Take a look at these screens:
See the “Buy all” button on the first screen? Users took it for an advertisement because it looks exactly like most of the banners on the web. A full-width rectangle with some text, it starts with the word “Buy” and a small label that says “-25%”.
No one understood that this button would unlock all the lessons in this list and cost 25% less than unlocking the lessons individually.
First, we modified the copy and made the button look more like a button. Later, when we completely changed the reward system and removed the coins, we realized this page didn’t need a “Buy all” button any more. We could remove it.
Tapping on a lesson on the list page, people would see the page on the right. It should have given an overview of the lesson, skills to learn, study-partners’ scores and more. But how to start the lesson?
Well, some people couldn’t figure it out at all. They looked for a start button, but couldn’t find one. They didn’t understand that it cost 20 coins to buy the lesson and to tap on the green circle to start it. Not surprising, huh?
Since we found that people usually didn’t want to see an overview page like this before starting a lesson, we slightly changed how it works. Tapping on a lesson on the list page now starts it right away.
However, you can still access an overview page by tapping on the info icon in the top right-hand corner of a lesson card.
Take a look at the redesigned lessons list and lesson overview pages below:
The lessons list page now looks more complex. People wanted to know more about the lesson types, the time needed to solve them, and friends who have already completed the exercises.
Levels that weren’t easy to understand
Another issue we found concerned levels. Let’s say you selected Intermediate level while onboarding. Opening the levels page later showed twelve different levels – two colourful (Basics and Intermediate) and the rest in black and white.
People got confused and didn’t know why they could only select from three options before. Also, they couldn’t understand which level they had reached since two appeared colourful at the same time.
When they selected Intermediate while onboarding, the system automatically unlocked Basics as well. For some reason, it didn’t make all the levels under Intermediate available (meaning that you could jump to them without having to take a level test), only Basics.
So we changed how it works and redesigned these pages a bit.
In the new version, you can select from all twelve levels in the onboarding flow and selecting a level makes all the lower ones available.
Also, in the redesigned version, users can easily see their level thanks to the blue background and the “Current level” label (which might be a good enough solution for colour-blind people as well.)
Takeaways from the case study
During the seven weeks of collaboration, we learned a lot about user onboarding and had the chance to test many different solutions. The user tests showed that people found the new version simple, straightforward and easy to understand. Moreover, they really enjoyed using it.
Redesigning the user onboarding flow, changing the navigation and solving the accessibility issues. We managed to solve most of the user problems. This will result in a much lower churn rate and higher customer satisfaction, and therefore, higher loyalty.
Our takeaways:
1) Understand the problem. It might sound like a cliché, but you cannot solve a problem if you don’t know what it is.
2) Test usability. Always test with the target audience because they are going to use the product you’re building.
3) Consider copywriting the most powerful tool in your toolbox as a UX designer, especially when it comes to user onboarding. Finding the right copy might not come easy but it helps people understand your message.
4) Using the wrong UI elements can make your product inaccessible. Stick with platform-specific conventions and keep your interface as simple as possible.
Searching for the right UX agency?
UX studio works with rising startups and established tech giants worldwide.
Should you want to improve the design and performance of your digital product, message us to book a consultation with us. We will walk you through our design processes and suggest the next steps!
Our experts would be happy to assist with the UX strategy, product and user research, UX/UI design, etc.
