Parents English

Redesign mobile website and desktop landing page to allow users to navigate the services more efficiently.

Visit Parents English website at: www.parentsenglish.com

Re-imagining bilingual family education

Redesign Website:

Duration

80 hours within 4 weeks

Role

UI/UX Designer and Researcher

Before diving into the flow…

Parents English is an edtech startup company based in China. Founded by a Chinese mom with the experience of studying and working abroad, Parents English is dedicated to help Chinese parents with 0-6 year olds to create a bilingual environment at home and help their child learn English and Chinese at the same time.

This project is a redesign of the mobile and desktop website to help users navigate the website and locate different services more smoothly. Since most of the company’s services are hosted on Wechat, this project focuses on the redesign of the mobile interface. A desktop homepage is designed to be responsive with the mobile interface.

Process:

User research, End-to-end UI/UX Design, Wireframing, Prototyping, Usability Testing, Iteration

Tools:

Figma, Adobe Illustrator, Google Docs, Google Sheets, WeChat, Zoom

Feature Preview

Introducing Parents English

A comprehensive family bilingual education guide for you and your child. Creating an authentic bilingual environment for your child through precious bonding time.

Simple and clear panel for easy access to all your resources

All the features organized in WeChat based mobile website. Navigating services made easy for long term and new users.

Quickly find the best courses for your family’s need

Easy access to all the courses. Simply take a free trial lesson and subscribe to your favorite course with ease.

Save your favorite lesson and listen to it on the go

Upgraded lesson detail page. Listen to audio for individual sentences or auto-play the whole lesson. Jump back in your favorite lesson any time.

Ready to dive into the flow? Let’s do it!

Tips: click on the steps to jump to the sections

The Design Thinking Process

Solving problems creatively with a user-centered approach

Research

Meeting with Client

To kick start this project I had a meeting with my client to discuss her main goals and needs for this project. Over the years, the company has launched many new features. Although most of their services are hosted on Wechat, there are different portals to access different services, including the Wechat official account, mobile website, and mini programs, which makes navigation complicated and confusing. The main purpose of this redesign is to make the mobile website a centralized portal to organize all the main services and make it more intuitive and convenient to locate and access different services.

Research Goals

In order to improve the overall user experience, it is important to learn the competitor websites’ features and the users’ needs. Learning about competitors will help me understand the strengths and weaknesses of Parents English platform compared with other businesses. Understanding the users will help me paint a clearer picture of what features I should include to provide a seamless experience.

Understanding the Competitors

To understand the competitors, I selected 4 companies in the early language education field to conduct competitive analysis. I examined both the UI designs and user experiences of these companies. Although most of their services are based on their Apps instead of website, this analysis gave me inspirations on both the UI and UX of my mobile website design.

Understanding the Users

I sent out surveys to Parents English users to learn about their learning habits and current experience using Parents English platform to find out how I can improve their learning experience and cater to their needs.

Topics covered in the survey questions include:

  • Users Bio

  • Users’ child Bio

  • Learning habits and daily routine

  • Current experience using Parents English platform

  • Suggestions for improvements

Key Research Insights

39 responses were collected from the users. The key research insights are as follow:

Quantitative Research Insights:

  • Over 90% of users are female

  • Over 90% of users are between 25-44 years old

  • Over 80% of users’ kids are between 1-5 years old

  • Over 97% of users view content on their phone

  • Users find the most useful services are articles, daily vocabularies, and parent-child English lessons

  • More than 70% of users spend less than 30 minutes per day viewing contents on Parents English

Qualitative Research Insights for Potential Improvements

I included an open-ended question at the end of the survey asking the users what features or improvement they wish to have. Here are the top answers:

Easier access to the lessons

Better categories of articles

Auto-play between different lessons

Define

User Persona

As I analyze my research data, a clear image of the primary user persona emerged from the survey results:

Meet Xiaohui, a 31 years old mom with a 2 years old daughter based in Shanghai, China. She has been using Parents English to learn childcare knowledge and help her daughter develop English skills.

Ideate

Sitemap

With the users and my client’s needs defined, I started the ideation process by designing the sitemap for the desktop and mobile website. There are some slight differences in the website structure for desktop and mobile because of the different purposes and functions of the two interfaces. The user research result shows that more than 97% of users view contents on their phone. Therefore, the mobile website design emphasizes on optimizing the learning experiences, including reading articles and taking courses. Whereas the desktop website emphasizes on marketing purposes, where About Us was included in the main navigation which demonstrated the philosophy and services of the company.

