Problem.
FUNCTIONAL: In order for a DIRECTV customer to actually switch wireless carriers, he must speak to a rep. We also know most users will expect to complete a process online when they've started online. How might we mitigate abandonment by creating an efficient way for a customer to speak to a call center rep?
DESIGN: The current design does not meet color contrast (accessibility) requirements and the content hierarchy needs improvement.
Strategy.
To add functionality to the Switcher Flow so the user can schedule a time for the rep to call him instead of waiting on hold indefinitely. Mobile first. This flow contains a lot of content and I need to ensure it's easily understood. If we master the hierarchy on the smaller screen, we can easily apply the design to larger viewports.
Solution.
I wanted to maintain the original structure of the flow which allowed the user to complete the entire process on one page. Being cognizant of cognitive load, I applied the chunking principle and progressive-reveal to break up the content. Then added in the new feature of collecting the user's contact info allowing him to schedule a call back from as soon as 15 minutes, up to 48 hours.
As a courtesy I also presented the product team with a list of the aesthetic issues in the original design. They updated the design as a result.
visual design / ux design / art direction / people management / process development
User test results.
- 10 of 10 participants completed the flow quickly and easily—“incredibly easy".
- 8 of 10 participants wanted earlier notification that switching requires a callback.
- 9 of 10 participants understood the benefit enough to move forward, most expecting more details before deciding.
- 10 of 10 participants liked the overall design—“Very appealing” & “Easy to follow and easy on the eyes”.
- 8 of 10 participants preferred the two page split over a single page flow.
- 9 of 10 participants quickly and easily used the grid, all liked it—“clear and easy” & “easy and convenient”.
- 8 of 10 participants preferred the grid over the list.