Coffee, Simplified

Mobile eLearning Tab Interaction

This is a mobile tab interaction that provides a simple overview of four different types of coffee. This eLearning interaction gives coffee shop customers a quick reference guide to help make decisions about which coffee to order.

Audience: Coffee Shop Customers

Responsibilities: eLearning Development, Visual Design, Storyboard, and Mockups

Tools Used: Articulate Storyline, Adobe XD, Adobe Illustrator

Overview

I love coffee, and I spend a lot of my spare time in coffee shops.  At a recent coffee shop visit accompanied by my brother, this eLearning interaction came to life while perusing the menu and determining which coffee to order. As the coffee “pro” - and my brother, somewhat of a coffee “rookie” – I found myself going over the menu, explaining the different coffee brews and concoctions to help him decide which drink he wanted.  It made me wonder how many other people stumbled their way through coffee shop menus or even shied away from certain drinks entirely – simply because they didn’t know what they were.

I imagined an eLearning tab interaction that customers would be able to access in line by scanning a simple QR code. This would help them quickly familiarize themselves with different types of coffee.  This guide would, ultimately, increase sales of different types of coffee drinks at the coffee shop.

I determined that an interaction suited for the mobile experience was the best route to take, because customers would likely be accessing the guide through a phone. Customers would be able to scan a QR code to view the guide at the counter before ordering.

Process

The turnaround time to produce this eLearning interaction was relatively quick. I created a short storyboard, designed visual mockups, and developed a prototype. After receiving feedback and experimenting with different animation styles in Articulate Storyline 360, I developed a smooth and sleek final product.

Design

Based on my conversation with my brother at the coffee shop that day – along with several informal conversations with other coffee shop customers – I determined that customers often did not know the difference between cold brew and nitro brew.  For this reason, I decided that “cold brew” and “nitro brew” would be the first two buttons on the tab interaction. I found that customers were usually familiar with drip coffee but were unfamiliar with how it compared to pour over coffee. This led me to include “pour over” as the third button. The affogato was usually unknown – especially if customers were not familiar with Italian words – so this became the fourth button.

After deciding which four coffee types I would highlight, I thought about the most distinguishing features of each one. This guided the 3 sentence summaries I wrote, so users could gather key information without reading through large blocks of text.

Visual Mockups

After I finalized the storyboard, I began designing several visual mockups in Adobe XD. The visual mockups gave me direction on what the project would look like. It also helped me decide if I would use illustrated or realistic images. After several iterations, I felt that the illustrated images for this interaction resulted in a look that was crisp, consistent, and professional.

I decided to use a fun and simple – yet, eye-catching – design with several coffee beans and leaves placed around the border. I used a color theme of black, brown, white, and green to stay on brand with a “coffee look.” To maintain a consistent illustrated theme, I used icons of each different coffee type. These fit well with the overall aesthetic of the experience, and clearly represented each coffee drink the user would learn about.

During the visual mockup phase, I used Adobe Illustrator to customize the graphics. I edited the border I used on each screen and customized the back button hover state, so it was consistent with my color theme.

Although this phase moved quickly, it was a key step in the process. When developing the full product in Articulate Storyline, I was able to focus solely on refining the functionality of the project.

Interactive Prototype

Next, I developed an interactive prototype in Articulate Storyline 360 to get feedback on the homepage and the slide reveal for the first button.

Developing a prototype helped me refine key animation features and button styles. My goal was to achieve an animation style that was sleek and had smooth transitions between screens. After receiving feedback on the first iteration, I realized I could work with motion paths, variables, and triggers to take the transitions to another level.

The simple “fly in” and “fly out” animations I originally used did not allow the user to transition to another screen without seeing a blank screen first. By grouping each coffee type screen with the homepage screen, adding a “Begin” and a “Return” motion path, and pausing the timeline at the right point, I was able to omit the blank screen. As a result, the user could click any of the active buttons and watch the screen slide back and forth between the homepage and each coffee type.

After refining the animation style, I decided to change the original button style based on the sliding aesthetic I had created with the motion paths. In my original mockups, I used a home button on each coffee type screen so the user could select this to return to the homepage.  With an animation style that created the illusion that the screens were sliding back and forth, a back button seemed like a better fit.

Creating a prototype was a key part of this process. This phase of the project development helped me develop important features that dramatically increased the quality of the eLearning interaction.  

Full Development

After I polished the animation features in the interactive prototype, I completed the full development of the project. Working out the exact triggers and variables in Storyline beforehand allowed me to rapidly create and apply the same features to the last three screens in the project.

Results & Takeaways

The product received positive feedback from customers and the larger instructional design community. Users loved the sleek, minimalistic, and aesthetically appealing look of the eLearning interaction.

This project helped me explore creative methods in Articulate Storyline to achieve the look I wanted for the project. I gained a better understanding of the control I have over eLearning authoring tools to support the vision I have for an eLearning experience. Rather than changing my vision to adjust to Articulate Storyline’s functionality, I challenged myself to employ creative solutions to achieve what I needed from the authoring tool.

Throughout this project, adjusting my perception of this authoring tool helped me create an impactful eLearning experience. I have learned a valuable lesson: With patience, creativity, and determination, I can make the eLearning tool work for me to create high quality eLearning experiences that are best suited for my learners.