How to Make Taiwanese Beef Noodle Soup?

Tools Used

Articulate Storyline 360, Adobe XD, Photoshop, Canva, Powerpoint.

Targeted Learners

Foodies who want to learn how to make Taiwanese beef noodle soup.

Learning Goals

After completing the course, the learner can make Taiwanese beef noodle soup using the required ingredients and following the essential steps, while demonstrating knowledge about gluten-free and low-carb substitutions.

Design Ideas

Taiwanese beef noodle soup can be a difficult dish to make. When designing this course, my goal was to present complex information about the ingredients and steps in an elegant and memorable way.

To ease the learner into the learning process, I chose a homey color combination inspired by the colors of the spices used in the recipe. The colors are soothing but do not lack contrast, given that I wanted color-blind learners to be able to navigate the course without difficulty.

In addition, I included a mentor, Ama (meaning "grandmother" in Taiwanese), to guide the learner and add a personable touch to this course.

This course brings together my passion for elegant design, colors, and my desire to include learners of different needs.

Design & Development Process

I followed the Successive Approximation Model (SAM) to help me manage the design and development process. I chose SAM instead of ADDIE (Analyze, Design, Develop, Implement, and Evaluate) because I wanted this project to speak to the needs of different learners, including

  1. those who are color-blind,

  2. those who eat low-carb or gluten-free

  3. those who know little about Taiwanese beef noodle soup, and

  4. those who want to see themselves or their cultural cuisine represented.

The accessible and inclusive nature of this project means that it needs to go through multiple reviews and iterations before it can be implemented. The cyclical nature of the design and development process made SAM an intuitive choice for me.


Given my obsession with content organization and communication, I relied on the storyboarding process to focus my content, show my stakeholders the flow of the course, and to quickly incorporate feedback and edits during the review process. Although the storyboard does not necessarily reflect the content included in the final product, it did streamline my design process and make the flow of the course intelligible to my stakeholders.

Storyboard-Beef Noodle Soup-2.docx (1).pdf

Visual Prototypes

The visual prototypes allowed me to quickly gather feedback from my stakeholders and align our expectations for the project. Through visual prototyping, I had the look and feel of this course to work together to deliver the sensory experience one would have when making Taiwanese beef noodle soup.

I use Adobe XD, Adobe Photoshop, and Canva to create visual prototypes.

Figure 1. Visual prototypes via Adobe XD. I was able to present these prototypes to my reviewers and to decide on the color-blind friendly palettes and layout for the Ingredient Menu and individual ingredient slides.

Figures 2. Visual prototypes for Step-by-Step Instructions.

Job Aid

After developing the course, I incorporated my stakeholders' feedback and created a job aid. The static, written document allows the learner to revisit the instructions after they finish the course. Check out the job aid below!

Recipe Taiwanese Beef Noodle Soup.pdf

Final Product

After multiple reviews and iterations, I was able to reinforce visual consistency and user-intuitive interface throughout the course. Here are some takeaways:

  • Visual Engagement: My reviewers and stakeholders find this course to be visually engaging and easy to navigate. The graphics and texts work together to contextualize the essential information that the learner needs to know, "showing" rather than "explain" the ingredients and instructions required for making Taiwanese beef noodle soup.

  • Intuitive User Interface: Throughout the course, the placement of the buttons are consistent. The "lightbox" and "marker" functions allowed me to organize complex recipe information into bite-sized chunks, turning the intimidating instructions into an engaging learning process.

  • Personable Touch: You can feel the warmth of Ama, the grandmother character and mentor, throughout the course! As I put the learner at the center of my design, I want the impersonal learning content to feel relevant and relatable. One way to do so is to reinforce a human-centered aesthetics and navigation throughout the course.

Below are more screenshots of this course!

Figure 4. A click-and-reveal interactivity that introduces what makes Taiwanese beef noodle soup delicious.

Figure 5. An animated and interactive slide that shows the list of other soup ingredients, with markers that introduce alternative beef cuts and substitutions.

Figures 6 & 7. Animated instructions for beef noodle soup.

Figures 8 & 9. Activities that help knoweldge retention.