Language Learning App - English Quest

Product | UX/UI

Language learners share many common concerns, particularly for those learning English as a second language, it is highly possible that they feel these challenges while learning: understanding spoken language, difficulty expressing themselves verbally, difficulty with grammar and sentence structure, and difficulty with reading and writing.

This educational mini-game immersive product - “English Quest” aims at assisting users to learn, practice and play in various conversational contexts and improve their English skills.

My role and responsibilities

As the UX/UI designer of English Quest, I participated in the product planning, user experience design and user interface design. I am grouped with the game designer and the English content expert to help them realize the goals in education and gamification. After iterated visual design, I delivered assets to corresponding programmers of each feature.


Finding Issues

Some issues were concluded from user feedback, usability tests and analytics data:
[ ] the drop out rate was higher than anticipated in the early exploration phase of the app
[ ] users feel lost due to the lack of the guidance
[ ] some features are underused or not touched by users


This portfolio piece is dedicated to demonstrate the workflow to locate and tackle the first insight about drop rate in the “first-five” period.

Locating Challenges

The “first five”, which summarizes the early stage of the app exploration experience caught our eyes, is when users build their connections with the app and reassure what they can get from the product. Users compare what they expect and what they see/feel.

From the scope of restructuring the early few minutes experience (the first-five), the connections between the product and users can be faster and more solid.

Making Changes

In the second round of iteration, we considered to treating users as learners instead of game players. Re-profiling out users may not be the easiest approach to solve the issues the team was facing, but doing so could redirect us making the early exploration more dedicated in English learning. So we decided to reduce game elements used in the interface and introduce a learning list that contains learning content on the main page.

The user scenario, when user make that decision to download and explore a potential English learning app, has helped the team realize the importance of early-stage connection built between the user and our product.

How did we get there (1/2)

Looking back at the user journey can help the iteration to focus on user’s needs and behaviour. Bearing in mind that users would always want to know where they are at, and expect to see more explain what circumstances they are situated. A featured page that displays implicit contents would help to close the gap between what users expect and what’s presented on the page.

Users match their expectations in searching phase and make connections with their demands during the first few minutes exploration of the product.

How did we get there (2/2)

Facing with limited resource, I had to dig into the project resource distribution to validate the scale of potential design changes. Inspired by the business value vs. complexity/effort quadrant, a user demand vs. team effort quadrant was depicted to track if the product serves enough feature to user demands. By running this quadrant, I had a clearer image of how much I should change the first-five flow and interface design.

Results

 

UX design takeaways

How to display game elements engagingly while considering user’s eye movements habit?

How to demonstrate game elements without bothering user’s eye movements habit, facing with the conditions: 2D art environment and the cost of changing the visual perspective.

There might be a better yet costly solution, and there’s a counter-clockwise approach:

let users to get “uncomfortable” with the habit to enhance the “nervous” and “excitement” gamification experience.

The main goal is to train vocabulary usage in the game, during which users should memorize and learn, meanwhile competitive racing was decided to be the way to present gamification.

Some English learners need to double/triple read the questions and the answers before give away the answers. Their eyes need to move up and down multiple times.

Some English learners need to double/triple read the questions and the answers before give away the answers. Their eyes need to move up and down multiple times.

Red area contains game visuals and elements that relate to the racing game.

Red area contains game visuals and elements that relate to the racing game.

During testings, we found that users might just ignore the game elements or told us that they didn’t even notice those colourful elements. Users want to win so badly, and they only want to fetch the useful information to solve the puzzle. This is a compromised solution with cost constraints, and it’s leaning to the product on the “Product - User” spectrum.

A smooth landing on an app is not as easy…

Before users start using an app, there’re pitfalls that can frustrate users and lead to exiting and uninstalling of the app. The landing period is key, because users will match their expectations with what they see and feel in such short period of time. The ~3 minutes experience is also a trust-building process. Things to consider:

  • Emphasize what the product is about.

  • Reassure users they download the correct app for they purpose they want

  • Input brand promises and welcoming messages.

  • Provide feedbacks constantly rather than let users wait for the endless waiting time.

  • Gather information while encouraging users to sign up.

The app production may not look like the roadmap

production roadmap