Coffee, simplified
Mobile eLearning Tab Interaction
This mobile tab interaction offers a quick, easy-to-understand overview of four popular coffee drinks. It's designed as a helpful guide for coffee shop customers who want to learn more and feel confident when choosing what to order.
Audience: Coffee Shop Customers
Responsibilities: eLearning Development, Visual Design, Storyboard, and Mockups
Tools Used: Articulate Storyline, ChatGPT, Adobe Stock
Overview
I’m not a big coffee drinker, but lately, more and more of my friends have wanted to meet up at local coffee shops to catch up. I love the vibe of those places—but every time I look at the menu, I feel completely out of my depth. I never really know what the different coffee drinks are, and more often than not, I just don’t order anything.
That’s what sparked the idea for this interaction. I imagined how helpful it would be to have a simple, mobile-friendly guide for people like me—those who feel overwhelmed by the coffee menu but still want to enjoy the experience. Something you could quickly pull up on your phone while waiting in line, so you could feel a little more confident about what you're ordering.
This mobile tab interaction was built with that in mind: a clean, approachable overview of four common coffee drinks. It’s designed to help people like me make sense of the menu and maybe even branch out a bit. I wanted it to feel like a quick reference that demystifies the coffee shop experience—so no one has to sit through another coffee date empty-handed.
Process
This interaction came together pretty quickly. I started with a simple storyboard to map out the flow, then put together some visual mockups to get a feel for the design. From there, I built a prototype and made a few tweaks based on feedback. I also played around with different animation styles in Articulate Storyline 360 until I landed on something that felt clean and easy to navigate. The result is a polished, user-friendly final product.
Design
After a few coffee shop catch-ups with friends—and plenty of time spent staring at menus unsure of what to order—I realized I probably wasn’t the only one who felt overwhelmed by all the coffee options. In casual conversations with others, I noticed that people often didn’t know what cold brew actually was or how it differed from other drinks, so I made “Cold Brew” the first option in the interaction.
“Macchiato” also seemed to cause confusion, especially since it can mean different things depending on where you are. I included it next to clear that up. I added “Espresso” because it’s the base for so many drinks but not everyone understands it on its own. And finally, I chose “Latte” because it’s familiar to most, but still worth breaking down in a simple way.
Once I landed on these four drinks, I focused on writing quick, three-sentence summaries that explain the key traits of each one. The goal was to make the info easy to scan—helpful without being overwhelming.
Design and Development Process
Instead of creating a separate, formal storyboard, I took a rapid prototype approach, building the structure directly in Articulate Storyline 360. This allowed me to experiment with layout, navigation, and interactions right from the start, while also getting a real sense of how the end-user would experience the content.
To support the learning content, I collaborated with ChatGPT to help me shape brief, easy-to-understand descriptions of each coffee type. My goal was to provide just enough background to help learners feel confident in their choices without overwhelming them with information—especially since they'd likely be referencing this guide quickly, while standing in line to order.
From a visual perspective, I knew I wanted the design to feel clean, crisp, and intuitive. I used a white background with subtle, intentional design elements that kept the focus on the content. I worked with ChatGPT to refine the overall aesthetic and tone, ensuring the interface felt friendly and accessible—even to non-coffee drinkers like myself.
Title screen with buttons
Navigation was another key priority. Since users might be viewing this on their phones during a busy moment, I made sure the interactive buttons were clear and responsive. Each button includes hover states.
Hover State
Although I didn’t use tools like Adobe XD or Illustrator for this project, I focused my time and energy on refining the learner experience inside Storyline itself. This streamlined approach allowed me to move efficiently while still paying close attention to detail—especially when it came to user interaction and visual consistency.
Full Development
Once I refined the functionality and interaction style in the prototype, I moved into full development within Articulate Storyline 360. Because I had already mapped out the structure and navigation during the rapid prototype phase, I was able to efficiently apply the same triggers, states, and animations across the remaining coffee type screens.
Using consistent interaction patterns—like hover and visited states, button logic, and transitions—helped streamline the process and maintain a cohesive learner experience. The groundwork I laid early on made this phase move quickly and allowed me to focus on the finer details, like timing, alignment, and user flow.
Results & Takeaways
This project received great feedback from peers and mentors, who appreciated the clean, simple design and how easy it was to navigate. The minimal aesthetic, paired with thoughtful interaction design, helped make the content approachable—even for people who, like me, aren’t regular coffee drinkers.
More importantly, this project gave me the chance to explore how flexible Articulate Storyline can be when you're willing to experiment. Instead of limiting my design to what I already knew how to do, I leaned into learning new techniques—like using motion paths, hover states, and triggers—to create the experience I had in mind.
By using a rapid prototype approach and collaborating with ChatGPT, I realized how much control I actually have over both content and functionality. I didn’t have to compromise my vision; instead, I found creative ways to bring it to life. That mindset shift—seeing the authoring tool as something I can mold around the learner experience—was one of the most valuable takeaways from this project.