Spectrum wanted to add the ability for customers to self-install their internet and TV equipment using the My Spectrum app. When I joined the project, the team was building the MVP and planning to run a pilot in a test market.
As we looked beyond MVP, however, we realized that the equipment checklist screen that kicked off the self-install flow posed some challenges for all of the additional use cases we knew we’d be supporting.
The original equipment checklist screen worked great for our MVP use case: a customer that has internet and WiFi and is using the latest Spectrum equipment. However, Spectrum supports and ships dozens of modems, TV receivers and routers, and they all look a little different.
Creating unique illustrations for all possible equipment packages would be a hefty request of our small but mighty internal illustration team. We thought we might be able to programmatically show each piece of equipment within the illustration template, but a dev spike revealed that it wouldn’t be feasible.
From a research readout I received upon joining the project, I learned 64% of testers were unsure or incorrect in identifying the modem and router by looking at the equipment checklist. Because the original design didn’t explicitly associate the equipment image with its name, users were essentially guessing which equipment was which.
“In the very first part that showed the router and modem, I'd like to see them labeled to avoid confusion about their identity.”
“I was curious about what the modem and the router do specifically and why I need both.”
“The most confusing part was that I didn't know the differences between the two functions.”
The research also showed that not being able to identify the equipment resulted in users feeling less confident in being able to successfully self-install their equipment. I also knew from previous research that customers not knowing the purpose of each piece of equipment—even at a basic level—contributed to challenges in troubleshooting down the road. There seemed to be an opportunity to educate and empower at this very early stage of becoming a Spectrum customer.
Research also showed that women typically underestimated their ability to identify their equipment, while men typically overestimated their ability.
This illustration worked well for the MVP use case but didn’t scale for the dozens of equipment and service packages we’d have to eventually support.
For all intents and purposes, most internet and TV equipment looks similar, so my product manager and I wondered if we could use equipment “archetypes” based on the most common modems, routers and TV receivers in market instead of unique illustrations for the dozens of variations.
Working with supply chain, we reviewed all of the modems, routers and TV receivers in market, and chose the top three models in each category that would be illustrated. This culled our illustration list from more than 60 to just nine.
Next, I worked with our internal illustration team to create illustrations for these three “archetypes.”
Now it was time to tackle the layout of the screen itself.
I used this matrix to keep track of the illustrations and animations we’d need to cover all of the internet and WiFi equipment. This was *after* determining the “generic” renderings we’d use to represent all of the legacy in-market equipment, and doesn’t include TV equipment.
Our cross-functional, 16-person team was made up of developers, two product managers, business leads, a data analyst, and me, the sole designer. Knowing that we wanted to avoid any unforeseen snags as we scaled the self-install project, I organized a design studio to sketch ideas for the new equipment checklist screen with our entire team.
It was not only our first design studio as a team, but it was also entirely remote due to COVID. After explaining the problem statement, I used Mural to gather each team member’s sketches. Each person explained their idea, and then we voted on the ones we thought would best solve the problem statement.
Two concepts emerged as the most popular: a list concept and a swiping concept.
With these two concepts in mind, I began researching list and sliding card patterns to get a sense of how I could bring these ideas to life in our UI. I looked at several examples of different apps that use lists and/or inventories to understand best practices and also the other types of lists and inventories customers may be using day to day.
Next, I started sketching some ideas for both concepts. In the process, many questions came up:
These questions informed a lot my early explorations.
.png)
Eventually, I came up with a more solid proposal for the list concept, as well as a swipeable card concept.
.png)
At this point, I had conversations with the product manager and dev architect about the level of effort to build each concept. Fortunately, the time to build each concept wasn’t significantly different, and both concepts would scale well to support all of the use cases. Although the sliding card concept would require a bit more work, dev was on board with going with whichever concept tested better and addressed the user questions. We planned to regroup again after I’d refined the concepts.
After getting some feedback from two design peers who also worked on the app, I refined the list and swiping cards concepts.
A strength of the list concept is that you can see all or most of your equipment on screen without scrolling or swiping. A little more than 50% of new customers would have a 2-4 pieces of equipment, but 40% would have a 4-6. My hypothesis was that a list would give customers a better overview of their setup and make it easier to take inventory of what they received in their self-install kit.
However, a potential disadvantage of the list is the image thumbnail could be too small for the customer to identify the equipment in their box. I decided to mitigate this weakness by adding a bottom sheet with a larger image that appears when you tap the list item.
On the other hand, swipeable cards showed a larger image for each piece of equipment. If we were trying to improve customer identification of the equipment, perhaps a larger image was the way to go.
The obvious disadvantage of this concept was that a customer would have to swipe through all of the cards to view each piece of equipment. It may not be a big deal if the customer only has a modem and router to install, but could pose problems for larger self-install kits.
Next, I partnered with a UX engineer to create a high-fidelity JS prototype of each design, and worked with our UX researcher and product manager to develop a test plan.
We tested with 20 participants total—10 participants testing the list version of the prototype and 10 testing the card version. Here’s what we learned:
“Each equipment illustration on the ‘Your Equipment’ screen is easy for me to see.”
“If I was tested, I could easily distinguish each equipment illustration from one another.”
From the results and verbatims, it also seemed there’s a slight advantage to presenting this screen as an equipment setup “overview” that displays most of the equipment and illustrations at once (AKA the list), instead of showing only one item at a time (AKA the swipeable cards).
Overall, the list version had fewer pain points compared to the card version, and it was also easier to iterate on the list version to address those pain points. These results, coupled with the shorter time to build, made the list our winning design.
This was surprising. I’d assumed the order of the items in the list would translate to the perceived order of setup.
This was also surprising since the illustrations were bigger in the card version.
Based on testing, the next steps were clear:
This was not only the first design studio I ran on my own, but it was the first I’d done virtually due to the pandemic. To get feedback on how to improve design studios for the future, I sent out a survey to my team.
Eighty-eight percent of my teammates who responded said the design studio was a valuable or very valuable experience, and 100% said they’d participate again.
My main learnings from this experience:
“I liked that all team members can participate in coming up with a good way to solve a problem. Helps shift people’s minds into "it would be awesome if we did it this way."
Some people couldn’t upload their designs, so they emailed them to me to upload. It got... chaotic.
%201.svg)
