Ergonomic Workspace

After conversations with health professionals in ergonomics and on-site corporate health, the need for this learning became clear. Combined with my own experience, and the discussions with other health professionals, I was able to identify several issues that needed addressed to reduce injuries in home work arrangements. I compiled these issues into an action map to identify solutions, then began creating a design document.

Design Document

Storyboarding

Using my action map and design document as the groundwork, I then created a text-based storyboard for this project, referencing my conversations with SMEs to create a realistic scenario of the decisions needed to create the workspace.

The concept for this scenario had three requirements: it needed to be relatable, easy to follow, and realistic. The simulation puts you directly into setting up your workspace with what you will probably have available to work with. The simulation shows consequences of decisions in a compressed timeline, so you can see the long-term results of choices quickly.

The text-based storyboard includes a breakdown of the scenario by question, including answer choices, prompt text, character texts, and consequences. If the learner gets stuck, they are able to seek help from the mentor character, Elissa, before making a choice. Positive and negative consequences help the learner to understand the “why?” behind their choices, letting them benefit from the experience of making a "wrong" choice without consequences in the real world.

Visual Mockups

Before creating the visual storyboard or prototype, I created visual mockups in Adobe XD. It allowed me to quickly design different variations and iterations to choose the art style, color scheme, and vector illustrations I would use. Adobe Illustrator was used to edit the graphics to fit the learning theme, as well as making sure that proportions and placement were correct when the design was applied to the prototype.

Starting with the wireframes and ending with the final versions, I was able to easily test color palettes, layouts, and get approval for changes before moving on to developing in Storyline. Adobe XD was a fantastic tool for designing the visuals and making quick edits along the way. XD helped streamline my creative process and allowed me to develop several iterations quickly, leading up to the final approval. I was also able to create a limited working prototype within Adobe XD to show most functionality before moving to Articulate Storyline.

Once the visual mockups were completed and approved by the client, I created a visual storyboard that not only included the design of the slides, but also the appropriate triggers, actions, and other programming notes that would be needed to make the scenario come to life.

By compiling the programming features, visuals, and text into one document, it helped to streamline the development process and serve as a reference during the rest of the development process.

Interactive Prototype

Next was to develop a more fully interactive prototype with Articulate Storyline 360. The prototype consisted of the first question and the resulting actions from the options, based on the templates that were created and approved in Adobe XD. I incorporated many Storyline features such as states, triggers, and layers. As the content was already approved and ready to go, the main feedback needed was on visuals and programming. As the assets were already prepared in Adobe XD, I was able to spend the majority of my energy on creating intuitive interactions and learner-friendly designs.

After designing and creating the first question series, I paused to get feedback from the client. Using the features in Review 360, I was easily able to acknowledge and apply the feedback that helped to make it more intuitive for the learner: such as spacing, refining the prompt texts, and button design.

I also sought feedback from stakeholders on the visuals, especially the character screens, to ensure that they were both visually appealing and realistic for the learner. After several iterations and screening the project for errors, it was finally ready for the next step.

Full Development

After receiving approval on the prototype, I finished developing the full product. With the first question slide series already completed (with the appropriate states, triggers, etc.), the time to complete the final project was greatly reduced. Having several specific milestones completed and approved earlier in the process streamlined the rest of the development.

An aspect of this project that I am particularly impressed with is that everything was created without Storyline's library or assets. All triggers, visuals, shapes, and buttons on the slides were custom built, including the question slides. This gave me more experience and understanding of how Storyline functions without using the premade templates.

Results and Takeaways

After sharing the project with the client, I had a few team members from the target audience go through the experience and give feedback. Overall, the feedback was positive and the learners enjoyed the interactive scenario experience. The rest of the feedback collected after this deployment will be used to improve the experience in future iterations.

Throughout the process, I was able to become more experienced and confident with the development tools Adobe XD, Adobe Illustrator, and Articulate Storyline. Creating custom templates and slides in Storyline gave me the ability to use triggers, states, layers, and variables much more effectively.