UX Process

Design Thinking - Iterative & Non-linear Process

Overview

DIRECTV Support & Customer Service website provides all the troubleshooting flows in self care and agent care services. The goal of this project is to redesign and optimize the troubleshooting flow for Local Channel Setup, Remote Control help, and Error Code 61X and 62X.

Problems to solve:

• Optimize the troubleshooting flow and simplify content steps.
• Create SVG animations to reduce flow steps and use diagrams to replace complicated text descriptions.
• Create a template library for future upgrades of design system.

My Design Process

Empathize and Define: Research and state customer needs

Data from call in support shows customers called for error code 61X and 62X more and more since the product update. The previous troubleshooting flow is too complex. Most customers don't have patience to go through all the steps in the flow which cause them to call support. This increases workload of support agents and results in some customer loss and increased negative complaints.
‍
1. Customer needs a easy to understand troubleshooting content for the error code 61X and 62X.
2. Customer needs a clear diagram or animation to guide the user to setup local channels or remote control.

Ideate: Use diagram and interactive SVG animations

• Clarify main steps for troubleshooting, and list root causes for the error code.
• Create SVG animations to reduce flow steps and use diagrams to replace complicated text descriptions.

61X Before

Prototype:  61X After

Workflow deployed on DIRECTV support website.

62X Before

Prototype:  62X After

Highlight:

• Simplified and reduced the number of troubleshooting flow steps.
  
• SVG animation can be controlled by customer, with video control bar created using JavaScript.
  
• All animations are vector illustration graphics to make designs and content consistent. Replaced all raw images and videos.
  
• There is no load on website traffic for running these SVG animations even though some animations are almost 1 min long. SVG animations size are all less than 500 KB.
  

Workflow deployed on DIRECTV support website - Get help with DIRECTV connection errors.

Result:

• Optimized flow's user experience, made content more clear and easier to follow.
  
• Used SVG animation and vector illustration to make all designs consistent.
  
• DIRECTV gets less customer calls for Local Channel Setup, Remote Control Help, and Error Code 61X and 62X.
• Created a template library which all flows conform to.