Xeropan

Redesigning a language learning app with simplified and consistent UI and new elements to better motivate users.
education
UX/UI Design and research
mobile
6 months

During the collaboration with Xeropan, we detected the main issues with the UI and some of the UX. At the second phase, through design iterations and constant testing, we found the right direction for the full redesign. At the last step, we successfully created the new UI, a simplified and consistent visual language, as well as new elements to motivate users.

Phase1
Discovery

Our researcher conducted tests and interviews to find the roots of our client’s issues. The testers were asked to look for the app in the app store, download it, and start using it. During the process, they shared their thoughts. They were also asked to explain what difference they saw between the free and premium plans, and what helped them decide to pay for this or a similar app in the past.

Team
1 Researcher
Techniques
User interviews
Research findings
  • The app looks as if it was designed for children.
  • Because of the childish design, the testers believed that the content wouldn’t be satisfying for other age groups.
  • When interacting with the product, users loved the exercises, describing them as fun and a useful way to learn English.
  • The segment of users that are more willing to pay are young adults who need to learn English for traveling or professional purposes.
  • The difference between the free and premium plans should be emphasized more.

Comments regarding the childish look and feel completely disappeared since the release of the new design.

Attila AlGharawi
Co-Founder & CEO
Phase2
Design iterations

Our team of one designer and one researcher started the redesign process with a one-month ideation phase backed up with preference tests.

Main issues to work on (as explored in the discovery phase)
  • The too powerful presence of the main character, Professor Max.
Why work on this? The character can confuse the potential users.
  • Very colorful and childish design.
Why work on this? The app is not aimed at children.
  • Children’s tale-like storyline.
Why work on this? A too detailed storyline can make users believe that the lessons are not serious enough.
We wanted to receive answers to three main questions from our testers

What kind of app is this?
Who the target audience of the app?
What impressions did the screens give you?

Team
1 Researcher
1 Designer
Techniques
Preference Test
Five Second Testing
1st iteration: with a younger professor
Main changes
  • Professor Max became younger.
  • We removed some of the island elements as it made navigation confusing.
  • A connecting line guides the users’ eyes to be able to navigate between lessons more easily.
Conclusion from this iteration

The users still found the app childish, but the estimated age of the target audience got a bit higher.

2nd iteration: without the story
Main changes
  • Professor Max lost his cloak to look more like a teacher.
  • We removed the whole concept of the island and time travel but kept the colors and style of the original interface.
Conclusion from this iteration

The estimated age of the target audience got older, but the purpose of the app became confusing. The businessman look of the main character made testers believe that this was an app for professionals.

3rd iteration: full redesign with the story

With enough feedback on different ideas, we were able to start the full redesign.

Main changes
  • We brought back the storyline, but with a more clean design.
  • We changed the professor to an explorer character to fit the story better.
Feedback

Most of the testers said they thought this was an app for language learning for all ages. They said the design felt friendly, clean, and calm.

Phase3
Full redesign

With the right direction for the full redesign, we agreed on a 3-month-long collaboration.

  • Simplified illustrations: A friendly, spacious, and calming scene using metaphors, a simple color palette, and lots of negative space.
  • Changed the layout from horizontal to vertical. With an auto-scroll element, the app always shows you where to continue.
  • Detailed topic cards where users can see their progress.
  • Color schemes help to guide visually. We emphasized the difference between the levels with colors.
Team
1 Researcher
1 Designer
Techniques
Usability testing
Design iterations

It took us some months to reach and exceed the download numbers we had in the spring. However, we do see a 3% progress in the Day 1 retention numbers and a 5% decrease in trial cancellations on iOS platforms.

Attila AlGharawi
Co-Founder & CEO