๐ŸŽ“

English Learning App Redesign Challenge

Timeframe
4 months (Apr - Jul 2022) / Part-time
My role
User Research
UX
UI
Tools
Mural
LucidChart
Balsamiq
Adobe XD
Cooperation
Team of one
Outcome
Wireframe, Prototype
Platform
iOS
Android
Cover
3.png
ย 
ย 
ย 
I am a language lover interested in designing language learning apps. I was curious about apps that use movies and clips as study material. While searching for a language app to redesign, I came across Ejoy.
Ejoy is an English learning platform where users can practice listening/speaking and expand their vocabulary/grammar by watching their favorite Youtube videos and playing related games.
The customized videos and gamification in Ejoy keep users engaged and motivated.
Following the app's Facebook community, I realize that many users need constant support in getting on board and using different features in the app. Since the CS team on Facebook is often slow and inadequate in supporting the users, I believe that redesigning the app will solve this problem.
ย 
At a glance, the app has several issues regarding many aspects. As the Double Diamond design model helps me pinpoint and focus on finding the solution for the most critical issues, I decided to choose this model for this challenge.
ย 
Discover > Define > Develop
ย 
(Since this is an individual UX project, I wonโ€™t be able to conduct the Deliver phase)

ย 
ย 
ย 
ย 
๐Ÿ’ฌ
FEEDBACK FROM FACEBOOK COMMUNITY
To determine the most repeated and urgent problems users experience, I collected users' comments, captures, and questions regarding how to use the app on Facebook from 01/01/2022 to 28/02/2022.
ย 
notion image
The most repeated issues include:
โ€ข
Trouble logging into the app
โ€ข
Unable to understand how the app works, especially how to start using the app (the CS team delivers instruction videos and guideline packages for new users via Facebook)
โ€ข
For beginner learners, the video speed is too fast, and the games are too complicated
ย 
๐Ÿ—ฃ
INTERVIEW & USABILITY TEST
I noticed from the Facebook community data that most users who need customer support are beginners or low-intermediate learners.
I wanted to understand their behaviors while using the app to see what makes it harder for them compared to more advanced learners.
To do so, I contacted beginner and intermediate users from the Facebook community to conduct quick chats, audio interviews, and usability tests.
ย 
notion image
notion image
notion image
ย 
Here are the recurrent user comments:
notion image
๐Ÿ“
COMPETITIVE BENCHMARKING
The data I collected from the usability tests and interviews showed that users with limited English skill and experience using apps to learn English struggle to navigate and use the app features.
I then decided to conduct competitive benchmarking on five applications (Lingopie, Cake, English by Videos, MovEng, and EngTube) to learn the best practices regarding the onboarding process and IA.
ย 
notion image
ย 
Here is the summary of what I found:
ย 
notion image
ย 

ย 
ย 

DEFINE

ย 
ย 
๐Ÿ“
AFFINITY DIAGRAM
By now, I have decided to work on the onboarding and homepage structure of the app.
The affinity diagram helps me organize all points regarding the two themes and sort out which elements I should delete from the existing design.
ย 
notion image
<View full Affinity diagram here>
ย 
ย 
๐Ÿ™†๐Ÿฝโ€โ™€๏ธ
PERSONA
Finally, I created two personas based on my research data to determine the style and mood of the redesigned version.
Though these two personas have differences in age, occupation, English level, and learning purpose, both prefer a convenient, simple, and time-effective app.
notion image
notion image
ย 

ย 

DEVELOP

ย 
ย 
For the redesign, I focus on the lack of guidance and the unclear structure of the app; and target learners with limited English skills. Specifically, to help users get started and navigate the app, I decided to redesign:
โ€ข
the onboarding process,
โ€ข
the structure of the home screen, and
โ€ข
the game options according to each English level
ย 
notion image
ย 
ย 
๐Ÿ“
WIREFRAME
I started the design process by sketching on Balsamiq and iterating three times to delete unnecessary elements and make each function easy to understand.
I realized from the Facebook community feedback that users don't read and remember instructions all at once. They look for support when they keep encountering errors and can't find a way out. As a result, for the video mode, I showed the essential buttons on the screen and labeled them with self-explanatory names.
ย 
notion image
ย 
๐Ÿ•น๏ธ
PROTOTYPE
ย 
notion image
ย 
notion image
This prototype is not final as I'm changing some elements and micro interactions on each screen while testing it out on some new users.
The prototype testing and iteration process is challenging since the prototype does not have actual interactions with Youtube, and the contents are dummy data. I focused on how users behaved and navigated through the app to finish their two tasks: (1) navigating the homepage and (2) select different games to play.
ย 

๐ŸงจFocus on what is urgent: When there was plenty to fix and improve, I found in-depth interviews and usability tests very helpful in understanding the users' biggest goals and needs to determine what to work on first.
โ™ŸEmphasize visual hierarchy and apply mobile best practices: Designing on small mobile screens, I learned to prioritize content while ensuring all controls are big enough, with the most frequently used ones closer to the users' thumbs.