Case study: Gamification learning app
About the project
Since a lot of people spend their time on ‘finding the best way’ to learn English instead of spending it on the very ‘learning’; they get disappointed after a while, without any significant progress. Their time is limited and they have a lot of distractions. Funglish tries to make the learning process more easy and more fun.
Problem Statement
Funglish is an English learning app for Persian users that tries to make the learning process more fun, through attractive lessons, multimedia, and its teachers’ 24-support. But the MVP didn’t meet the stakeholders’ goals. They wanted more user engagement and satisfaction. The app was faced with a lot of problems like user confusion, and uncompleted user tasks that caused a high uninstall rate and high support referral rate. Every 5 out of 10 users who installed the app from Google play, uninstalled it after 1 month
Solution
The goal is to design a mobile application that helps people learn English with fun, every time and everywhere. And they can enjoy learning through attractive gamification, appealing UI, and good user experience design.
Challenges
- Mirroring UI design patterns for RTL language
- Weak speech recognition system from the development side
My Roles
UX researcher
UX designer
UI designer
Tools used
Google forms, Miro, Adobe XD, Adobe Photoshop, Skype, Draw.io, Microsoft Word
Project timeline
6 weeks. May — June 2020
Design process
1. DISCOVER
Interview with stakeholders
I gathered some data from the stakeholders about the brand, its vision and mission, competitors, their budget, schedule, and project goals.
Heuristic evaluation of the previous version
First things first. I made a heuristic evaluation to find out some problems. Since the first MVP didn’t have any UX/UI designer, and it was directly jumped from the idea to development, it was faced with a lot of issues.
- Visibility of system status
The user couldn’t know immediately where is s/he studying, and how much is remaining. Because the whole progress and the user’s situation are not visible. They choose a chapter, on the next page they’ll see lessons and now the chapters are not visible.
2. Match between system and the real world
In the real world, when a new student starts going to English class, there is a “placement test” that determines which level the student should go. But in such an app, the student had to choose it him/herself.
3. User control and freedom
The app gets the user’s name, family, and E-mail that are not necessary on this page. But it doesn’t have any skip or exit option.
4. Consistency and standards
The home page was not like other industry products and was not familiar with the users’ mental model.
5. Error prevention
When the user reaches here, s/he faces 2 ways to continue: start from the 1st level or start a custom level. The problem is that the user doesn’t know really in which level s/he belongs, and has the potential to make mistakes.
6. Recognition rather than recall
The app shows the learning roadmap once at the beginning, and the user has to recall it for the rest!
7. Flexibility and efficiency of use
The user needs to go a long way to reach the lessons (6 steps). Such a way is not efficient. We need a way to shortcut this path.
8. Aesthetic and minimalist design
The UI and visual design were not minimal and beautiful. It was so distracting for the user. The UI patterns were irrelevant, hard to understand and use, complicated, and inconsistent.
9. Help users recognize, diagnose, and recover from errors
The error didn’t help users properly. They can’t understand their mistakes and don’t repeat them next time.
10. Help and documentation
There’s no help, document, or other helpful guides to help the user realize how to work with the app, especially for the first time.
Usability testing of the previous version
The project was started early in the Covid-19 pandemic. So I had to do remote-testing. I selected 5 users to conduct a moderated remote-testing: 3 non-user most extreme English students and 2 already users. I started the sessions with these 2 statements:
- There are no true or false answers.
- I’m testing the app, not you.
The test started with 4 tasks:
Task 1: create an account.
Research question: How much efficient is the process of creating an account. Where do users get frustrated, and which pain points do they experience?
Scenario: You just installed the Funglish app from Google play. Please go forward and create an account.
Task 2: Start a lesson and finish it.
Research question: How easily users can find lessons and start them to finish.
Scenario: Imagine you’re trying to practice English with Funglish when you’re sitting on a bus.
Task 3: Listen to a piece of music with lyrics on Funglish Plus.
Research question: Where do the user frustrations and problems occur while using funglish plus?
Scenario: Imagine you’re sitting at home, trying to learn English through listening to music in Funglish app.
Task 4: Extend an expired account.
Research question: Does the user notified when his/her account gets expired? How easy to use is the extending an account process?
Scenario [In an expired account]: Start a lesson and go forward.
Some pain points and frustrations found in tests:
- Not all users like to share their names and genders in signup.
- The signup process is too long. The pages like ‘getting users’ interests’ are not necessary and could be in another place.
- The learning roadmap is too complicated. No user understands what it is.
- This app doesn’t have any placement. Users get confused when choosing their levels.
- Users want to be able to skip questions with sound. Because they might be in an unsuitable situation.
- Lessons have a long guiding video at the first! It’s really unpleasant for users.
- The music lyrics are written in the caption. Users cannot understand where the artist is singing.
- It’s not possible to see a word’s meaning.
- When your account gets expired, nothing happens! No modal, no notification, no indicator.
- The pricing plans confuse the users.
User survey
I conducted a survey, asking users multiple-choice questions to understand their overall view of the app. Here are some results:
Qualitative interview with users
I conducted user interviews with 5 extreme users. I wanted to know deeper about the reasons behind their habits, frustrations, experiences, and behaviors. I prepared some open-ended questions and conducted the interview with the ‘5 whys’ and the ‘following questions’ methods. These are some questions I asked them:
- Tell me about the last time you tried to make a habit. What happened?
- Where is the hardest part of learning English?
- Can you explain your feeling after reaching a milestone in learning English?
- Which obstacles prevented you from reaching your goals?
- If you ever went into an English class, what are the differences between classes and applications for you?
- Can you tell me about the last time you gave up learning English?
- Can you describe your relationship with Funglish plus?
2. DEFINE AND ANALYSIS
Thematic analysis and affinity diagram
After conducting research, I did the thematic analysis. For analyzing the interview, I wrote all the sessions down and highlighted important parts. Then shaped the user persona and empathy map.
User persona
Competitive analysis
I made a competitive analysis between Funglish, local competitors and global competitors. I put the biggest competitor next to Funglish in the table.
Funglish has to think about basic features like a progress tracker, reminder, placement, dictionary, and guest user. It needs to improve its gamification (for better retention and customer satisfaction) and onboarding (for improving 1st impression). The educational supplement is a good value proposition, and it can be a differentiator compared to competitors.
3. IDEATE
It’s time to ideate and create the app structure.
Information architecture
User flow
The app has multiple flows for different journeys. Here we are looking at the Sign-up / Login user flows.
At first, I just made a simple login/signup flow. But after a lot of iterations, I realized that I need to merge some flows like subscription, placement, and complete profile with the login/signup flow, in a way that it doesn’t become so long.
In addition, I put the “guest user” for testing. Then I made an A/B test and realized that it doesn’t work for this product. The users who used the app as guest, were 50% less likely to buy subscriptions.
UX writing
The Funglish brand tone of voice is very fun, casual, and friendly. So I used more casual UX writing for this product. e.g. instead of the “Sign up” copy, I used “Let’s go”.
Gamification
The most interesting part of this project for me was the gamification approach. Gamification helps users enjoy the product more, and it increases the rate of retention. I used gamification mechanics as a tool to increase desirability and help users learn better.
At the first, I allowed users to upload their own pictures. But in the previous version, the upload rate was very slight. So I decided to use avatars. It’s more pleasing and easy to use (no upload needed).
Chain answering
Every quiz (episode) has 12 questions and 100 FS (Funglish Score). You need to answer all of them to pass the quiz. But if you fail to answer any question, you will be asked again to get the true answer. Chain answering says that if you answer 4 questions continuous, you’ll get 10 more scores. So if you answer all 12 questions correctly the first time, you’ll get 130 FS instead of 100 FS.
4. DESIGN
It’s time to visualize the research results. The best way to start is to sketch and make a lot of iterations through wireframes. Then I moved to Hi-fi wireframes and pixel-perfect UI.
Wireframing: Low and high fidelity to pixel-perfect UI
UI design
For designing UI, you’ll need a design system or at least a UI kit. I first made visual guidelines like colors, typography, and elevations. Then it was the time to create basic atoms like buttons and text fields. After these basic components got ready, I started designing complex components. But complex components will get completed through the design process, not at the first.
5. VALIDATION
Usability testing
I selected 5 users to conduct a moderated remote-testing again. In this usability testing, I was mostly focused on overall problems and user confusion in the app.
Some findings:
- Users were wrong about “seasons” titles. e.g. the title was “Friends” with an icon representing friendship, but users thought you can connect with your friends.
- Switching between levels was like this: If you saw your level was hard or easy, you could go to the levels page and request for level change. Then the support team would do it for you. tests showed this journey is so hard for users. So I changed it to automatic level mismatch detection.
- Users were not aware of how to use their “Golds”. So it needed a tooltip and tutorial to guide them.
Challenges
RTL language design challenge
Persian is like Arabic. Same alphabet and same direction. So a lot of UI patterns needed to get adapted with RTL direction. At the first, I designed the app in LTR, but when I faced the problems, I changed my approach to RTL. I wrote my learnings in this article.
Weak speech recognition system from the development side
It was a problem that is not related to design but affects it. So I had to consider a way to design better. I told the content management team to reduce the number of “sound detection needed” questions. And told the devs that do not to be restricted on “sound detection needed” questions. If users failed to answer it, just ignore it.
What’s next?
The startup managed to convince one of the biggest Iranian investors, to invest in it. When the investment steps are taken, I will start my role as a product designer. I will cover marketing aspects, as well as UX/UI design.
