Background
A Versatile Guided Video App for Field Workers, Supervisors, and Now—Their Customers
Vyn SmartVideoNotes is a guided video recording app used by utilities, gas, and water companies all across the UK and Europe for a multitude of use cases. Customers use the platform to record issues in their home or products and field workers can use the platform for almost any problem like recording their work before and after completion for audit purposes. Our users range from people in offices on desktops like office/depot supervisors and call centre agents to people on their mobiles like customers at home creating complaints or field workers working offshore.
My Role
As the Product Designer, I liaised with the Director of Engineering, Head of Product, the Customer Success Team, and Engineering Leads for 2 months to ship the redesign. Our stakeholders was our client's Quotes Team, Head of innovation, and the Depot Team.
The Problem
The Requests Feature: Expanding a Field Work Oriented Product to Customer-Facing Problems
Our gas client has over 5.9 million customers with over 10,000 new customers joining annually for new gas connections from it's 74,000km of pipes. Getting new customers onboard is a surprisingly complicated process with pricing dependant on the customer's proximity to the gas main and who owns what part of the street.
Our client had approved to pilot an MVP of the platform along with a new Requests feature which would enable customers to survey their own home by recording a self guided video which would then be attached to their new gas connection applications. This was thought to reduce the number of surveyors sent out to do physical site visits, providing faster quotes as well as more accurate quotes for all applications. This saves potential millions in fines from the industry regulator who fine companies that do not return customer quotes within 24 hours.
However, after the initial pilot the client found that only 20% of physical site visits were prevented. The Head of Product and I went on a hunt to figure out why.
Constraints
How did we get here? Often, the Customer Success and Sales team are working under high pressure to sign deals, so many times the Product team are not informed of pilots. We were coming in after an initial MVP had already been released, which meant it would be hard to change organisational processes that were already approved by stakeholders.
The Process
Understanding the Users & Their Process
When a customer decides to hook up a building to a gas line, they will go on the company's website or call to fill out an application and receive a quote on how much it will cost to do so. As soon as this application is submitted, it sets off a 24 hour countdown for our client to respond. Otherwise their CSAT scores will plummet and they will face a fine from the industry regulator.
To deal with these high stakes, a team of Quotes Agents--our primary users--sit in an office in England to track applications and pass it through to the relevant region's Depot Team. The Depot Team will then respond with a quote or decide to send a surveyor to the customer's home for more information. The End Customer is then sent a quote from the Quotes Team.
Quotes Agent
Uses Requests to send a request to the End Customer to record a survey video of the area outside of their home
Depot Member
Views the End Customer's videos and gives the Quotes Team a quote. Determines if a surveyor needs to be sent out.
End Customer
Applies for New Gas Connections. Receives Request to record video of the area around their home
Understanding the Problem
A General Sentiment of Dislike
My plan of action for our visit to our client's office was to 1) observe how the Quotes Agents worked with the platform and 2) conduct interviews to figure out their pain points with the ultimate goal of finding out why they were still sending out so many surveyors.
As soon as we spoke with a few of the agents, I could feel their stress and their general pessimism towards the product. This was further compounded by the first few words they used to describe the product:
"I don't mean to be rude, but I just don't like it."
“It felt like management just plopped this down on us and told us to use it.”
“There are too many finicky things that don’t help us as much as we want it to.”
Fair enough. But why did they feel this way? Through observing their process and interviewing them, most of their problems could be categorised into 2 main issues: 1) The rushed design and development resulting in bugs and 2) The user took a different path in the UI than expected when completing tasks
Rushed Design & Development: A UI Unfit for Quick Tasks & Rote Work
The MVP had been a Frankenstein of old unused features and Bootstrap components to get the feature out as quickly as possible. This posed many problems for our Quotes Agents. Their job requires switching between tabs quickly, copying and pasting form fields, and tracking multiple different applications, videos, and email exchanges.
The first main pain point was at the time of creating a Request. There were 10 required fields where the Quotes Agent had to copy and paste for tracking purposes as there is currently no integration capability with their existing work management software. If the user were to click anywhere outside of the window, which happened often because they were switching between tabs to copy and paste, the form would close and not save any of the fields they have filled.
he MVP had been cobbled together with existing features and Bootstrap components which meant they posed quite a few problems. First, the table to track which Request was sent was difficult to scan quickly because of the cards structure.
An Unexpected User Flow
Second, the Quotes Agents had created a Desire Path by creating a manual workaround for searching and tracking progress on relevant videos. Instead of checking the Requests page, they would go to the Feed where all the videos coming onto the system are stored and manually search using reference numbers since there was no search function on this page. This meant that we were not showing the relevant information on the table and not providing a relevant search option.
The Quotes Agents would also use an Excel sheet to write down the reference number and the status of the Request--whether it was sent, recorded by the End Customer, reviewed by the Depot team, or closed. To track this progress, they would go to the Feed and look at the number of comments on the card to see whether the Depot Team has commented on their feedback.
The Solution
Because of my lack of access to clients I could regularly test and iterate on, I relied internal company reviews and the CS team to test my ideas.
Fix UI Bugs & Reduce Moments of Rage
As mentioned before, there was some low hanging fruit that could be easily polished. For example, all we had to do was disable triggering the closure of the popup wizard when anywhere outside of the modal was clicked. We also reduced the number of mandatory fields the Agent would have to fill in before sending the Request to the customer by only keeping fields such as name and application number and ensuring that they change their workflow to attach the link to the Vyn within the overall Job in IBM Maximo.
Reducing Cognitive Load with Better Tables & Status Tracking
Because of the speed at which they were working, the Bootstrap card design was also hindering their scanning ability as some columns did not wrap the text evenly so people found it hard to find relevant information quickly.
I proposed a simple solution of introducing status labels on the Requests page. However, this would require immense backend engineering work so I created a workaround method where if there was a video captured against the request, we would show the count of the videos recorded. I also proposed a tab at the top where users could switch between those requests with no videos recorded and those with at least 1 video recorded.
In-App Notifications
Although we had already enabled email notifications, we found that checking email was an action with high time and cognitive cost for the Agents as they are racing against a 24 hour window to review and close quotes and have to constantly be monitoring Vyn and IBM Maximo, switching between tabs to work as quickly as possible.
We decided it was time to create an in-app Notifications panel as other customers were also requesting this feature.
Outcomes & Learnings
With all of these new components in place, we developed and reintroduced the feature within 1 month after we had conducted our usability tests and in-depth interviews. The CS team tracked the following metrics for around 3 months after the release of the feature.
70%
Reduction in Physical Site Visits (prev. 20%)
75%
Adoption by End Customers (prev. 60%)
9.29
OFGEM Customer Satisfaction Score (prev. 8.24)
Directly from this work, we found improvements across all metrics particularly in the actual reduction in site visits which was the ultimate goal of this product. Furthermore, the improvement in ranking in industry regulated rankings meant that the company would pay less fines than previous years.
Because of this feature, Vyn have also signed on two additional clients with this solution as the sole product they are using. We have expanded this solution to other use cases like sending new jobs to field workers who are already out in the field and sending out surprise safety and Chapter 8 Signage checks for audit purposes. Each client has increased their industry regulator rankings similar to our original gas client.
Learnings
-
Ensuring UX Presence Across Teams: As UX professionals we all implicitly understand the benefit of UX first, but it's easy to have things fall through the cracks in a less organised, low UX maturity company. As a team, we have created design strategy and operations from this learning.
-
Nifty Research is Better than Nothing: Getting access to the client was an arduous process internally because we had not established the buy-in from higher ups. I only had one chance to interact with the clients, but I relied on internal testing with open minded colleagues to fill in the gaps.