Providing Feedback
This scenario-based E-learning experience is a concept project designed to help instructors at English language training institutions make better decisions when checking comprehension and addressing linguistic mistakes throughout their courses. Language instructors provide feedback in a way that engages, builds confidence, and provides clarity to students in their development.
Audience: Language Instructors at Learning Live English Institute.
Responsibilities: Instructional design, eLearning development, action mapping, storyboarding, graphic design, visual mockups.
Tools Used: Articulate Storyline 360, Google Docs, Mindmeister, Figma, Affinity Designer 2, Adobe Illustrator, Adobe Stock, Pexels, Freepik and Pixabay.
The Language Live English Institute is a conceptual company dedicated to building a proactive and supportive community of confident English language learners. Other departments responsible for booking appointments note a decrease in attendance among newer students who report feeling lost and confused in their courses due to poor communication from instructors. Company higher-ups are seeking external aid to address this problem before students either verbally confront teachers or leave abruptly, which could threaten the company’s growth.
Problem
Solution
After analyzing the problem, I determined the root cause of students’ communication problems was performance-related. On average, instructors are inconsistent with feedback throughout the course, they use ineffective techniques to check comprehension, and they fail to offer balanced and concise criticism. To support them in actively building more consistency, better feedback skills, and closer relationships, I proposed an immersive, scenario-based e-learning experience. This course simulates the same pressurized circumstances instructors experience daily while providing the scaffolding they need from mentor advice and realistic consequences to learn and reinforce better practices.
Using the ADDIE model to frame my workflow, I drew up an action map and storyboard to structure the learning experience. After some reflection and modifications, I designed visual mockups, crafted assets, and combined each piece into an interactive prototype for audiences.
Process
Once a stakeholder approved the learning solution, I acted as the Subject Matter Expert (SME) and elicited my experience as a Language Instructor. I started my action map with a detailed goal mirroring Bloom’s Learning Objectives. Then, I brainstormed the feedback methods modeled in education and dissected them further into more concise actions. After I carefully analyzed all options, I identified the actions that would benefit learners the most in real-life situations.
Pausing to draft an action map ensures that learners are practicing and reinforcing the right actions and decisions that make employees valued members in their field.
Action Map
Mind map of potential solutions for the eLearning course via Mindmeister.
Employing the key actions to scaffold my course, I started expanding on those options with a text-based storyboard that modeled many of Mayer’s principles. For example, I cultivated a dialogue to reflect a more conversational style (i.e. personalization) by reducing language specific to the field. In addition, I employed an online mentor to offer tips in indecision (e.g. embodiment), prompting the user to keep moving and engaged. Lastly, the consequences, accompanied through visual metaphors (i.e. signaling) and explained in narration (i.e. redundancy), not only reflect the highest impact the learners' choices have on themselves and other company members.
The storyboard was an essential step in the development process as it prompted a more authentic interactive experience, translating learning theory into practice and stimulating possible strategies for mockups.
Storyboard
Storyboard built in Microsoft Word.
The storyboard initiated visualization of the learning experience but it wasn’t until I explored examples and gathered more visual information into a mood board that I found inspiration in combining the photo-vectorizations of the educational setting with a card game aesthetic. Once text, colors, and characters were selected to match the underlying theme, buttons, stickers and Icons were handcrafted to fit the overall style. The final product was a visual key used to ensure consistency and uniformity.
Mockup
Style guide of colors, characters, and components created through Pinterest, Adobe stock and Procreate.
Equipt with the essential assets, I sketched basic wireframes to experiment with layout and placement. Confident I had the best options, I soon accomplished coherence for each consequence, question, and character slide with an intentional combination of visual components.
Visual mockups constructed in Affinity Designer 2 and shared through Figma.
Prototype
The interactive prototype was not only an opportunity to view the interplay of components in action but also address any functionality issues before building out the full course. I used Articulate Storyline 360 to develop the prototype which consists of a four-slide set up: a title slide, an introduction slide, a mentor slide and an activity slide. This is followed by a question-scenario slide, which includes the question, one correct answer, two incorrect answers and the sequent consequence slides.
To bring this small prototype to life, I constructed and exported each component separately for adjustment and animation. Then, I employed Storyline’s timeline and motion graphics to build interactions and incorporate special effects.
Button alterations; Before (top) and after (bottom) photos.
Slides drafted and adjusted in Articulate storyline 360.
Full Development
After several iterations of the prototype, I applied all my experience to the rest of the project on Articulate Storyline 360. Throughout the course, I integrated states, triggers and layers to guide users seamlessly through the experience. For instance, after sharing my updates, I expanded navigation options with arrows and promoted user controls with more layers. I repeatedly checked for errors and mistakes on the timeline as well as through the preview options and, overall, in Articulate Review 360.
Custom Visuals are the aspect of the project I’m most proud of as it’s where I stretched myself the furthest. Working in Affinity Designer 2 was a new challenge for me and the first time I had ever worked with vectors. Luckily, after much exploration and several personal iterations, I had professional assets I was pleased to incorporate into this project.
User Control is another aspect of the project that was a bit of a challenge for me. I had to reflect on different solutions to keep the animated experience without the user losing control at times. After advice from mentors in my field, I discovered new combinations of tools to resolve the issue.
Sound Effects: The few sounds I incorporated add a realistic touch to the elements like the cards and the final photograph, enhancing the lesson experience without overwhelming the audience. While not my first time editing audio or video, I enjoyed working out the timing details to match it with the animation.
Final course shared through Articulate review.
Results
Building a full learning experience has left me with several takeaways I look forward to building on in the future:
Be profitable in problem-solving: As a learner, I’ve always enjoyed organizing information and integrating graphics but as an Instructional designer I find myself reflecting more often on the best way to elicit knowledge for the most value. Analyzing experiences to be learner-centered and impactful not only challenges me to prioritize information but also determines in what format it’s most beneficial to the learner.
Iteration is a process not a phase : As a visual person, my course construction experience reflected more of the frequent back and forth from the SAM model than the clear-cut build up from ADDIE. For instance, I found the structure and parameters of the learning experience were much more defined in the visual designs, which subsequently informed much of the storyboard in the earlier phase. In the future, I look forward to combining these practices for more efficiency.
Build cooperation: As an instructional designer, going the extra mile in the attention to detail plays a major role in promoting cooperation. On the one hand, exercising more precision on screen (e.g. via visuals, dialogue, sound, and timing), helped to clarify the message and increase the impact in the overall learning experience. Additionally, being more detailed in programming (e.g. via triggers, layers, and variables) not only allowed me to be more intentional with the amount of control I gave to the user but granted the user more flexibility over their experience.
Be open to other solutions: The building process was an exercise in pushing boundaries. To start, the barriers in the program not only expanded my expertise through other resources in small and practical ways but altered my workflow in a way that helped streamline the project. Moreover, the limits of my own experience prompted me to reach out more for support from others online and in-person. Looking back, I found that the ID process wasn’t as much a series of steps for a personally completed solution as it was a collaboration of people and programs that brought their skills to a solution to make it more complete.
