2021

Involving User Feedback to Empower Design Iterations

My role

UX design
User research
Cross-functional communication

The team

1 UX designer
1 product manager
6 engineers

Achievements

Design solutions reduce the number of platforms providing essential information from 3 to 1. The launched product successfully attracted 1 non-profit mental health organization and 2 key opinion leaders in field of holistic education to publish their course content using the new SaaS platform.

About the company

MutualUp (MU) is a seed-round edtech startup dedicated to holistic online education. As the first company in the industry to focus exclusively on a comprehensive approach to learning, MU integrates academic, emotional, and social development into its curriculum development philosophy. This foundation enables MU to create courses and build a distinguished teaching faculty team.

The problems

Misalignment between company website goals and user needs

MutualUp had an old website primarily served marketing purposes. As the team wanted to use the website to host their course catalog and provide online course videos, they found out that the old design couldn't support essential user activities, leading to a lot of confusion and wasted time.

Confusing user flow due to scattered information

Through conversations with MutualUp stakeholders and attempts to access their main online course information, I discovered that MutualUp’s information and essential course activities were scattered across multiple platforms: Zoom, WeChat, email, and Google Drive. This highlighted a pressing need for a unified platform to connect everything.

Final design solutions


New landing page design to fulfill the goals of students and the company


Organize teachers' tasks by a new dashboard

The design process


Define the key users for the 1st MVP

I spoke to the the MU curriculum team leads to put me into learning chat groups, where I was able to observe users and connect with some of them. My encounters with the users helped me nail down on two key personas.


Design, align, and launch

With a better understanding of the different types of users, I proceeded with the design phase. Several design iterations were presented to MU’s stakeholders, the PM, and engineers. Below is the final design for the initial MVP launch following alignment.

Feedback after the 1st launch

After the first launch, we gathered feedback from users and internal employees. The following design issues and feedback stood out as we reviewed our progress together.

Refine design after validating assumptions and resolving opinion conflicts

Feedback revealed that design issues stemmed from assumptions and areas where opinions were not fully aligned or clarified.

Key feedback 1
"I feel unsure about what to enter in the search bar..."

Initially, I assumed that the search function was a crucial feature and thus deserved a prominent location, such as the hero. However, since this is the first time many users encounter the website and start adjusting to finding information here, they are often unsure about the keywords to enter and sometimes draw a blank.

Key feedback 2
"The section for featured courses appear empty."

The initial design aimed to balance realistic business constraints. Although the curriculum team wanted subject categories on the website, the limited number of launched courses made this impractical. The design was not successful because goals and strategies were not fully aligned.

Iteration process

To generate design improvement ideas, I compared MU with competitor eLearning products and examined the user feedback list for more details.

The new landing page experience

Scattered tasks unified by the educator dashboard

Due to engineering constraints and short on hands, the first MVP did not tackle the issues that exist in the new teacher's application process. Post the first launch, I went through tasks that new teachers would have to finish as they sign up with MU and created a vision design. My exploration of pain points and potential design solutions started with visualizing teachers' working process using user journey mapping.

Design iteration

With a clearer understanding of the solutions to address teachers' needs, I developed a user flow based on the teachers' task model for applying and creating their courses. I then proceeded to design iterations, embracing the messy and iterative nature of the process.

High-fidelity design

Teacher signup

👆🏼 Click images to enlarge

Educator's dashboard

👆🏼 Click images to enlarge

Visual style guide

Next step & reflection

Test to uncover potential issues of educator's dashboard design

The next step involves testing the educators' dashboard, with a particular focus on the curriculum editing interface. A key area of testing will be determining whether teachers can easily locate where their content is saved after making edits. Additionally, I will explore what teachers expect to do during the pre-launch review phase of their courses, to ensure the dashboard meets their needs and provides clear guidance throughout this crucial period.

Research feedback is helpful for team alignment

Initially, stakeholders and engineers viewed research as a progress blocker. They were concerned that research insights might quickly become outdated in our fast-changing startup environment or that it would take too much time and hinder the speed of design delivery. However, through our iterative process, the team learned that research feedback is crucial for addressing misalignments in the product.