Desktop Sitemap

Mobile Sitemap

User Flow

After discussing with my client, we decided to focus on optimizing the process of taking courses on mobile website. To find all the paths users can take to buy and learn a course and all the screens needed to complete the task, I created a user flow for buying a course based on the mobile sitemap. In this user flow, users can access the courses through either the navigation of Learning Courses or Read Articles.

Design

Mid-Fi Wireframes

I skipped the low-fi wireframes and started with mid-fi in this project because it’s more presentable and easier for my client to understand my design. I designed the responsive homepage for both mobile and desktop. Since the redesign focuses on the learning experience on the mobile website, I also created pages in the navigation and the whole task flow for “Learn Courses” for the mobile website. The mid-fi prototype was created in Chinese for the convenience of communication with my client.

UI Component library

My idea for the UI design was based on the style of the logo provided by my client. I used the purple and blue color from the logo as the primary color in my color palette for consistency of branding. I chose a bright rose color as a highlight to create a warm and welcoming look, and make the CTA buttons more eye-catching. I used a light blue color for the background to compliment the primary color. Since the website is pretty content heavy with lots of reading materials, the light blue background also calms the eyes and mind which helps users focus on  their learning.

High-Fi Wireframes and Prototype

I created the high-fidelity wireframes for the mobile and desktop homepage. Since this is a mobile-first project, I created four main navigation pages, personal account page, and the navigation menu page for mobile. Upon my clients request to improve the user experience for taking courses, I also created pages for the user flow of exploring courses for mobile. Since the website support both English and Chinese, the high-fidelity wireframes were created in both languages.

Desktop Homepage in English and Chinese Mode

Before Redesign

After Redesign

Mobile Interface in English Mode

Mobile Interface in Chinese Mode

User Pain Points Addressed In Redesign

Better Categories of Articles

Before

After

Easier Access to Lessons

Before

After

Auto-play Between Different Lessons

Before

After

Test

Usability Testing

I created an unmoderated usability test with Maze and tested with 9 participants for this project. 4 users did the test with their phone, 5 users did it with their laptop. Users were asked to do the following 5 tasks with the mobile prototype:

  1. Explore Daily Dialogues

  2. Explore Courses

  3. Explore Books & Cartoons

  4. Check My Account

  5. Take A Free Trial from Parent-Child Course Chapter 1 Lesson 1.1

Among the 5 tasks, task 2 to 4 have higher success rate compared to task 1 and 5. Feedback from users indicates that when they just started the test some of them need some time to understand the task and layout of the interface, which resulted in misclicks in the task 1. Once users fully understand the tasks they find the following tasks relatives easy to complete. Task 5 has a lower success rate due to the task require more steps and there are different paths users can take to complete the task.

Priority Iterations

The usability test result helped me identify some issues to iterate on to improve user experience. After discussed with my client, we decided to move forward with the following iterations:

Iteration 1

According to feedback from the usability test, the size of the touch point could possibly lead to mis-click which might be the reason of the low success rate of task 5. Therefore, I made an iteration to increase the size of the “Play Audio” and “Go to Lesson” icon to make the touch target more clickable.

Version 1

Version 2

Iteration 2

Feedback from users shows that it would be useful to add an “Play Audio“ button at the bottom bar on the lesson detail page so that users can control the audio without scrolling all the way back to the top. So I added a “Play Audio” button in version 2. After meeting with my client, we decided to add a “Bookmark Lesson” Icon in version 3 so that users can save lessons. Also the design of the “Play Audio” icon was changed from solid to linear to match with the bookmark icon.

Version 1

Version 2

Version 3

My Takeaways

  • Learn to compromise

    Working with parents in English taught me the importance of compromise as a designer. Balancing design principles and the client's preferences, I aimed for a functional and appealing design that satisfied both parties.

  • Research comes first

    Prioritizing user research, I persuaded the client to adopt my design based on findings during the ideation stage. Defending my design with data proved valuable in this experience.

  • Next steps 

    This case study focused on main pages and the task flow for mobile course enrollment. Future steps involve creating additional task flows and pages for a comprehensive mobile user experience, incorporating feedback from stakeholders and developers.