Better Chinese

Learn Chinese through stories for Elementary School

Proudct Design | iPad App

The Problems

Having used Betterchinese for elementary school students for three years as a public school teacher, I have heard numerous complaints about the website from colleagues, parents, and mostly from students. “I always forget my login information.” “Why can’t we use it on an iPad?” “The website is so passive and boring.” “I can’t see the homework history.” “The navigation process is so confusing.” As a result, I decided to redesign the Betterchinese web for my students on an iPad medium to make it fun, intuitive, and engaging.

Get to know the users – Survey and Personas

Having been a teacher for four years, I am always confident that I know my kids very well. However, after I delivered the survey, it turned out that I didn’t get all answers right: Top 3 Frustrations in using BetterChinese:

  1. Can’t see homework history (74%);
  2. Login to account is confusing and complicated (53%);
  3. Keep forgetting homework (47%);

Top 5 Expectations for BetterChinese:

  1. Remind me to do my Homework (84.21%)
  2. More games and more fun (73.68%)
  3. Add homework history so I can make up missing work (52.63%)
  4. Add homework report to the teacher (52.63%)
  5. Make Login process easier (47.37%)

It is true that “I am not the user” and “people don’t always use the product the way I imagined them to.” A designer should never assume users would do the same or think the same as him or herself. Expert’s view might help, but it could be biased, insufficient or misleading. I learned that correct UI decisions should be based on research and data.

With this learning, I built my user’s persona based on lots of interviews and conversations I had with the students.

Assessing the current website

To empathize users’ path and struggles, I started to assess the current website from a 1st grader’s perspective. I started from logging in, view this week’s homework, take a lesson, view previous homework, fill out a homework log, and log out. I took on a 6 year old’s lenses, and tried to carefully capture the possible obstacles. And they were recorded as below:

1. Login issues

• Important Information is Hidden

Login in button is hidden under “My Lessons” rather than “My account”, which makes it almost impossible for first-time users to find, not to mention a 6 or 7-year-old.

• Confusing Login channel

Students, parents, teachers are all using the same login channel, which is confusing to all. It is also unnecessary to have students exposed to so many advertisements.

• Complicated School Account and Personal Account

Login in includes personal account and school account; the switch between the two is very confusing.

• Logging in requires to much effort

In school account, all students need to enter class ID, user ID, and password. With so much typing, many students and parents find it challenging to remember three logging in information.

• Irrelevant and distractive Information

Main page is about selling its books, courses, which is not directly relevant to the majority of the students. Through the survey, none of the 20 participants were aware of the contents on the main page. This is a typical example of banner blindness.

2. Navigation issues

• Homework history is missing.

• For the lesson menu, students can only see the lesson numbers until they hover the mouse over the lesson number.

• Many sub-menu buttons are in Chinese, which is impossible for non-heritage students or parents to read or guide.

3. Engagement concerns

The stories and animations are very fun to watch. However, there are no educational games for students to play while learning.

UI is not interactive. For example, it only shows a vocabulary list, which is dry, boring, and unsuitable for younger students to learn a world language.

Understand the Competition

While I was trying to understand my users and the current website and needs, I believe it is also very important to know what my competitors are doing, especially the solutions they come up with to solve the common problems that all online education webs are facing. Among the many competitors, I found three representatives: Khan Academy as the most popular subject contents teaching web, Duolingo as the top-rated language learning app, and ABCYa as an educational game platform for elementary school students.

I also researched and tried out many direct Chinese online learning competitors like… I learned that Chinese online learning website or application is still a new area. Among many applications and websites, BetterChinese still has big opportunities for its rich contents and market share. However, many new language learning websites like Duolingo, Mango, could also become potential strong competitors for its engaging UI/UX design, gamification, sound effects, social features, well-designed contents, etc. So the redesign of BetterChinese should focus on improving its user experiences, and make it fun, engaging, and interactive.

Solution Discovery: Brainstorm with Students

So far, my objectives in re-designing BetterChinese website is to make the website more fun, engaging, and easier for elementary school students. The focuses are prioritized as below:

  1. Simplify the Login process
  2. Add homework history
  3. Add game elements to the website; gamify learning, drilling, and even the assessment sections
  4. Make the style, layout, color palette more elementary students friendly

My new key takeaways from students’ input are:

  1. Quantify and visualize learning tasks as well as their efforts
  2. Use low-learning curve games to replace vocabulary study and grammar drilling
  3. Allow students to form an online learning community

The Solution

Based on lots of students’ feedback and input, as well as competitor analysis, I mainly applied the following solutions in the new iPad design:

  1. Simplify the login system
  2. Add homework history
  3. Use educational games to replace the dry and repetitive vocabulary and grammar drilling
  4. Use panda coins to quantify efforts and progress
  5. Use study report to visualize data and increase motivation
  6. Add leader board so students can see their ranking and compete with peers
  7. Add more fun elements, like virtual online store where students can spend panda coins to change the character, buy supplies.

Final Results

IA

Sketch

Visual

Log In with QR code

Homework

Learn

Course Details

Vocabulary

Games

Report

Rewards Store

The Result

After finishing the prototype of the new BetterChinese iPad, I invited students from 1st grade to 5th grade in my user testing. They first completed 8 tasks like login, study a lesson, play a game, see their ranking, change the setting, etc. Then they were asked to complete a system usability scale survey. Students compared the original website and the new website: Result pictures from old portfolio sketch.

User testing results

Conclusion

BetterChinese redesign is a passionate and meaningful project to me. Not only because it seeks to solve legitimate problems existed for years, but also I redesigned it with lots of love to my students. Seeing students like the new website is really encouraging to me as a designer. In this process, I have learned to abandon my bias, humbly learn from my students, while also meet the business requirements. Keeping my users at heart while also design with a large picture in mind are the most valuable lessons I learned in doing this project.

All my projects