Learn Chinese through stories for Elementary School
Product Design | iPad App
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:
Top 5 Expectations for BetterChinese:
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:
My new key takeaways from students’ input are:
Based on lots of students’ feedback and input, as well as competitor analysis, I mainly applied the following solutions in the new iPad design:
Logging in with a QR code
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