App-Based Router Setup
The innovative Linksys app-based router setup that initially rolled out with Velop has grown to be the standard for all future Linksys routers. It is used thousands of times a day.
This unique app-based setup takes advantage of Bluetooth and cellular data for a truly seamless user experience, and is the first to market to take into account the user’s modem type to provide specific wiring instructions.
After shipping app-based setup in our newer products Linksys’ Net Promotor Score doubled, and Linksys moved to 1st place in Overall Satisfaction among all router manufacturers in the J.D. Power Wireless Router Satisfaction Report.
“The installation was incredibly simple… The easy to use app is all you need to setup the system and manage it… "
“I have never, I repeat never had a setup of anything go so smoothly and be so easy, other than maybe plugging in a toaster.”
“I love the Velop system, the setup was a piece of cake… the application LITERALLY did everything for me."
Like most projects, I took a multidisciplinary role here that included managing the 10 person design team, acting as co-product manager and getting my hands dirty with the engineers.
I managed the team of 7 UX designers and 3 UI designers who were responsible for conceptualizing and designing the app-based setup experience.
As the co-product manager, I defined the key product features and requirements, wrote the functional specifications and design specifications, set priorities, helped guide development, wrote JIRA stories and negotiated compromises.
Reviews made it clear that the existing Linksys setup experience was a make-or-break moment for customers. I started by digging into what caused setup to go wrong.
I conducted more than 20 in-home studies where we brought new routers into people’s homes and asked them to set them up while we observed without aid or commentary.
I set up a system of email surveys for new customers sent 3 days and 14 days after purchase to capture customer issues with our product and setup while they were still fresh.
Around 90% of users needed to search online for instructions on how to access their router.
Most didn’t know why they had to put “weird numbers” in the browser address bar to access their router.
They were confused when told to use a web browser to setup their router when it wasn’t yet connected to the internet.
Users didn’t understand the difference between a router and a modem.
People got lost if they had an all-in-one modem-router and the setup instructions treated them as separate devices.
Simplify router setup to avoid key wi-fi connectivity and wiring pitfalls and make it both more efficient and as enjoyable as possible.
The new app-based setup was engineered to not rely on Wi-Fi, because that led to more connectivity errors and confusion in our research and testing.
Wiring instructions were moved from the paper quick start guide to the app and customized, animated step by step instructions were designed based on a user’s specific conditions.
Complex concepts and tasks were simplified and broken into small digestible steps with friendly illustrations and animations every step of the way.
The new setup was designed to break. Every home and every user is different and mistakes and errors can occur, we invested most of our design effort in building troubleshooting flows that help users get back on the right track.
An early outline of the proposed app-based setup process
I worked with our firmware engineers from the start to design a system that hides nearly all of the complexity of setup from the user.
I worked closely with the firmware engineering team to create a mechanism that uses bluetooth and the app’s cellular data connection to our cloud to establish a secure backchannel to the router that doesn’t rely on wi-fi, making the setup experience seamless for our users, even though the wi-fi changes names and restarts as it is being configured.
I designed a system to secure the router’s default password without users needing to configure it during setup and a unique password reset PIN system so users could reset lost passwords without needing to factory reset and setup the product again.
I designed and patented a mechanism for identifying if users have placed their routers the optimal distance apart that included helpful, animated instructions for recovering if things are too close or too far.
We brought in over 500 participants to our usability lab to setup routers using our prototypes, iterating and refining our designs every step of the way.
I helped organize a regular testing cycle of 4-5 participants a week and encouraged the designers to be in the room with the participant when testing occurs (along with a researcher).
There were a lot of surprises along the way. Click the images below to see a few key areas that were rethought as a result of testing.
Refining wiring instructions
Testing revealed that being too specific in our wiring instructions led to more stress and confusion.
Refining placement helper
Testing showed that visualizing the actual signal strength data made users think the data was real-time. As the it took time to reanalyze data we found removing the visualization and focusing on the instructions helped users to better troubleshoot.
In testing we found that our initial attempts at playful copy were met with frustration as our users were not in a playful mood when setting up a router.
This is one of the largest and most complex UX projects I’ve ever undertaken. Setup alone consists of over 300 screens, and by supporting users with no cellular internet, no bluetooth, and all types of ISP connections and hardware, it means having 8 different versions of setup.
The sheer size of this project necessitated the creation of new processes.
We created custom flow diagram templates for the Sketch app that allowed us to create an interactive map of full-fidelity screens alongside all of the business logic required on the backend to string them together. These interactive diagrams were used as the prime deliverables for our developers.
When it came to the UX and UI design itself, our focus was twofold.
First, create a friendly and welcoming setup experience that would reduce the pain and stress normally associated with router setup.
Second, design safety nets into the process to catch users when things go wrong and provide friendly, detailed instructions for getting back on track.
We split setup into small easy to understand steps to create a more relaxed experience.
We created a less technical and more friendly design language.
We added cartoonish illustrations and animations to almost every screen.
We designed the app knowing that because every home is different, things would not always go to plan.
We created detailed instructions to help user get things back on track if they ran into an issue.
Overall we dedicated a majority of the screens in the app to this kind of troubleshooting.
ISP Detection Example Flow
What most users see as a single screen grows in complexity to support global customers.
THE FINAL DESIGNS
Samples screens from the many setup paths.
A few of the many animations throughout setup.