The Milk Map Project
This concept eLearning interaction explores alternative milk options to help consumers make an informed choice.
Audience: Customers seeking information about alternative milk choices
Responsibilities: Instructional Design, eLearning Development, Visual Design, Action Mapping, Storyboard
Tools Used: Articulate Storyline, Adobe XD, Adobe Illustrator, Mindmeister
Overview
This is one of the first projects that I worked on early in my career. My team and I saw that there were an overwhelming number of choices to make in the grocery store, especially with the growing number of alternative kinds of milk available for purchase. With the sales of plant-based milk alternatives rising, this concept eLearning interaction provides information to the consumer so they can make an informed choice about some of the alternative kinds of milk available to them. It was something that I was very excited to start because as a non-dairy consumer myself, I love to educate others about the possibilities and alternatives.
Process
After I thought of this idea, I made a rough edit of an action map showing the different alternatives to milk to help narrow down the scope of the project. I also conducted research about various kinds of milk, to ensure that the eLearning was accurate. After that, I jumped into Adobe XD to create a concise visual mockup and play with the visual design aspects of the project. As this is a concept project, I did not need to wait for approval before moving into the final phase.
Action Map
The purpose of the action map was to clarify what milk alternatives were available and what they had to offer (what they were good at) and where they missed the mark. By discovering this prior to eLearning development, I was able to avoid focusing on milks that weren’t as popular, and that the consumer would avoid, and only decided to do the four most popular milk alternatives in the end. This simple action map saved me so much time because it allowed me to get to the root of why consumers would want to pick one milk over the other and easily recognize the pros and cons, for when I started developing my slides. The action map revealed six popular milk alternatives that were saturating the market at the time. These six alternatives became the starting point of the entire eLearning experience and helped guide the development of the visual storyboard.
Visual Storyboard
Next, I developed a storyboard that would help everyone understand how the milk alternatives stood out, and how they compared to one another. I used a layout that incorporated the slides, text, and some visuals in one document. I pulled the text from my notes and the action map and imported a graphic to add to the title page, I also developed a color scheme to go by here. I created these slides in XD. This helped me visualize the flow of the eLearning and understand how all the elements would interact on the screen.
Full Development
Articulate Storyline 360 was used to construct this eLearning, which was based on my graphic mockups. I made a few tweaks to the graphic design, animations, and scripting while in Storyline to ensure that the project was both visually appealing and functional. My use of layering, as well as the visual design, are both things I'm happy about.
Results & Takeaways
The product was well-received by the instructional design community that it was presented to. The main feedback was that the project was clean, simple, and user-friendly. Users enjoyed the color choices and consistent use of character styles throughout the experience as well. In the future, I would add more information including the pros and cons, and add more graphics where there seems to be lots of text.
This project gave me a better understanding of the instructional design process from start to finish. I learned how to create, construct, and revise a learning experience that addressed real-world issues. I realized how important action mapping is when I saw that it allowed me to focus the eLearning on issues that were best addressed through training.
The project's development phase was crucial in acquiring a better understanding of the tools that aid in the creation of professional and high-quality eLearning experiences. I've learned how important every element is in the learning experience - from buttons to spacing, text font and weight, and consistent animations - these factors may make all the difference between a poor and an excellent learning experience.
Knowing the correct tools and getting proficient and comfortable with them aided me in producing a clean, consistent, and vivid end product. Despite the fact that there is always potential for growth and progress, I have a firm grasp on the skills and tools required to create professional, high-quality eLearning.