Say goodbye to dead zones

Vilo Living is a mesh router solution designed to provide reliable coverage for Internet service providers and consumers. Vilo’s goal is to eliminate dead zones in customers' homes and improve overall network coverage. In this case study, we will examine the mobile redesign of its current application. The challenge was to effectively incorporate user research to help mitigate our design/ risk decisions. The results of this project will be discussed in order to provide insight into the benefits and effectiveness of this solution.

Hard time setting up Vilo, hard time setting up meshing router system.

To better understand our user pain points, I started with conducting usability testing. During the usability testing phase, I tested with a total of 8 users. 4 super users, and 4 new users. We tested with these 2 demographics of users to understand 2 different perspectives. The super users were intended to act as Internet service provider (ISP) and the new users were intended to act as general users. We conducted usability testing in an in person enviornment because for one, it was hard to see their mobile screen while demonstrating the desks while remote, and for 2 when setting up a new/ exisitng network it would be very hard to see. Our usability testing covered features throughout the whole app, but because we were doing the redesign in phases, we wanted to focus on setting up a new Vilo, adding to existing network, and also adding from a different package.

Insights we found during our usability test findings were that users had a hard time setting up Vilo, loading indications were not as intuitive or helpful, users did not understand how to set up a Sub-Vilo.

Unifying design files, in to a design system

After going through the files from the previous designers I then created a design system of the entire app to help unify the elements. I created things such as components, using features like auto layout. This was an extremely important part of the project because I needed to understand the sizing, layout, and even iconography of what we currently have. There were parts that were missing that I was not able to identify, older iterations and newer ones both in a different language. Running in to this road block I referenced the Vilo’s mobile app its self to help unify the designs.

Manual Set up is the current Android Flow

Redesigning the set up flow, we went with the manual setup/ Android flow because currently for the IOS devices, the scan to automatically set up was working just fine but when users would select manually set up, they would encounter a different experience. This as a business is what we wanted to tackle and where we wanted to spend most of our time redesigning.

Adding more interactions to help guide users through the onboarding experience

During the initial setup process, the majority of our users were able to successfully configure their Vilo devices, but we received some valuable feedback from them. When testing with advanced users, we discovered that the loading icons were not clear and took longer than 30 seconds to appear. This feedback was beneficial as it allowed me to identify potential issues and find ways to improve them. To make the app more user-friendly, we also added additional interactions to the setup process to kind of give a more fun and modern look and feel.

Same Package Flow

As mentioned earlier from building off data to help with our design solutions; I also referenced back to the design system to help keep our design’s unified to the current design. I also adding a troubleshooting guide for users who got stuck, and also a success page in the flow to let users know they had confirmation that the paring was success. One thing I learned later on in the project was how the software confirmation was different in the different package flow. During the time, we were unable to actually give our users confirmation that the same package Vilo had paired, instead showing them they had paired and offering them troubleshooting guides to successfully pair their Vilo which ultimately could lead the user in to the different package flow.

Another thing key thing that was different in the same package flow was the “loop” our users kept running in to. In the current UI, users would navigate to screen 2 and select "Solid Amber Light Confirmed" and would end up back at the first screen. This caused major confusion with our usability test users as they were trying to set up, and had no confirmation that the Vilo was paired.

Different Package flow

During the different package flow, data points had also pointed that when users were adding a Sub Vilo, the loading icons were not intuitive letting the users know how much time was left before pairing. This was an issue for users because some stated it took a lot longer than what the device usually takes to pair (30 seconds), so instead we changed the loading icons so they were intuitive and more user friendly.

Downstream churn

During the part where the team and I finalized the flows and designs, the previous designer had sent me their original sketch file which was a huge part project, because the components I had created were different sizes. This created a lot of downstream turn, due to different sizing of components, and even placement. Once that was finished, me and the product manager reviewed the flow and sent it off to dev team.