AT&T Smart Home Manager
Customer Self-Install Flow Redesign
Introduction
Smart Home Manager is AT&T’s customer-facing app for its Broadband and Wireless Home Internet services. The app aims to provide users with a robust array of settings and resources to keep their home network up and running, as well as managing its various controls and permissions.
One feature of Smart Home Manager Customer Self-Install, which allows customers to install hardware themselves, from unboxing to installation to integration with their network. The feature aims to reduce install appointments and service calls by making the process as simple as possible.
Smart Home Manager’s last design felt outdated because it lacked design parity with the rest of the app, did not make use of microinteractions, and had mismatched visuals to updated hardware packaging. To aid in the ultimate goal of providing robust resources and reducing troubleshooting, I redesigned the Customer Self-Install flow to address these areas and make it more modern and efficient.
Project Overview
Goal: Modernize and update Smart Home Manager’s Customer Self-Install flow while reflecting new physical packaging design, new microinteractions, and updated design components
Timeline: 12 weeks
Role: Lead UI Designer, UX Designer
Note: For privacy purposes, the full prototype cannot be displayed within this case study
Smart Home Manager creates a way to empower users through Customer Self-Install , but the flow needed to match the new packaging design and updated AT&T design system.
Design Audit
Analysis of the Current Flow
While conducting an audit of the previous version of the flow, I noticed many areas where both the experience and visuals could benefit from updates.
First and foremost, we now had access to 3D renderings (in the form of looping MP4 clips) that could take the place of the older static visuals. My first request to the animation production team was for those visuals.
Next, we had received an updated version of the packaging for the routers being installed a short while before I took on this project. That new packaging (designed by an external firm) used distinct color and shape markers for each component and step that I thought needed to be included in the install flow itself, not just for consistency but also to add accessibility.
I then thought about how microinteractions had been utilized in other areas of the app, and realized they would add a layer of sophistication to this flow that would really pay off. I coordinated with the team’s motion designer to source lottie files for steps where those interactions could be incorporated.
Last, but certainly not least, I saw the need to incorporate newer design components that had been created and put into production since this flow’s previous design. Things like visual containers, modals, typography, and color usage did not seem consistent with the app’s other updated areas.
Below are screens pulled from the pre-redesign version of the flow:
Previous “What’s in the Box” screen version, with small images of components
Most steps of the install flow followed this format, with static images and sometimes vague text
While the router completed setup, users were presented with this generic loading screen
The network creation screen did not visually coalesce with the rest of the flow
I saw opportunities to add microinteractions, incorporate new 3D visual renders, better match the products' updated packaging, and, in general, reflect updated components and styles from our Design System.
Updating the Old Flow
Making updates step-by-step
My first mission was to meet with our team’s motion designer and relay to our dedicated motion graphics team what would be needed for this updated flow. That involved sending hardware out to that team to be digitally rendered, creating new assets for updated wires and components, and making note of specific feedback mechanisms that needed to be captured in the new video renders (cables clicking into place, lights flashing in specific patterns, etc). The goal was to make these renders as close to a 1-1 representation of how the customer would actually interact with their hardware during setup.
Next up I moved onto the concerns about bringing this flow into the updated AT&T design system. A quick survey of the design system elements revealed opportunities for a new status tracking module, an improved modal design for tooltips, and better usage of color and new rounded, friendlier content frames. I worked to implement all of these into the flow as well.
Lastly, but perhaps most importantly, was incorporating elements of the updated packaging design. Though this design was done without our input, it had incorporated a new system of assigning a number, shape, and color to each of the components that shipped in the hardware box. This felt like a bit of a hit out of left field at first, but I realized it was actually a great opportunity to make parts identification much more accessible by having multiple unique variables for each piece. I worked to incorporate these identifiers seamlessly into the flow so that they appeared in the correct order for box unboxing and installation.
The router’s new packaging included colored and numbered identifiers for each of its parts
The router itself was also assigned ‘1', the color blue, and a vertical rectangle shape, with a QR code used to initiate the install flow
I worked on the updates in order of heaviest to lightest lift, starting with requesting updated 3D renders from the motion graphics team, followed by updating the components used in this flow, and finally integrating elements of the new packaging design to make the whole flow more accessible.
These changes brought a new visual direction to the install flow that felt a bit friendlier while also giving more helpful and accessible instructions that made the steps of the install easier to follow. They also brought a level of design refinement that was already enjoyed by other areas of Smart Home Manager that had been previously updated to meet the new design system standards.
Other Updates
Install entry point
One of the primary areas where the installation flow felt dated was actually right at its entry point. Past versions of Smart Home Manager could make API calls to know when a customer had received a new router, and then push a notification to that customer to prompt them to begin the install process, but it felt clunky and sometimes didn’t execute with proper timing. Customer feedback touched on this point of the flow being confusing; how do we start the installation? Where do I go to begin setup? What if my router gets delivered and my app has no idea I even ordered it?
With a lot of the backend pieces sorted out and our new system of a scannable QR code sticker directly on the router (as part of the packaging redesign), there was an opportunity to modernize in a major way. I looked at a lot of examples of positively rated install flows that eased the nervousness and irritation that can come from new product setup, and found them to have 3 key similarities; first, they launched automatically from modals when the product was brought near a users device; second, they used visuals of the new product to confirm to the end user that the right instructions would follow; and third, they had a very warm and friendly tone that felt welcoming rather than intimidating.
With enough data collected on how other companies handled this install entry-point really well, I began re-designing our own install flow to match up the new pieces we had at our disposal; improved timing from the backend, the new QR code scan process, and a friendlier tone that better suited our updated branding guidelines and design system elements.
My initial drafts of the new install modal and entry screen
The eventual modal design put into production for scanning the gateway’s QR code
Installation status screens
An area where the flow really needed improvement was in how it treated loading, error, and success screens. I updated each of these to include an animated version of the router that mimics the exact light pattern that the actual physical router will display in each scenario. During the setup process, which can take some time in certain instances, a new shape animation plays behind the router as its light blinks, and the textline displays an approximation of which part of the process is currently in progress. The progress bar itself has moved to the bottom, joined by a time approximation value, something which the user testing team reported as a top request from customers who used the app in their research.
Updated loading screen with new time approximation and router animation
New success screen
Improved network setup
The last area where there was potential to really modernize the flow was in the network name and password setup flow at the very end of installation. The previous version of this flow used all-blue screens that felt out of place and lacked responsive error-checking. For the new version, I pulled in the new progress tracker, design system UI elements, and added active error-checking to highlight the corresponding criterion that the user’s input is not meeting. Lastly, I worked with our motion designer to include microinteractions to make the progress through this flow feel more seamless and elegant.
Updated default network name screen
Active state for naming network
Live-updating error state for password (updates as user inputs text)
The last screen in this flow was also particularly at odds with our updated design system, and it is one of the most important. This screen confirms to the user their new network’s name and password, and has a quick link to copy this information for easy sign-in on their devices. This screen had strange proportions that didn’t really emphasize the right areas, so I reworked it to prioritize readability and cohesiveness with the rest of the flow.
Previous final confirmation screen
My updated design
With these updates, the flow began to feel more integrated with our new design language and more fluid and elegant, creating a more pleasing and relaxing installation experience for customers.
Conclusion
Testing
To test these designs, my prototype and work was passed off to AT&T’s dedicated testing team. Unfortunately the tests were scheduled for after my time at the company had ended, but I heard from coworkers that later the designs were approved. I wish I could have more granular data on how users perceived these designs, but unfortunately that wasn’t accessible for me.
Key Takeaways
This design was really enjoyable as a more iterative process, and a special challenge because I had to design while combining existing pieces of UX work, UI work, and previous design decisions that were out of my control. That made creating a cohesive flow a puzzle of sorts, where all elements needed to combine in harmony and still deliver proper experience for the end customer.
Internet Providers at one point had a reputation for some of the least intuitive and accessible UX when it comes to managing and upgrading your services, as evidenced by many case studies I’ve read and studied from this field. Keeping what I’d learned from those case studies in mind while also trying to work with stakeholders and legal teams to ensure all the boxes were checked gave me new perspective on just how many teams must converge to produce these kinds of flows for the end user.
Though the process was longer than I had been used to, and involved working with dozens more stakeholders than I had ever worked with before on this scale of product, it ended up being very rewarding to see the final culmination of months of conversations, drafts, study sessions, and meetings in one tangible product. I’m very proud of myself for overcoming those challenges and producing something that I feel is a great improvement that may ease the stress and agitation of customers installing their own internet service hardware, if even a little bit.
