Overview

This concept project is a tool that suggests a suitable bicycle type for the user, and can produce multiple outcomes that depend on the user’s expressed preferences. The goal is to help first-time buyers to narrow down their field of options and focus on a bicycle that best suits their intended use, the terrain they will ride on, and the characteristics that they value most.


Audience: First-time bike buyers who are overwhelmed by their options and don’t know where to start

Responsibilities: Instructional Design, eLearning Development, Graphic Design

Tools Used: Articulate Storyline, Figma, Affinity Designer, Twine

Problem and Solution

With the massive (and ever-increasing) variety of bicycle types available today, selecting a suitable one can be a daunting task for unaccustomed consumers. Rather than intimidating a potential buyer with technical details, this tool is designed to facilitate the process by asking a few basic questions that do not require existing cycling knowledge, and then making a general recommendation based on the input provided. The experience is framed as an interaction with a friendly bike shop owner to make it more immersive.

Process

Storyboarding

To plot out the various combinations of answers and their resultant outcomes, I used Twine, a program for writing interactive non-linear stories, to produce a fully text-based prototype of the tool. This allowed for rapid testing and improvement, and aided greatly in setting up variables in Storyline during the development stage. This phase also led me to cut down from my initial plan of five choices per question down to three, which decreased the number of possibilities (and amount of time spent) drastically.

Visual Mockups

I created a mockup in Figma to show key slides, using a combination of self-created vector graphics and stock images. One of my aims was for the guiding character to keep a constant presence throughout, to better create the impression of talking directly to someone. Icons were selected carefully and went through several changes to present concepts as clearly as possible. Feedback given on the visual design included a suggestion to create more contrast between selected and non-selected items, and to reposition text so as to not block other elements.

Development

The project was created in Articulate Storyline and called for careful attention to the use of variables, due to the many possible choices and outcomes. However the most technically challenging task in this project for me was the creation of an ‘image carousel’ feature which, while functionally simplistic, required precise correlation between many changing object states.

Takeaways

Compared to my prior attempt at a scenario-based training, which was also highly responsive to user choices, I followed a more streamlined design process that reduced development time drastically. I also approached the design more mindful of how it would adapt to mobile devices (specifically by making buttons larger to reduce accidental wrong presses), to ensure that the experience on a smaller screen would not be compromised.