Before & After – Customer Service/Texting Interaction (with Story file)
Here is another Before & After example.
BEFORE- the original content
Like the other interactions in this series, this comes from huge, high-visibility orientation course on workplace attitudes and behaviors initially developed by a junior developer in our group.
This particular action needed little work- the concept was fine, it just needed a bit more improvement in graphics and flow in my opinion.
Let’s review the original (text blurred to protect the organization’s material).
Intro Screen (not shown)
Standard scenario intro setup using an Articulate character: “Meet <name>. She just received a call from…”
The interaction concept is simple. The main character gets a call and needs to pick the best reply.
The user clicks the next button to get to the interaction.
Feedback is triggered instantly when the user makes a selection. This is a vast improvement on prior screens in the course that was using the “next” button as a submission trigger. However, this also creates a consistency issue. Because on this screen it actually acts as a next button enabling users to skip the interaction.
The feedback itself only has small presentation issues. Incorrect and Correct feedback are actually difficult to distinguish from one another and the Correct feedback prompt area seems to crop part of the customer service image.
AFTER – the revision
Intro Screen (not shown)
The intro screen is just a different aesthetic choice using photos and color vs the original white background and Storyline characters.
The left half of the screen animates a conversation just as a text stream would through standard phone SMS texts or popular messaging applications. I though this would be a good way to make it more current and for most users, immediately intuitive.
After the drop-target area shows, the options to drag display.If users drop a reply outside the drop target, it returns it’s original position.
The feedback triggers immediately when an option is dropped on the drop target. The columns for the customer conversation and feedback were made consistent in presentation and Incorrect and Correct feedback each have different color schemes.
The client didn’t use it- but you can!
Since the organization went in a different direction with the final version of the course, this interaction won’t be used, so I removed company-specific information, to offer you the .story file – have fun making it your own.
More to come!