This is an eLearning tab interaction that provides a quick guide to de-escalating upset customers. Users can click on the tabs to learn tips for each step of the de-escalation process.

Customer service agents are often on the front lines of customer interactions. Sometimes handling angry or upset customers can be emotionally draining. Learning de-escalation skills can not only improve agents' job satisfaction, but it can also reduce burnout by providing them with tools to handle challenging situations. Having these skills help agents manage their stress levels and maintain a healthier work environment. 

De-escalation skills also help in raising customer satisfaction. A customer's overall satisfaction increases when they feel heard and understood. Happy and satisfied customers are more likely to continue doing business with a company. 

I determined that creating a quick reference guide would help customer service agents to remember how to de-escalate a customer.

Numerous online resources were at my disposal, but to ensure a learner-friendly experience, I carefully selected the six most commonly recommended de-escalation tips. For each of these key points, I crafted easily comprehensible explanations. To enhance the visual appeal, I curated relevant images from Adobe Stock to complement each section 

Upon finalizing the storyboard, I proceeded to craft a series of mockups using Google Slides to visually demonstrate the tab interactions. These mockups served as a canvas for me to explore various image options and color schemes.

Ultimately, I opted for a palette consisting of darker hues, effectively contrasting them with crisp white text. This choice not only allowed me to experiment with images featuring vibrant color schemes but also placed a strong emphasis on the images themselves, rather than the colors of the tabs. I believed that opting for brighter colors might have resulted in excessive clashes, detracting from the overall user experience.

Taking on the project presented a fresh challenge for me, as I had limited prior experience with motion paths in Articulate Storyline, necessitating a degree of experimentation and trial and error.

My approach began with the setup of the rectangle shapes designated as tab buttons. Following this, I configured individual variables for each shape and introduced grid lines to provide guidance for the termination points of each tab's motion. Subsequently, I concealed tabs 2 through 6 and introduced the corresponding image and text for tab 1. To streamline the process, I grouped the image and text with its respective tab and established motion paths for both tab opening and closing animations. This sequence was then replicated for tabs 2 through 6.

In the final steps, I incorporated triggers linked to the variables, enabling the tabs to seamlessly open and close upon the user's interaction with them.

My project garnered enthusiastic praise from both my peers and fellow instructional designers within the community. Users expressed their appreciation for the engaging interactions and the dynamic functionality of the tabs, drawing parallels to the accordion feature in Articulate Rise but with a greater degree of customization.

To maintain a clean and sophisticated aesthetic, I deliberately pursued a minimalistic design approach, prioritizing the user experience. I set out to test my skills by meticulously fine-tuning the motion paths, ensuring they operated flawlessly and seamlessly throughout the project.