Better Chinese

Learn Chinese through stories for Elementary School

Product 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 especially from students. “I always forget my login information.” “Why can’t we use it on an iPad?” “The website is so static 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 site 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 the 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 for missing work (52.63%)
  4. Add homework report for the teacher (52.63%)
  5. Make the 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. An 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 these learnings, I built my user’s persona based on lots of interviews and conversations I had with students.

Assessing the current website

To empathize with users’ path and struggles, I started to assess the current website from a 1st grader’s perspective. I started from logging in, viewing this week’s homework, taking a lesson, viewing previous homework, filling out a homework log, and logging 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

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

• Logging in requires too much effort

In the 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 pieces of login information.

• Irrelevant and Distracting Information

The main page is about selling books and 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.

• In the lesson menu, students can't 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.

3. Engagement concerns

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

The UI is not interactive. For example, it only shows a vocabulary list, which is dry, boring, and unsuitable for younger students learning a new language.

Understand the Competition

While I was trying to understand my users and the current BetterChinese website, 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 websites are facing. Among the many competitors, I found three representatives: Khan Academy as the most popular teaching website, Duolingo as the top-rated language learning app, and ABCYa as an educational game platform for elementary school students.

Solution Discovery: Brainstorming with Students

So far, my objectives in re-designing BetterChinese website are 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, and color palette more friendly to elementary school students

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 a study report to visualize data and increase motivation
  6. Add a leader board so students can see their ranking and compete with peers
  7. Add more fun elements, like a virtual online store where students can spend panda coins to change their character and buy supplies.

Final Results




Logging in with a QR code



Course Details




Rewards Store

The Result

After finishing the prototype of the new BetterChinese iPad app, I invited students from 1st grade to 5th grade to do some user testing. They first completed 8 tasks like logging in, studying a lesson, playing a game, seeing their ranking, and changing their settings. 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


The BetterChinese redesign was a very meaningful project to me. Not only because it seeks to solve a legitimate problem that has existed for years, but I also 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 and humbly learn from my students, while also meeting the business requirements. Keeping my users at heart while also design with a larger picture in mind are the most valuable lessons I learned in doing this project.

All my projects