When Words Don't Cut It
Creating a new way to relay information in customer support systems
Client Project
18 Days
The short version
The project involved taking our clients augmented reality user interface and redesigning it to fit for a customer support system. We accomplished our goal by performing usability test on the original interface, competitive analysis, system maps and user flows. The final product is a customer support system that gives small business the ability to solve complex tasks using the video feed and annotation tools while retaining important components you would normally find in a customer support system.
See the journey below or
The Problem Statement
Some tasks or problems are difficult to explain via audio only communication such as phone calls, and not enough to convey the information needed for more complex tasks. Our client want’s to take the augmented reality software they have and convert it to a customer agent tool that will work via a mobile browser that was enabled through a software update with iOS11.
-
Usability Tests
-
Competitive & Comparative Analysis
-
User Flows
-
Wire framing on Figma & Sketch
-
User flow using new design
-
Prototyping & Usability Testing with Invision
-
UI & Visual Design
Tools & Methods
The Research
What we needed to know was how does the original platform perform in its current state as a customer support system. The usability test involved having people play a video game called “Keep talking and nobody explodes” in pairs.
The premise is simple; one person is tasked with defusing a virtual bomb that’s on a timer while another person has the manual to defuse said bomb. The catch is that neither one of them can see the other persons assets. We felt this recreated a scenario particularly well since many customer support agents are unable to normally see the problem a customer is facing. We benched mark this against an audio only test and set up post usability interviews.
.png)
The Outcome
-
Everyone who used audio only failed to complete the task within the allotted time.
-
Vital Enterprises service allowed every group to complete the task.
-
None of the testers who used the live video noticed any of the additional tools within the dashboard.
-
People didn't know how to end the call.
-
The real estate for the live video was too large.
-
The customer service agent had to continue to asking the customer to orient their phone to get a better viewing angle due to the top and bottom portions being cut off on the dashboard.
Approaching A Solution
After our second client meeting we were presented with how needed to approach our solution. We could either tailor this directly for a CRM platform likes Salesforce or Zen desk which they plan to do in the long run or plan it as a customer support system so that they can use it during demonstrations and sell it to smaller companies first?
Our Choice
We decided to go with a customer support system. Going this route enables them to have something set and ready to go sooner and can be tailored for a CRM application down the line.
The Agents Map
A user flow was created so that we could better understand the flow that a customer service agent would go through as well as to find any gaps that we were missing.
.png)
Outcomes
What we found was that we were missing a form for our customer agents to place information into and log. In case they ever need to go back and retrieve information about a particular customer. We also felt that this would be valuable information for our client when they begin to develop out the backend of this application.
Our Initial Sketches
The agent system map really helped give us an idea of what we should be expected to feature on a customer support system. After some brainstorming, this was the UI sketch we concluded might be the best first step.
Our Thoughts
-
We split the screens for the video call and the annotated screen to clearly show the distinction and ability of the two.
-
In addition, we didn't want to cover up the live feed view while an agent was annotating a photo.
-
A video control panel was to be placed in one area to minimize the amount of time looking for certain controls.
The First Wireframes
We then translated those sketches in to our version 1.0 on Figma. We used Figma to make it easier to collaborate and work on the same fils as a team.
The idea
-
The tools for the annotated tool bar are displayed to ensure the agent has quick access to the tools
-
Reiterating, we split the screen for the annotation and live feed so that the agent always has access to what's going with the customer.
-
A clearly displayed box with access to all the controls for the video screen
-
A panel for agents to input customer information as well as chat with them should they need to.
-
A customer information and chat panel that can be switched. The language conversion is something that's already built in to their AR system and a request to keep in the product.
1
2
3
4
5
5
Usability Test
We took what we had and created a prototype to present to potential users. The overall response was positive
User Feedback
-
Displaying the tools on the left side of the annotated bar was intuitive however there weren't ways for people to delete markings or figure out how to send it over to the customer.
-
The customer information panel also didn't allow for any agent input or notes. Something that can be seen as vital for continued support or transfers.
-
And lastly the icons and names were a bit confusing.
Client Feedback
Over all the client responded well to the changes we made as well as our explanations as to why we made them. However one thing came up was to possibly add a recording feature to give future customer agents. There was a long discussion about this about privacy, but we decided to test it out in a future iteration.
Reconfiguring The Layout v1.1 to 1.2
The feedback we received for v1.0 was implemented in to 1.1, tested out with additional usability testing that came back with some useful feedback that we implemented in v1.2 that you can see below.
v1.1
The agent control screen was still very clunky and didn't follow conventions we had previously establish with the tool bar for the screenshot screen.
​
In addition, we could expand the customer information and give agents a place to put in details during the call.
v1.2
This is the final version we presented to our client and they loved it. However there was one thing they wanted to change. They wanted to have it in a dark mode...
The Solution
What we came up with is a culmination of our all our research and multiple iterations and feedback from usability tests.
Original
New
Our solution hit the following points:
-
The solution is a Customer Support System so as to enable business without an established CRM to use the product.
-
This dashboard also enables Vital Enterprises to use as a demonstration & later work towards enabling it as a CRM plugin.
-
We reduced the live view real estate to something more similar to what a smart phone size would be and utilize the area around it for additional tools.
-
In ables us to separate the screenshot editing notation area from the live feed screen.
-
This reduces the need for the customer agent to ask the customer to re-orient their phone​
-
Navigation tools are no longer hidden under other portions of the screen.
-
-
The "End Call" button is clearly defined and follows normal video chat conventions.
-
Added a form for customer information as well as a written language translator.
Annotations
The Live Feed Screen
The Screenshot tools screen
