Self-installation ux flow
The Problem
Charter’s business team requested an effective and intuitive user flow stepping customers through the self-installation process. Because of the relative complexity of this self-installation, the flow required both informational and visual content. Due to Charter’s broad customer demographic, the flow also had to be easy to understand and quick to consume.
The Process
I worked with a dedicated development team to help determine the order of steps and accuracy of information. I worked with two UX designers and a project manager to ensure all visuals paired with the content in the most effective way possible.
The Solution
First Steps:
I wrote a warm yet direct setup screen with clear button labels to aid user expectations as well as reinforce the linear steps required. Considerations for exiting the flow at any stage, as well as the legal requirements needed to fully authenticate the process were also built into the flow’s early stages.
Terms and Conditions:
Changes to the California Consumer Privacy Information Act required the flow to include formal Terms & Conditions verbiage, leveraged directly from Charter’s legal team. I was tasked with writing and developing a modal for users who disagree.
Equipment Checklist:
Due to the complexity of the self-installation process, I felt the affordance to present users with necessary equipment at the outset was an important consideration. Our team tested imagery against iconography to determine the optimum content design. I also wrote and developed the modal for users who were missing equipment.
Self-Installation Content:
I worked with a dedicated UX researcher to discover the most effective methods for showing users each step of the process. We tested in-app videos, diagrams, sketches, and images to inform our final recommendations. In the end, a rapid animation with minimal moving parts performed the best in user testing (circled on right). I wrote all captioned content, paying close attention to word count and cross-platform layout considerations.
Status Screens:
Charter’s modem and router setup takes approximately two minutes for proper detection and authentication. Previously, the loading copy was “X” Minutes Remaining but a quick test among randomly sampled users indicated a percentage countdown was more effective. The procedural “checklist” on the bottom of the screen also provides users with a sense of progress during this wait.
Confirmation Modal and Transition Screens:
Using sparse language for in-progress confirmation steps and carefully positioning calls to action that mirror card titles, I wrote and developed interstitial screens during each step of the process. Meticulous testing indicated that users weren’t as concerned about excessive “clicking” as long as each step presented critical information.
Rapid Animation:
Breaking up the relative complexity of the self-installation process was achieved with deliberate animation throughout. It was important to inform without distraction, and the circled components of these images depict the animated aspects of the flow. The bottom buttons are native to either iOS or Android platforms (the images in this entire sample depict iOS, with a twin Android version developed alongside this final iOS iteration).
Final Steps:
I wrote confirmation screens for each equipment component that required installation, as well as the confirmation modal when everything gets completed. Affordances were given to allow users to exit the process and finish later at any time, how to contact Charter Spectrum support for missing equipment, status indication for connectivity, and a low word count to optimize the entire experience.
