top of page
Frame 333.png


Mystery ) is an online education platform that provides video science lessons targeted at students below K-6. Widely utilized across the United States, it is a popular supplemental resource, with over 30% of schools actively incorporating its materials into their curriculum. On average, teachers in one out of every three schools in the country utilize Mystery Science to enhance science education.

mystery-science-social-share 1.webp


2022. Aug

4 weeks 


Figma, Survey Monkey, 

Facebook Insider, Miro

​My Role

Owned in its entirety project

The Project

Web Design

Intern Project

Project Context

The Problem

Although MS is doing everything to improve user experience, from previous interviews, we found that some teachers mentioned finishing MS lessons at a certain time was difficult. Thus, I was tasked to explore the underlying reasons and identified solutions.

The Business Goal

The project aims to make teachers feel they are a comprehensive teaching resource and eventually increase the lessons usage across the platform.

The Solution

I developed a vocabulary card template to visually represent terms, enhancing interactive teaching.

Big Shoes Hero.webp

First, get familiar with the world of science teachers!

I have NO EXPERIENCE joining science classes, therefore, I set out to learn as much as possible about the science teachers' world with a few research goals in mind:

  • What is the current experience for teachers on MS like?

  • How do they use and evaluate an MS lesson? 

  • What challenges do teachers have?...

I heard from the teachers!

I interviewed 8 science teachers and inquired about their challenges while using MS lessons, I delved into the specific processes of using an MS lesson in a class, how they prepared for an MS lesson and how they matched MS lessons with their curriculum. I gained 4 insights from the interviews as follows. 

Group 4220.webp

What about new teachers...?

The average working experience of my interviewee was 7 years. To determine the impact scope and test my hypothesis, I surveyed six teachers with less than 3 years of working experience to see if they felt more trapped by these issues. The result overlapped with the interview findings and verified my assumption that new teachers need more help teaching vocabulary due to inexperience.

Survey findings

Group 4276.webp

Kids are the end users !

The teacher's ultimate goal in spending extra time on vocab teaching is to deepen kids' understanding. Therefore, I needed to understand the most efficient way to learn vocab from the teachers' view. I read through online resources and summarized 3 key findings that help kids learn vocab more efficiently.

Group 4274.webp
  • Teachers advocate interactive teaching since it would improve kids' memory of the term

  • Reviewing is crucial because it can be hard to retain vocabulary if they don't get many opportunities to use it

  • Graphic versions can be beneficial for kids to understand and memorize

Lastly, I analyzed the market for vocab teaching!

I wondered how other mainstream education platforms offer vocab support for teachers, so I conducted investigative research to analyze what was working, what wasn't and what I could learn. I chose four supplement resources teachers mentioned often. 

Group 4253.webp

Aha! Key design opportunities started to arise.

Group 2609114.webp


"Why don't we we help teachers make vocabulary teaching more efficient, so they could finish teaching in a certain time? Which would eventually increase the lessons usage across the platform!"

Let's meet target users.

Based on previous research, I synthesized my target users’ characteristics and created a persona to help me put myself in their shoes of them. 

Frame 329.webp

Make my design philosophy to align with users' characteristics!

With users' characteristics in mind, I identified my design philosophy and used them as my brainstorming guiding principles before going to the design phase.

Group 316.webp

Brimming with ideas from all possible directions...

At this point, I was brimming with ideas, I listed them on my sketchpad and asked myself these questions:

  • Does it address the problem? 

  • What are the resources required vs. possible impact on success metrics?

  • Are there any operational pitfalls in it?

After picking up the top 3 ideas, I created hi-fi for each by using the existing design system and listed pros and cons as follows:

Idea1: An interactive vocab list-version 1 - Users upload and fill out vocab pictures and definitions



  • Teachers can do interactive teaching through hiding the pic​

  • Teachers can edit and add any vocab they think there’s a need to teach


  • Cost teacher’s too much time on editing cards

Idea2: An interactive vocab list-version 2 - MS offer vocab pictures and definitions but users are able to edit them



  • The editable default pictures and definitions make it flexible for teachers


  • We have to check with the content team since we might need picture and definition support from them

Idea3: Pre-assignment worksheet for kids

Pre-assignment worksheet.png


  • ​Teachers know exactly the words they are going to teach before the lesson starts

  • Teachers can estimate the time needed to teach the words and plan their lessons appropriately


  • It doesn’t work if kids don’t do pre-assignment

Some critical decisions have been made in a workshop...

I led a workshop with content and product design teams to discuss ideas. We addressed each idea's pros and cons and ultimately made some critical decisions during the workshop. 

Group 317.webp

Started card design explorations

To ensure the cards’ readability, I devised 5 different layout versions by re-ordering must-have elements. After that, I had a user testing session with 3 users to understand which type makes more sense for them and the reasons.

Group 2609115.webp

User evaluation feedback

  • Users preferred layout 3 for aesthetic reasons and fit the user's reading habits

  • Users expected to have pronunciation features so kids could match the term and pronunciation simultaneously



MS's brand new vocab teaching experience!

Group 4221.webp
Screen Recording 2024-03-04 at 11.20.23.gif


Visualizing vocabulary teaching

Visualizing the terms helps kids understand them much faster! Teachers can replace the picture using system-offered images or upload photos if they think kids won't like it, which keeps the high efficiency of vocabulary teaching!

Fig: replace the default pic
Screen Recording 2024-03-04 at 11.23.18.gif


Kids' friendly vocabulary teaching

The default definitions has been provided on the card back if clicking the flip button.
Teachers can rewrite the definition when prepping if they think it is not kid-friendly. It helps reduce the time it takes for kids to understand the term. 

Fig: changing the term's definitions
Screen Recording 2024-03-04 at 11.26.19.gif


Make it more flexible for teachers

If teachers feel there are more term to teach, they can create new cards on the template

Fig: Add a new term
Group 4221 (1).webp

So, what did users think?

After finishing the high-fidelity prototype, I had another round of usability testing with two users to understand their overall experiences through the flow. I received the feedback as follows:

Group 4272.webp

Project Impact 


The project research findings were presented to the company as a future business insights reference


I accelerated the process of offering vocabulary support


I influenced my co-workers' decisions and defined a new target audience

If I had had more time...

I would conduct a field trip to see how it works in science class, how kids react to the product, and their feedback to better support teachers' work! 

Through this project, I realized the importance of transpersonal thinking in communication. It helps to create a stronger bond and make conversations more effective. It is also vital to believe in yourself and remain confident in the face of challenges. This positive mindset is vital to my growth and success.

Reflection & Next Step

Next Projects

image 393.webp
image 394.webp
image 391.webp
bottom of page