This scenario-based eLearning concept project aims to help sales representatives make effective lead calls to potential clients. During the course, the learner is engaged with a series of real-life scenarios and learning what kind of engagement is needed during lead calls. JavaScript was also implemented to include a downloadable PDF certificate of achievement with the learner’s name and date. This project is best viewed on desktop.
Audience: Sales Representatives at BioMatter
Responsibilities: Instructional Design, Project Management, Action Mapping (Needs Analysis), eLearning Development, Storyboarding, Visual Design, Mockups, JavaScript Implementation
Tools Used: Articulate Storyline 360, Figma, Adobe Photoshop, Visual Studio Code, MindMeister, Google Docs
With in-depth investigation on the low conversion rate, more than half of the Sales Team were newly hired during the pandemic with training only on how to be the point of contact to clients (as the focus during the pandemic was serving the clients since conversion was high). Upon interviewing, the Sales Representatives who were hired during the pandemic have low conversion rates and clearly indicated an uneasiness or lack of skill around how to effectively engage with leads when making lead calls.
I proposed an immersive scenario-based eLearning experience to help Sales Representatives practice having effective and engaging lead calls. This eLearning experience will have realistic and memorable consequences while being risk-free.
The Action Map was developed soon after the proposal was accepted. I acted as the SME to develop an action plan based on the goals and objectives. I used Cathy Moore’s action mapping process to identify any Sales Representatives’ contributing factors. The questions are to understand the Sales Representatives’ responsibilities, expectations, and any common mistakes. With this information, I was able to record it all through Mindmeister to develop an action map.
The sales of BioMatter have drastically changed as demands started to plateau (post-pandemic). After thorough investigation, it was evident that the following were problems that needed to be addressed in order to continue to increase its clientele:
I suggested a specific and measurable performance goal and used that to create observable actions.
Business goal: Lead-to-clients conversion rate will increase 3% by the next quarter.
Learning objective: By the end of the course, Sales Representatives will be able to convert 3% of their leads to clients using lead call tactics.
Working as the SME developing an actionable and observable behavior, I am able to get to the bottom of the issue and focus the training on 3 components:
I used Twine to help map out how the learners would go through the scenario in the eLearning and to focus on the 3 components. These actions became the foundation of the entire eLearning experience and helps focus the topic to reduce cognitive load.
After action mapping was approved, I moved into the development phase in ADDIE using a text-based storyboard. I prioritized the tasks and created scenario-based questions that aligned directly with the performance goals and learning objectives. Each task and question would lead the learners to decide a positive and actionable behavior.
The questions were presented with a correct choice and two distractors. If the learner chooses the distractor, they will see a real-life consequence and be redirected back to the question with a “try again” button. The learner can also seek assistance from the mentor anytime when choosing the options for each scenario.
Another feature I included was a mentor. I saw it as a better fit for the learners when they needed additional support. This would be more optimal than giving them information or reading material on knowledge they may already have. As the learner continues through the scenario, it was important for them to see their progression through the star rating, which was another feature I added. Because of this, I incorporated a star rating system for them to monitor as each scenario was completed.
While working and receiving feedback from experts, it helped that the storyboard contained information that was clear for anyone who would be reviewing it (including SMEs, developers, and any stakeholders).This was essential part of the design process as I embedded instructional practice and learning theory to make the experience as authentic as possible for the learners.
After confirmation of the storyboard, I started the visual design mockup. BioMatter’s brand color scheme and typefaces were the focus of the aesthetic. I used Figma to share the visual assets and to receive any feedback from stakeholders.The font type, size, color, button designs, character assets, and background were all approved before moving onto the prototyping.
I continued to use Figma to create several layouts through wireframing and then adding color schemes and assets later. The assets, texts, and color choices were all put together in layouts for opening slides, prompt slides, question slides, and mentor slides.
After the approval, I developed the rest of the visuals in Figma. This saved a lot of time because I was able to get immediate and constant feedback and approval without drastic change later on Storyline.
I moved on to creating a prototype using Articulate Storyline 360 after completing the visual mockup. The mockup helped me streamline the entire prototype design. Part of the streamlining process was to make sure that all the question slides, mentor slides, dialogue slides, and consequence slides had similar designs. This way, the development would be more consistent and time efficient.
The feedback I received from my first prototype was to add audio sounds to provide more engagement. Having the dialogue be animated in, one bubble at a time, would help the learners read through the conversation without overload. I also created a dropdown menu to simulate what it would be like to piece together an email for a potential client. This challenged me to gain a deeper understanding of Storyline’s variables and conditions. In addition to animating the dialogue, I also animated the star rating system and added the hover state for the buttons to make it more clear that it was interactive.
After the final tweaks, this project would be entering the full development phase. The revisions were crucial before full development as it made the process more productive and efficient.
I used Articulate Storyline 360 for my full development. Features such as audio for the star rating system, variables and conditions, state hover buttons, dialogue animations, and Javascript triggers were added. I also had to add a variable trigger that would have to calculate incorrect or correct responses when the learner is asked to construct an email.
Not only was the trigger from constructing an email a challenge, I also created a certificate that needed to be attached to the Storyline file and be generated through JavaScript.
During the full development, I used Storyline to add features to complete the experience. Audio sound of the star rating system and phone dialogue were added along with animations to make the experience more engaging. I also added triggers for each of the question responses to make sure there was an opportunity to learn for every choice made (including the different distraction choices).
The challenges for this project were to create a dropdown menu, animate dialogue, and to provide a certificate at the end of the learning experience. Yet it was a success. I created a certification through Figma and Adobe Photoshop and integrated javascript through Visual Studio Code to generate a certificate for the learner.
Mentor: The learner has access to the mentor, named Noah, to assist them in every real-life scenario whenever support is needed. For each question, Noah’s icon would be at the upper right corner and when clicked, would be able to provide additional support that corresponds with the situation.
Correct Feedback: When the learner chooses the correct response, this scene will immerse the learner by walking them through real-life positive consequences, then moving forward to increase their star rating.
Incorrect Feedback: If the learner chooses the incorrect response, the scene will immerse the learner by walking them through the consequences of their action and seeing the result of their interaction with the lead.
Audio: After the correct feedback, the learner would increase the star rating by 1 star. The animation would be accompanied by audio.
Downloadable certificate: I used Figma and Adobe Photoshop to create a custom certificate. The learner would be able to download this at the end of the experience. Once the learner completes the learning experience, it will use the name that was entered in the beginning and generate a certificate using their name.
It was really important to have a final test as it provided one more round of feedback. Any minor tweaks here would be needed before the Gold version release.
Some of the feedback provided during the final testing were positive regarding the animation of the dialogue and certificate of achievement. Minor tweaks were of spacings between the wordings, margin spacing, and any alignment with texts. With the final round of testing, it was encouraged that the learning experience be opened across multiple devices to make sure all aspects functioned correctly.
As a result of the project, the main feedback was that the project was relatable, clear, and professional. The users enjoyed the color scheme and animations as it made the experience a lot more interactive.
If given the chance to improve, I would like to incorporate xAPI for the users to input the email as opposed to choosing the order of the email body. This would provide a more authentic experience for the learners and to make it more memorable.
During the whole process of this project, every detail was important in the learning experience. Storyboarding, texts, animations, and questions all provided simulations of real-life experiences. To go from action mapping to efficiently providing measurable results for the SME and all stakeholders was such a big achievement.
Take a look at my other projects below!
This is a scenario-based eLearning concept project designed to help swimming instructors provide efficient feedback for their students.
Learn MoreReach out if it looks like we can collaborate! Just leave a message to get in touch.