Anatomy Circular Menu
Overview
This project was part of an Articulate Storyline challenge utilizing circular type menus in eLearning. The goal was to create a tool helpful for the target audience to explore anatomy and related products, while allowing for customization by developers.
Audience: Medical device representatives that need help to better understand their products and target market.
Responsibilities: Instructional Design, Graphic Design
Tools used: Articulate Storyline, Adobe Illustrator, PowerPoint
Problem and Solution
The Articulate challenge was to create a circular menu, something that may be more useful for navigation on mobile devices that have smaller screens. The theme and target audience came from a client describing issues caused by sales representatives and quality assurance team members not having a clinical background.
To help address the challenge, I created a dial template that could be customized easily to a device industry or adapted as part of a more traditional anatomy course. My target device format was a tablet, but it can be used on a phone-sized screen as well.
Process
Storyboarding
With a background in health sciences and eLearning, I needed feedback from users who were less familiar with the types of interactions used. Many users I surveyed weren't experienced in identifying the circular menus or how they functioned.
Visual Mockups
I created the visual mockups in PowerPoint. It allowed me to quickly design different variations ,as well as a flow chart to determine how the dial would function. Adobe Illustrator was used to create the "hover" versions and edit the graphics. The background graphics relate to their icons on the dial and provide a distinct change in the user's perception of location within the body. The pop-up link buttons contain complementary color schemes to their background graphic.
Development
This project was created in Articulate Storyline and required me to expand my skills in this software. As part of the process to create the link buttons, I found an alternative use for the scrolling pane function - creating transparent layers. I was introduced to variables within the software to "program" the dial to function, and the use of layers and states were important to create that functionality.
Takeaways
The project impressed upon me the need for real user testing, as the feedback to using the dial menu demonstrated. Working through the challenge also helped me through the process of creating templates within Storyline that can be adapted to different needs.