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
Type "Error code 614" in search bar, search Error Code 614 workflow.
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.
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.
