This project is an eLearning module designed and developed for instructional designers to learn some common design principles and how they apply specifically to eLearning. Throughout this module, there are links to outside resources. The addition of xAPI allows me to collect data to keep this learning module current and useful.
.png){kind=small}
Visual design is one of my favorite parts of designing learning experiences. Throughout my learning experience designer (LXD) journey, I have seen common visual design mistakes in some initial work I've looked at and even in my own work. This sparked the idea to create Principles of Design for Instructional Designers!
Could you look up design principles on Google? Sure... but most websites are specific to web design. What about eLearning? I've got you covered! In my learning module, I define each design principle and show an example of a simple tab interaction with opportunities to learn more about each design principle. It’s also frustrating when you finally find a resource that covers what you’re looking for, but the information is outdated and the links to resources no longer work. I address this issue by implementing xAPI to collect data on user interactions and experience.
.png)
I wanted this eLearning experience to be useful and effective so I created a quick storyboard, designed visual mockups, and developed a prototype. After receiving feedback and deciding on a final design, I developed a functional and aesthetic final product.
Based on the eLearning experiences I’ve reviewed, I discovered there were common visual design mistakes being made. This helped me narrow down my focus to these nine principles of design: modularity, balance, space, alignment, hierarchy, grouping, consistency, dominance, and contrast. With these principles in mind, I created a simple storyboard to lay out how I would define each principle, how to highlight that principle for eLearning, and what resources I wanted to use.
With the storyboard complete, I moved on to creating the visuals. Since I was creating a learning module on visual design, I knew I needed to ensure that my project and the simple slide example image followed every principle of design. In my first round of wireframes, I included the design principle explanation, a good example of a slide, and a bad example of a slide. This allowed me to highlight some aspects of my storyboard, but it wasn’t obvious what the user was looking for.
In the second round of wireframes, I played around with the idea of using a computer screen to display the information. I struggled to find a nice visual balance with this layout and I felt that there was valuable space being wasted. From this round, I did like the example and nonexample slides that I designed.
With a solid example slide, I was inspired to use the colors in the image. This led to the first round of high-fidelity visual mockups. Feeling confident with this design, I threw the mockups to the ID community to get preferences and overall feedback. I did this in a live call with one veteran instructional designer and a handful of up-and-coming instructional designers. I also sent out a survey to the wider instructional design community.
The survey results helped me to determine which title slide and quote slide were more visually appealing. I also designed multiple options for the example slide image and the “+” markers.
I developed a prototype in Storyline, but I wasn’t satisfied with the layout of the content slides. I went back to Figma and created a menu slide to free up some space on the content slides. I made sure to consider the feedback I received from my survey while creating a balanced layout.
Next, I developed the interactive prototype in Articulate Storyline 360 to get feedback on the new design and functionality. The menu uses gifs for the hover state so it was important to check that these were working correctly. The prototype also helped to check that the variables I set worked to show the user which menu item they already visited.
I received feedback to make the “+” markers larger and to make the flashing glow less subtle. After receiving this feedback, I moved from using Storyline’s built-in markers to creating custom markers and custom glow features. This change caused me to rebuild the project using more slides, layers to create the glow feature loop, and to animate the text boxes for the additional information. This rebuild was pretty quick because all of the content was already designed; it was just a matter of moving things around.
Creating the interactive prototype was a crucial part of project development. This step helped me develop essential features that improved the user interface and user experience.
With the prototype refined, I moved on to full development. Investing time in my visual mockups and the prototype made the process of full development quick and straightforward.
Throughout the ideation and development of this project, I knew I wanted to see if users were viewing certain design principles, viewing the additional information, visiting the resources linked throughout the experience, and their overall feedback. This pushed me to explore xAPI (Experience API). I followed Devlin Peck’s Full Guide to xAPI and Storyline to write the code and execute it in Storyline. I also followed Devlin’s guide to generate random user names and emails because I wasn’t concerned with collecting that specific data.
Writing code and implementing it in Storyline was thrilling and motivating. There was a build-up of anticipation each time I would test the code. It was exciting to see when it worked and it was exciting to problem-solve when the code didn’t work. I was able to successfully track what slides users viewed, what links the user visited, and if the user left feedback by selecting a thumbs-up or thumbs-down icon. I was also able to collect in-depth feedback from the user by pulling their text response from Storyline.
All of the data collected was sent to Veracity LRS. With this LRS, I can view each interaction, read the text-based responses, and view the analytics. Watching the data change as users interact with the learning module is really satisfying. I am excited to keep this learning module updated based on user data.
When creating any learning experience, it is important to keep that user in mind at all times. Throughout this process, I made sure to involve the user during the most crucial steps. I received lots of encouraging feedback from the instructional design community with the release of the final product.
“I'm really impressed with the structure of this project. Sabrina has turned what could have easily been a boring, traditional tabbed interaction into a more interactive, fully developed eLearning experience. Combining a menu feature that allows flexible progression through the sections of information with cleverly thought-out hotspots to avoid cognitive overload was an insightful strategy. And Sabrina's work is always so beautifully designed, which truly enhances the experience. Many visual design tutorials focus on web design, but Sabrina has created a learning experience for a population who is just as in need of this knowledge: eLearning designers. What a helpful tool to have open in a browser tab while designing eLearning.”
-Scott Schmidt, eLearning Developer
“Awesome project, Sabrina! It does look different from when you first posted. I have enjoyed watching as you developed it! I appreciate the content and will use the information to apply to my projects.”
- Melanie Adkinson, Aspiring Instructional Designer
“Sabrina’s module uses beautiful visuals and interactive elements to teach design principles in a highly engaging way. The dedication to detail and intuitive navigation gave me a seamless experience, and the animated icons made the learning stick. I also appreciate the useful links to other design resources that are thoughtfully woven into the module.”
-Brandy Muse, Future Instructional Designer
After completing this project I not only feel very confident in my ability to develop learning experiences in Articulate Storyline 360, but I am also excited to continue exploring xAPI. There were times during development when Storyline didn’t play nicely with my design. Instead of caving to the limitations, I made Storyline work for me. I want to continue learning more about xAPI and all the things it can do.
This project was fun to work on because I was able to flex my visual design skills and knowledge not only in the content provided but also in the design of the project.
.png){kind=small}
