before & after, storyline

Before & After – Customer Service/Texting Interaction (with Story file)

Presentation1 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 original designer animated the left half of the screen to render a few seconds before displaying the right half.

The user clicks the next button to get to the interaction.  

Then, the user clicks one of the 3 options, and the feedback is triggered instantly.



  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. cust_serv_orig_incorrect cust_serv_orig_correct  

AFTER – the revision

[button title=”click here to see this in action” type=”linkbutton” color=”blue-lite” url=”” target=”_blank” ]

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.

Left side animates like a text app. Then the right side displays the options for the drag-and-drop interaction.

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!