01 The brief
An interview design task.
This project began as a design task for an interview. The brief was deceptively simple: teach a total beginner how to make a peanut butter and jelly sandwich. Rather than forcing it into a complex, real-world corporate problem, I embraced the prompt exactly as it was presented, a foundational instructional scenario. When the content is this fundamental, and the audience is a complete novice, the instructional design becomes the entire story.
Because the objective was strictly to guide a beginner from zero knowledge to a finished task, I designed around best practices for adult learners navigating a short, self-paced course. Everything was anchored to three observable learning objectives:
- Identify the ingredients and tools needed to make a PB&J.
- Describe the steps to make a PB&J.
- Make a PB&J, start to finish.
02 My approach
ADDIE as the frame, adult-learning principles as the compass.
I used the ADDIE framework to structure development: a quick learner analysis, objectives drafted from the desired outcome, every activity and assessment aligned to those objectives, and evaluation embedded throughout the build rather than bolted on at the end. Underneath that framework, five adult-learning principles guided the design of each screen for a beginner audience.
-
Principle
Offer learner choice and flexibility.
How it shows upA branching check-in lets confident learners skip ahead, while others can practice first. Offering ingredient alternatives respects personal preferences and dietary needs.
-
Principle
Include real-world relevance and application.
How it shows upA grocery-aisle shopping trip and a take-home recipe card move the skill off the screen and into a real kitchen.
-
Principle
Provide immediate feedback.
How it shows upEvery interaction responds instantly: a live coverage meter as you spread the peanut butter, colour-coded grading on the cart and the sequence, and gentle correction instead of generic error messages.
-
Principle
Keep it self-paced and engaging.
How it shows upI built a Storyline-style shell with an outline, a progress bar, and saved states. The learner controls the pace and always knows their location in the module.
-
Principle
Encourage learning by doing.
How it shows upThe core lesson is a hands-on cooking game. You swipe a knife to spread the ingredients, press the slices together, and cut the sandwich. You learn the task by actively performing it.
03 The five modules
Each module earns its place against an objective.
- 01
Introduction
A personalized welcome and a clear statement of what the learner will achieve. Personalization builds ownership and motivation right from the first screen.
- 02
Ingredients & Tools
Learners click each item to understand its function, explore alternatives, and watch it land on their station. It builds recognition through familiar cues, with autonomy built into the swaps.
- 03
Let's make a PB&J
A guided, hands-on demonstration of all five steps in a controlled setting. Performing the task with support first builds the baseline confidence a novice needs to do it independently later.
- 04
Practice (optional)
A shopping simulation and a drag-and-drop sequencing activity. This is optional by design, to honor self-pacing, while reinforcing real-world application and procedural recall.
- 05
Make your own
A downloadable recipe card and a prompt to share a photo with the cohort. This drives independent application, supported by the accountability and motivation of a learning community.
04 From prototype to playable
The same judgment, a more honest medium.
The original iteration was a PowerPoint prototype, with the interactions mapped out in a design document. I decided to rebuild it as a self-contained web module in HTML, CSS, and JS so the interactions would actually function, and used 3D realistic cartoon illustrations to bring the visuals to life and push toward a genuinely tactile cooking game. While the tools sped up development, the core instructional decisions, what each screen was for and what to cut to avoid overwhelming a beginner, stayed entirely mine.
The hardest call
I chose to keep the spreading interaction a real, gesture-based movement rather than a simple button click. The learner drags the knife and watches the peanut butter fill in under a live coverage meter. It cost more time to build and required an accessible fallback, but since learning by doing was the entire point, the gesture had to stay.
05 Accessibility
Accessibility wasn't a finishing touch; it was a foundational requirement.
- Every drag interaction has a click or arrow-key fallback, and the spreading game includes a "fill it for me" option for non-pointer users.
- Meaningful imagery carries alt text, with semantic structure, visible focus, and respect for reduced-motion preferences.
- Text on pastel surfaces meets contrast standards, and the entire layout reflows seamlessly down to mobile.
06 Evaluation & reflection
What I'd carry forward
Throughout this project, I treated evaluation as a continuous process, constantly checking the alignment between objectives, activities, and assessments as I built. In a real-world deployment, I would package this for an LMS, run it with sample learners, and use their feedback, quiz performance, and completion rates to refine it further. Ultimately, treating a seemingly simple interview task seriously is the clearest way to demonstrate my approach to empathetic, beginner-focused learning design.