G.I.F.T. Steps for Customer Service
This is an immersive scenario-based eLearning course designed to help improve customer service satisfaction rate by providing easy-to-follow actionable steps for the Customer Service Staff.
My Roles: Project Lead, SME, Instructional Design, Data Collection and Analysis, Action Mapping, Storyboarding, Visual Design, Mockups, eLearning Development
Tools Used: Articulate Storyline, Adobe XD, Vyond, Miro, Google Docs
Project Details
I started off by conducting a kick-off meeting or a project sponsor interview to understand the business problem and objectives. To achieve this, I gathered all necessary information including stakeholders’ needs, project constraints, and an overview of target learners.
Business Name:
Dubai Skyline Metro
Business Problem:
The customer satisfaction rate for quarter 1 (Jan to Mar 2023) is 57.25% which is lower than the target KPI of 85%. The survey is conducted monthly by the Customer Experience team targeting to gather passengers’ feedback on the 4 elements: customer service, cleanliness, punctuality, and facilities.
Business Objective:
To meet the customer satisfaction KPI by the end of quarter 3 by increasing the customer service element rate by 15% as customer service staff proficiently follow the new GIFT steps of customer service.
Project Description:
This project targets the improvement of customer service elements and will give staff the knowledge and skills required to effectively perform in line with the new GIFT steps of customer service introduced by the Customer Experience team to help staff deliver better customer service.
Audience:
All 60 customer service staff (55 customer service agents + 5 customer service supervisors) from all 5 stations.
Constraints:
Three-week training development time
Four-week training delivery time
No extra budget for training venues, transportation of trainer and learners, and overtime payment
Lack of manpower (difficult to release staff from their roster to attend the training)
The new GIFT Steps for Customer Service:
Greeting customers and offering assistance verbally with a smile, and positive body language, and acknowledging them with eye contact
Identifying customers' needs through active listening, questioning, and observations, and showing empathy towards their concerns or inconvenience
Fulfilling customers' needs/ fixing customers' problems by offering appropriate solutions aiming to exceed customers' expectations and confirming accuracy by using the station information leaflet when required
Thank customers verbally and sincerely with a smile, positive body language, and eye contact and invite them to return
Work Process Summary
(click on each drop-down section )
ADDIE
To build effective training and support tools, I followed the ADDIE model (Analysis, Design, Develop, Implement, Evaluate). The model helps me to identify the learning need in a structured way and to ensure that all learning activities serve that goal.
Analysis and Design
Target audience (WHO)
My Learner Personas are based on the data collection and data analysis of all 60 customer service staff (55 customer service agents + 5 customer service supervisors) from all 5 stations. This approach enables a more personalised and relatable learning experience that is accessible to all learners.
LMS database provides me with information on the learners' training records, exam results, training feedback, and training history. This data can help identify my learners' knowledge, experience, and training preferences.
On-site observation is another valuable source of data as it provides me an opportunity to observe the learners' behavior and performance in real time. This approach allows for a more accurate understanding of the learners' strengths and weaknesses.
Interviews with SMEs (Subject Matter Experts) provide me with valuable insight into the learners' needs, preferences, and goals.
Staff survey helps validate the results of my interviews and observations. This approach provides a standardised set of questions, ensuring that all staff members provide the same information. Staff questionnaires also provide an opportunity for staff to provide feedback and information in a structured manner, making it easier to compare and analyse the results.
Design considerations
In this case, two distinct groups of learner personas have been identified. The first group consists of staff members with less experience and knowledge in customer service who are eager to learn and grow in their careers. The second group comprises staff members who have been in their roles for a long time and prioritise other commitments over career growth and training. I collected data in the below 4 areas from all targeted audience.
Experience and Knowledge
Demographics
Accessibility and barriers
Preferences, Goals, and expectations
The data of all learners suggests below key considerations for training design:
There is a mix of experienced and inexperienced staff in the customer service area.
They have a good understanding of the subject matter.
They have a good level of English proficiency, indicating that language is not a barrier to learning.
They prefer online self-paced training which is suitable for their shift schedule and availability.
They have access to laptops and/or smartphones.
They have experienced attending online training courses.
They do not have disabilities or learning difficulties.
They are willing to attend all training provided. However, some may only attend mandatory training related to their job roles, indicating that they may not be as motivated to attend optional training.
Learning outcomes (WHY)
In the training analysis phase, I conducted an interview with the project sponsor to identify the business problem and objective. This information was crucial in determining the project requirements and target KPIs for the project.
To identify the training gaps and possible solutions, I analysed various data sources. The Customer Satisfaction Survey results were used to gain insight into customer satisfaction with staff performance and behavior, thereby identifying areas for improvement (learning gaps).
Moreover, I reviewed the existing training materials and evaluated the new GIFT steps using Action Mapping. This review helped to identify gaps in the current training and determine if the new GIFT steps were a comprehensive solution for all identified learning gaps.
The rationale behind the learning outcomes
By using action verbs that reflect the level in Bloom's, the learning outcomes are learners-centered statements that focus on what I wanted the learners to know and do by the end of the training program. In this behavioral change training programme, I am getting the learners to the Apply level where learners can implement their new knowledge and demonstrate excellent customer service in line with the GIFT steps. I utilised the ABCD structure to craft well-written learning outcomes that are measurable.
Modular framework (WHAT) and Mode of delivery (HOW)
Modular framework
The identified Learning Gaps, Solutions, and Learning Outcomes help to identify training modules and topics (WHAT). The modular framework was constructed using a top-down approach, with topics selected based on their alignment with each desired learning outcomes.
This training programme has one module and the emphasis of the training is geared towards a practical application which is topic 4 which enables the learners to succeed in this behavioral change training.
Mode of delivery
Digital Asynchronous training (self-paced eLearning course) has been identified as the most feasible mode of delivery to accommodate the staff's shift schedule, preferences, accessibility, and the constraints which are limited on staff members' availability due to shift timing rotation, project timeline, staff travel time, budget, and manpower.
The primary goal of the program is to facilitate behavioral change, with an emphasis on learners being able to correctly apply and demonstrate the GIFT steps. As such, the training is geared towards practical application, allowing learners to learn through their actions and consequences (immersive scenario-based activity) rather than relying on theory lectures. Action-based microlearning sessions are also regularly administered to provide behavioral prompts, encouraging learners to practice various scenarios in everyday situations that lead to the desired behaviors.
The below factors are also taken into consideration and decided upon.
Learning platform: The training program will be launched on the company's existing Learning Management System (LMS), where all staff members already have access to complete the training and have their training progress tracked.
Accessibility: The LMS can be accessed via smartphones and laptops which accommodates all staff members' accessibility. Also, to ensure accessibility, staff members will have the flexibility to participate in the training at their own pace, within a specific deadline, using either their personal smartphones/laptops or work smartphones/laptops that are available in all station offices.
Training schedule and duration: Suitable time during working hours will be allocated to complete the training, and no staff member will attend the training outside of their working hours to avoid overtime payments and staff fatigue.
Action Mapping
After receiving approval on the Learning Outcomes and Macro design from the client, I used Cathy Moore's Action Mapping to create a streamlined set of actionable steps that the staff members need to perform to exhibit the desired behaviors. The mind mapping created will serve as the foundation for developing the storyboard and content of each training topic in the Design (Micro) stage.
In this phase, I acted as a Subject Matter Expert (SME) drawing on my experience as a former senior customer service supervisor. I utilised Miro to create a sequence of actions aligned with the new GIFT steps and the desired learning outcomes.
Wireframe
The wireframe acts as a visual blueprint for the course's layout, indicating the number of screens and how they flow together as prerequisites of each other. Knowing the quantity of screens enables me to plan the number of working hours required for course development in advance.The wireframe, serving as the basis, incorporates section and screen numbers* that greatly assist in smooth navigation and tracking throughout the process of developing the screenplan and storyboard. Guided by DLI wireframe template and following the ID Principles, I commenced the course with an anticipatory hook, highlighting the benefits of completing the sessions. This was followed by an activation phase, which included a recap activity serving as a knowledge check and encouraging learner engagement and ownership by having them creating a reference card by themselves.
Next, I introduced the navigation and toolkit, demonstrating how to access supporting resources. The learners' answers from the recap session were transformed into a GIFT Steps Reference Card, fostering a sense of pride and engagement. Additionally, a Station Information Leaflet was introduced as a guidance tool throughout the session.
Next is Scene with branching scenarios using the 3Cs framework. Each challenge presents learners with multiple choices and demonstrates the consequences of their actions. The feedback provided guides learners on how to improve and make better choices. Completion of each challenge is a prerequisite for progressing to the next, eliminating Next button function to skip any screen.
After completing all the challenges, a summary session provides positive feedback and reflects on the impact of each GIFT step on customer satisfaction. The training concludes with the introduction of the next steps in the learning journey, including micro eLearning sessions and on-site summative assessments by supervisors. Learners are also given the option to download the GIFT Steps Reference Card for future reference.
Screenplan
Once the wireframe has been approved, I moved on to the next step which is a screenplan that provides additional information about the purpose of each screen and how the elements will be arranged. Drawing inspiration from the DLI template, I have developed a customised screenplan template that closely aligns with my storyboard template to ensure a smooth workflow and a seamless transition from the approved screenplan to storyboard creation. My screenplan includes the following elements:
Course Name, Course Topic, Learning Outcomes
Version History (showing creation and revision dates, as well as changes made to track revisions)
Table of Contents (for easy navigation, containing sections, screen numbers, and titles corresponding to the Wireframe)*
Section number, Screen numbers, and Screen Titles of each screen
What happens on the screen? (explaining the purpose of each screen, types of exercises, etc. Since I am already familiar with Articulate Storyline, I was able to break down this session into different layers that will be included in each screen)
Type of activity and function (featuring icons representing various types of activities and functions to facilitate easy identification of the required media needed to be prepared. These icons will indicate the specific media needed, such as visuals, animated videos, sound effects, and more. Additionally, the icons will also provide information on the number of activities that need to be prepared, including options like fill in the blank, drag and drop, etc.)
Rapid design (displaying black and white rough designs of how the screen will look like)
Sound effects explained (describing the type of sound that will be added to the layers/screens)
Footer (providing page numbers, my logo, and home button to go back to the table of content for easy navigation)
Storyboard
After the screenplan has been approved, I utilised it as the foundation to develop a storyboard for each screen. I opted for a visual storyboard rather than a text-based storyboard for comprehension. Using my own template, my visual storyboard is comprehensive and self-explanatory, aimed at facilitating the developer's understanding of the screen sequences and enabling easy development of the visual mock-up and prototype. The storyboard contains:
Course Name, Course Topic, Learning Outcomes
Version History (showing creation and revision dates and changes made to keep track of revision)
Table of Content (for easy navigation containing the section numbers, screen numbers, and screen titles that align with the Wireframe and Screenplan)*
Section number, Screen numbers, and Screen Titles of each screen
Full texts/ scripts for the On-Screen Text (OST) including button labels
Visual Notes (describing in detail the visuals shown on each layer of the screens)
Programming Notes (narrating in detail the animations, triggers, and prompts on the screens)
On-Screen Graphics (screenshot from the visual mock-up for obvious looks and feels of the screen)
Voice-over/ Sound effects for each screen (I chose not to include voice-over which will be the repetition with the OST dialogues to avoid cognitive overload and instead, I chose the include visual + text + immersive sound effects only)
Footer (providing page numbers, my logo, and home button to go back to the table of content for easy navigation)
Visual Mockups
The visual mock-up and the Storyboard go hand-in-hand, complementing each other in the course development process. The visual mock-up takes the Wireframe and Screenplan a step further by incorporating visual design elements such as colors, typography, images, and branding elements using Vyond and Canva. This enhances the realistic representation of the final product's visual appearance. I utilised Adobe XD for the visual mock-up to experience the flow of screens together, ensuring consistency across the background, text sizes, and all visual elements as the project was developed in Articulate Storyline.
Creating mock-ups for all screens is not necessary. In this case, I focused on developing mock-ups for several key screens based on the rapid black and white design in the Screenplan. These selected standard mock-ups will be duplicated and utilised throughout the course development process. For example, by creating a mock-up for the main background, it serves as the foundation upon which the rest of the screens can be built. Other significant mock-ups include the Gwen dialogues screen, which showcases interactions and conversations with the character Gwen, and the 3Cs screens, which illustrate how learners encounter and engage with challenges, make choices, and experience consequences based on their decisions.
Develope
Interactive Prototype
Once the Storyboard and the Visual mockups have been finalised and approved, the next step involved developing an Alpha Dev prototype using Articulate Storyline, initially without audio. At this stage, I was able to comfortably proceed with developing each screen, closely following and replicating the detailed layout outlined in the approved Storyboard with screen numbers and screen titles that align with the Wireframe, Screenplan, and Storyboard.* The prototype was then uploaded to the Articulate Review platform, where stakeholders, subject matter experts (SMEs), and a target group of Customer Service staff reviewed the prototype and provided valuable feedback. Based on their feedback, revisions were made, and a fully functional Beta Dev prototype with audio was created. A pilot group of ten audience (Stakeholders, SMEs, Customer Service staff, and L&D experts) tested the Beta Dev and provided feedback through the Articulate Review platform. Please note that on the recap drag and drop activity screen, a skip button is provided for the reviewers/ DLI assessors only. In the actual course, learners will not have the option to skip the activity.
I am already quite familiar with Storyline and have been learning and practicing various functions, such as variables and conditions, drag and drop, layers, custom menu, etc., through resources like the Devlin Peck YouTube channel. This project provides me with an opportunity to apply and utilise the knowledge gained from these resources. As a result, I have made significant improvements in working with Storyline by the end of this project.
As a back up for this project submission, I produced a screen record of my prototype using Clipchamp app and uploaded it on my GoogleDrive and Youtube channel.
*Benefits of aligning the screen numbering in the Wireframe, Screenplan, Storyboard, and Articulate Storyline:
Firstly, it ensures smooth progress and easy tracking throughout the development process. Secondly, it promotes clear and efficient communication among team members, stakeholders, and subject matter experts during the review and feeback. Thirdly, it facilitates accurate documentation, serving as a reliable reference for future updates and revision history log. Lastly, it optimises workflow efficiency by enabling seamless navigation between the storyboard and Storyline, resulting in improved productivity and reduced errors.
My design process and features
On-Screen Text (OST)
I utilised OST for dialogues and feedback, with the character Gwen speaking to the learners (not at them) in an active conversational style throughout the course. I was mindful of cognitive overload and ensured consistency in UK English grammar, spelling, and punctuation. Following the principles of Universal Design for Learning (UDL) regarding language and symbols, I used localised company language and terminologies while keeping the language simple.
Writing Effective Learning Scenarios and the 3Cs
I paid careful attention to crafting each scene which is based on real workplace situations, actual staff actions, and common customer complaints, making them more relevant and meaningful to the learners. I ensured the use of relatable characters that staff often encounter in the workplace, such as tourists. When setting the scene, I incorporated details like the location, and crowded situation, and provided a thorough description of the customer's character to make the scenario more relatable to learners and encourage them to be observing at the real workplace. To reinforce behavioral change, learners will be asked to select the actions they would take instead of selecting what they would say. However, once they select an action, the next screen will demonstrate how they might express it to the customers verbally.
The 3Cs (Challenge, Choice, and Consequence) are based on data derived from the Action Mapping mentioned in Appendix 1 (the purple section on the left) based on inputs provided by SMEs. This data leads to a clear identification of specific actionable steps within the GIFT framework, accompanied by suggested scripts that I utilised to write the dialogues for the On-Screen Text (OST). The key is to avoid easily guessable answers. The choices need to be well-crafted and challenging enough for learners to demonstrate the knowledge and understanding we are assessing. When writing the consequences, instead of simply telling learners whether they are right or wrong, it is better to demonstrate the consequences through facial expressions and actions (e.g. a frowning face and angrily typing feedback on the phone, etc.).
Additionally, the customer's written feedback on the survey with a 1-star rating is displayed, followed by feedback from Gwen,the customer expert. I strategically crafted Gwen's feedback in a manner that offers guidance to the learners without simply providing them with the answers. Also, it is best to present the worst-case consequence that could have occurred, as it prevents the learners from performing that action in real life (How to Craft Awesome E-Learning Scenarios - E-Learning Heroes, n.d.).
At the end of the course, there is feedback that reflects how the staff's behaviors have impacted the customer experience. This feedback is broken down to highlight the impact of each step (GIFT), emphasising once again the benefits of following the GIFT steps.
Sound Effects
I have added various sound effects throughout the training. For example, a phone typing sound accompanies unhappy customer's feedback (click play to see the video clip), a PA chime sound is played in the concourse area, an applauding sound accompanies positive feedback, a ding chime indicates when learners receive a star on the customer satisfaction meter, a busy crowded sound is used when introducing a crowded concourse scene, etc. Theses consistent sound effects ensures immersive learning experience throughout the course.
Imagery and Videos
I followed the principles of C.R.A.P. (Contrast, Repetition, Alignment, and Proximity) when designing the visuals. I ensured the use of grids and rulers for perfect alignment across all screens. I included font styles and sizes, buttons in normal and hover states, the logo reflecting the client's branding, the appearance of the toolkit bar, the main background resembling a station concourse and station equipment to closely mimic the actual place, and most importantly, a color scheme reflecting the client's branding. Using the client's branding elements throughout the visual design ensures standardisation and consistency which makes it more relatable to the learners as it mirrors their actual workplace, providing a familiar look and feel.
I created images of scenes, characters, and short reaction videos using Vyond to simulate real-life scenarios and characters in the workplace. The main staff characters resemble their actual uniforms and grooming standards, creating a stronger connection for the learners. Additionally, I introduced Gwen, the customer service expert who guides and provides feedback throughout the sessions.
All characters' body language and facial expressions change according to the actions in the scene and how they react to the action as a consequence. For example, the customer shows an angry face when receiving poor service.
Other features
At the start of the session, learners are prompted to type their names. Throughout the session, using a variable function in Articulate Storyline, the learners are addressed by their name creating a more immersive experience.
Following the principles of Universal Design for Learning (UDL) for perception, the learners perform a sound check by playing a bell sound at the beginning of the session. This ensures they can adjust their speaker volume accordingly.
The information on the GIFT Steps Reference Card and the Station Information Leaflet was carefully designed to be utilised as a source of answers throughout the training including day 2-10 microlearning sessions.
The toolkit elements (The GIFT Steps Reference Card and the Station Information Leaflet) also have practical applications, as they would be made available as hard copies in the ticket office, preparing staff for real workplace scenarios.
I introduced the Customer Satisfaction Meter as a form of positive reinforcement during the session. This meter is utilised when learners choose the correct course of action, showcasing their ability to contribute to real-life satisfaction rate improvements.
The training covers additional workplace behaviors that require improvement, apart from customer service. These include aspects such as handling customers' belongings, familiarity with station facilities and events, and not leaving the Ticket Office unattended, etc.
Results & Takeaways
Positive feedback
The audience expressed their appreciation for several aspects of the session. Firstly, they valued the function that allowed learners to enter their names, enabling personalised addressing throughout the session. Additionally, the sound check created an immersive experience for participants.
Secondly, the audience highly appreciated the clear introduction that effectively set the scene and provided a clear understanding of what to expect from the course. Additionally, they found the recap activity to be a great hook, as it allowed learners to reflect on their current learning progress.
Furthermore, they were pleased with the inclusion of the GIFT Steps reference card, which they could complete themselves and access in the toolkit bar for reference throughout the session. The audience also loved the enhancements made to the Station Information Leaflet, both in terms of design and the information included. They appreciated the use of the leaflet throughout the training session, as it encouraged the habit of referencing it for accuracy and reduced dependence on the on-duty supervisor.
Also, they expressed their admiration for the design, which aligns with the company's branding and closely resembles the appearance and atmosphere of the actual station environment. The incorporation of staff grooming standards in the design made it highly relatable to the audience.
Areas for improvement
Feedback# 1: There is no "Back" button to go back and revisit the scenarios and challenges. The learner might click the "Continue" button by mistake as well and have no chance to go back to the previous screen.
My action: In the second revision of the prototype, I addressed the issue by simply adding a "Previous" button where necessary. This enables learners to go back and revisit the scenarios, dialogues, and instructions without losing the prerequisite sequences, as reflected in the wireframe.
Feedback# 2: The choices and dialogues of Challenge#3 are too wordy and can be overwhelming to read and digest, especially towards the end of the training session.
My action: I revised the OST (On-Screen Text) of Challenge#3 to make it less wordy while still conveying the intended message.