Coffee Companion Finder
eLEARNING
Tools: Articulate Storyline 360, JavaScript, Google Docs, ChatGPT, Canva
Target Audience: Learners and customers seeking an engaging way to discover their coffee preferences including users in customer service hospitality or food retail training programs.
Project Overview: This interactive learning simulation guides users through a branching quiz to discover their ideal coffee match Based in Articulate Storyline 360 it demonstrates how product knowledge can be turned into an engaging decision-based learning experience Personalized results JavaScript-powered visuals and clean UX design come together to model real-world customer-facing training.
The Problem
Many training modules in customer-facing industries lack engagement and fail to help learners retain product knowledge. Teams in hospitality and food service need lightweight yet impactful simulations that teach product details in a way that’s interactive, memorable, and mobile-friendly.
The Solution
The Coffee Companion Finder was designed to merge training and personalization through a coffee-themed product match quiz. The goal was to create a fun learning experience that models real customer interactions. Whether training a barista or guiding a curious customer, the simulation lets learners explore, evaluate, and select the best fit based on their needs — reinforcing key product knowledge along the way.
Storyboarding the Course
A 5-question branching quiz was mapped using a logic table. Each response influenced a specific variable like flavor, caffeine level, or cleanup preference. With 18 potential answer combinations narrowed to 6 result sets, I created custom coffee cards and UI mockups in Canva and Photoshop. The result layout was designed to show all matches before the user chose a final favorite — based on real user testing preferences.
Development Process
1. Analysis & Research
- Interviewed 3 baristas and 6 beginner home brewers
- Identified 5 key factors influencing coffee brewing preferences
2. Content Strategy
- 5-question format to avoid cognitive overload
- 18 quiz combinations mapped to 6 unique result sets
- Condensed final options to 3 choices per result for clarity
3. Visual & UI Design
- Created icon-based product cards with flavor tags and descriptions
- Used a warm, coffee-inspired palette for all elements
- Added JavaScript confetti to celebrate the final selection
4. Development
- Used Storyline variables and triggers to manage branching
- Created a “Processing” slide to run custom JavaScript
- Final result slide conditionally displayed based on unique user combo
- Fully mobile-friendly and touch-optimized
5. Testing & Iteration
- Ran two user feedback rounds
- Adjusted results layout and added restart option based on comments
Personalizing Quiz Results With JavaScript
Slide 7: Processing Slide — “Brewing Your Perfect Match”
To make this experience truly personalized, I used JavaScript to generate a unique match based on the user’s quiz selections.
Collaborating with ChatGPT for Technical Logic
I used ChatGPT as a real-time instructional design and technical development assistant throughout this project. Specifically:
- I described my goal of personalizing the results.
- ChatGPT helped me write the JavaScript code to combine my quiz variables.
- I also received step-by-step guidance to understand where to place the code and how to structure my triggers.
This collaboration allowed me to bridge creative design with technical logic, even though I had no prior JavaScript experience.
The Goal
Each user answers four questions (Slides 3–6), and their selections are stored in Storyline variables:
- flavor
- caffeine
- texture
- cleanup
On Slide 7, I added a trigger to execute JavaScript when the timeline starts. This script combines all four variable values into a single new variable called matchCombo.
Why This Matters
This combination (matchCombo) is used on the results slide (Slide 8) to display one of many custom-tailored coffee match profiles — so every user gets a result unique to their preferences.
JavaScript Code Used
var player = GetPlayer();
var flavor = player.GetVar(“flavor”);
var caffeine = player.GetVar(“caffeine”);
var texture = player.GetVar(“texture”);
var cleanup = player.GetVar(“cleanup”);
var combo = flavor + “_” + caffeine + “_” + texture + “_” + cleanup;
player.SetVar(“matchCombo”, combo);
Screenshots
Below are some snapshots of the development process:
Gathering Feedback and Iterations
After the initial build, I conducted two user tests via mobile devices. Feedback led to:
- A redesign of the result selection layout
- Addition of a “Restart Quiz” button
- Better UX for accessibility on smaller screens