top of page

Interactive Design

Mobile eLearning Tab Interaction

Copy of Soft Minimalist Download Multiple Devices Mockup (Banner (Landscape)) (1).png

This is a mobile eLearning tab interaction is an overview of the styles of bicycles available in today's market. It provides customers with an easy-to-navigate guide to eliminate some of the confusion when new to the market. This eLearning can be displayed on a touch screen kiosk within the store or on a mobile device app which is linked to the client's website. 

Shops that have this information available for customers to access on their own allow the salespeople to focus on the customers who are ready and know what they need. The customer benefits from this interaction on a device as it affords the customer privacy and time to determine what they think is important without any sales pressure, etc. 

Audience: Bicycle Shop Customers

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

Tools / Software: Articulate Storyline, Adobe Illustrator, Adobe Stock, Adobe Color


Over the last two years, I have renewed my passion for bicycle riding. It started as a way to get some exercise during the winter and spring of 2020. However, the joy of riding kicked in and I have been hooked ever since.


I recalled how confusing all the options were when trying to choose the "right" bike. It seemed as if the world had invented new types of bicycles while I was off the road! Mountain bike or road bike? How many gears did I need? What accessories were important? What were the price ranges to expect? This made me wonder if there would be an easier way than going through all the web searches and blog postings to find the "right" bicycle. 


I envisioned an eLearning tab interaction that would allow customers to easily review the different styles of bicycles without going through multiple slides or losing focus jumping from one section to another on a webpage.


This guide was best suited for either a touch screen/kiosk style interface located in the bicycle shop or by using a mobile device. The customers could use a QR code to access this guide once in the bike shop. 


I actually began working on this project by focusing on the end, where did I want the learner to be after using this product?


My goal was to create a tool that would break down the numerous types of bicycles surveyed two local bicycle shop owners in my town to determine the styles of bicycles they carry, the most popular styles from that selection, common questions from new customers, and any issues they could identify with new bicycle owners. I also spent time researching recent trends in bicycles to determine if the local shop owners were identifying all of the information needed to be comprehensive in my approach to the content.


I originally designed and created a script for an interactive, animated video-based microlearning module. This approach would have guided the customer through a video, with animated "guides",  describing each type of bicycle. The last section was designed with targeted questions to narrow down the type of bicycle that the customer was looking to purchase, revealing a recommendation at the end.


After storyboarding and beginning to use some online authoring tools to create this product, it was clear that the original goal was not going to be met with this approach. Informing the consumer about their options quickly and in an engaging way was the goal. Working through a 5 to 10-minute video was not the best way to achieve this.

While redesigning the product, I decided to create storyboards to determine the best layout and animation style prior to building a mockup and developing a prototype. This step had been skipped in the first attempt, thinking it would "save time" to not storyboard the entire project.


However, once I took this step, the remaining process was more straightforward. Storyboarding saved me time after all. I was fortunate enough to get feedback early on, which allowed me to experiment with a few iterations before settling on the finished design prior to creating the product in Articulate Storyline.  


Using tab-style interactions allows for more interactivity than what is usually found in linear content. Providing freedom for the user to navigate their online learning increases engagement, as opposed to locked navigation which limits engagement.


It was clear that the top 5 styles of bicycles were road bicycles, mountain bicycles, hybrid bicycles, city bicycles, and specialty bicycles (i.e. e-bikes and folding bicycles). I limited my focus for this interaction to those top five categories. 

After determining which types of bicycles to focus on, it was important to break down the pros and cons of each type. This information was most relevant to reaching the objective of informing the customer. I wanted to limit the text on the screen, so listing the distinguishing features and the pros and cons would be a challenge. 

Visual Mockups

Once the storyboards were complete, I used Adobe XD to create a mockup. The original design ( color palette, graphics, fonts, etc) was changed during this phase as the original graphics were feeling dated and less engaging than intended. 


Adobe XD was used to design and work through the prototype before using Articulate Storyline 


The simplicity of the icons used allowed for the information to be delivered simply, eliminating any "noise" on the screen, and ultimately creating a cleaner feel to the interaction. 

The color palette (bright colors, white background, and black text) was designed to evoke a playful, fun approach. Customers are excited and ready for fun and adventure. This color palette works with that goal in mind. The high contrast of the text and the background provides an accessible product for all users. 

Interactive Prototype

Creating the interactive prototype in Articulate Storyline was a quicker process after utilizing Adobe XD. I shared a prototype for the homepage and slide transition to confirm the user experience was satisfactory prior to developing the product.

Working with hot spots and triggers allowed the interaction to be smooth and easy to follow. By using the features in Articulate Storyline in this way, the blank screen typically seen when animations are used was eliminated. 

Full Development

Once the details of the triggers had been determined, I was able to quickly complete the same process for the remaining screens. 

Results & Takeaways

This was my first attempt to create a tab interaction that would engage and inform users. The idea sprang from my own frustration at the myriad of choices in choosing a bicycle. 

Overall, the feedback has been positive. I continued to try new creative and authoring tools to create learning materials. I am also more aware of the hazards that could come in a project when trying to skip a seemingly minor step. 

There were many aspects to bicycle purchasing that were not a part of this tab interactive. Due to the nature of this product, being short and concise was key. Additional tab interactions could be developed to focus on accessories, choosing the correct size bike, and common repairs and issues bicycle riders experience while riding. 

Back to Portfolio
bottom of page