A free technical support mobile app for Android that helps residential customers set and optimise their Wifi network.
Making Wifi worth paying for
We designed a straightforward app to help dummies self-manage their router, including features like changing the Wifi’s name and password or setting the Wifi in the less saturated channel, with some extra functionalities for more advanced users.
MyWifi app had a robust pedagogical approach, to teach the use of this technology. And it followed Android’s material design interaction patterns.
- Kick-off workshop
- Sketches: problem visualisation
- Problem mapping
- Challenge map
- Desktop research
- Contextual interviews
- In-depth Interviews
- Card Sorting
- Insight cards
- Affinity diagram
- Empathy maps
- Ideation workshops
- Decision matrix
- Navigation diagram
- Interactive medium-fi prototypes
- Interactive high-fi prototypes
- Concept tests
- Micro-usability tests
- Remote user tests with beta testers
- 2 UX Designers
- 1 UI Designer
1. Framing the problem
Why is your WIFI so slow and other tales.
Frustrated users. There was a never-ending long record of complaints related to slow Wifi connection.
There was a decrease in the value perception of the company’s optic fibre.
Let’s help our users set their router’s WIFI for optimal performance on their own and be happy about it.
Minimal Viable Product
2. Delving into the problem
No technical issues detected… and so many complaints about WIFI?
What was going on?
Users bad practices worsened the router’s limitations, slowing down WIFI connection. Why? Because of a generalised ignorance towards the capabilities and settings of the company’s devices, due to an overall indifference towards the company’s technological improvements and technology in general.
“Either I hate technology or technology hates me.”
False step: We overlooked the need to redesign the company’s support app. It would have been more natural for users to find these needs met inside an already existing app.
What did users need?
- Set their Wifi in the less saturated channel.
- See if intruders are stealing their Wifi.
- Understand what to do and what not to do with the router.
- Change the Wifi’s name and password.
- Connect devices to the network.
- Share Wifi with guests.
3. Translating User needs
We assembled all possible users into 3 personas with differences in their relationship with technology.
We represented the user needs into design ideas through a collection of problem, activity and information scenarios.
This particular activity scenario was the origin of the later One-Click Optimiser that sets the Wifi in the less saturated channel.
Activity Scenario: Magical Fix
Cristina spends most of the day working on her laptop from her apartment, and she cannot take it anymore: the slow Wifi is driving her crazy. But an app that an operator from the call centre recommended the other day is going to change that.
As Cristina is losing her nerves trying to download a file, the MyWifi app comes to mind, and she decides to give it a try. She installs it on her smartphone. Our friend follows a few simple steps to access her router and after some minutes familiarising herself with the different options, she finds her lifesaver. She has reached a screen that promises a miraculous fix of the Wifi speed with just one tap on a big button. She taps, “Let’s see…”.
A progress bar that looks like it is going to take like ages, surprisingly disappears from the screen, leading to a message confirming that the Wifi has been correctly fixed. “Really?”, Cristina doubts.
“Really?”, Cristina cries in amazement, five minutes later, realising that a big file downloaded and a new file it’s about to finish downloading. “That was magic”, she thinks while she focuses on reading a document and forgets that she had a Wifi speed problem today.
(Translated excerpt slightly modified for confidentiality reasons.)
4. Imagining the app
We conceived the concept mentioned above and started imagining the different functionalities under a pedagogical approach. For instance, we detected all the points where it made sense to teach the user about Wifi technology.
And we introduced tips in a non-intrusive way. For example, when identifying devices connected to the router, a question mark icon would open a popup proposing two methods to do so: basic and advanced.
So we progressed to an app for basic users with some
advanced functionality on a second level.
A basic user would let a guest scan the
bidi code or see the password on the screen.
A more advanced user would find the WPS connection under the more menu (…) and would activate it on the next screen.
Contribution: In this phase of the project, one of my best contributions was the information design of all screens and messages, speaking to the user in his language.
The main screen of an early prototype with 5 main functionalities at first level.
It was time to start discarding interaction alternatives using interactive medium-fidelity prototypes. Micro-usability tests helped us iterate on the design adapting it to the mental models we discovered, like in the case of the main screen.
“Let me first select the Wifi in which I want to operate and then show me what I can do with it.”
The main screen of final version with the Wifi networks at first level, as “containers” of functionalities.
7. Final Touches
A final online user test with beta testers revealed some areas for improvement that we developed on the final version. For instance, that’s why included a tutorial.
Against our first instinct to use contextual help, users preferred to have an introduction that would help them land in the app with a little bit of context.
The key screen of a late prototype showing contextual help proposed for the user’s first session in the app.
Screenshot of the final version, where a tutorial welcomes the user when he opens the app for the first time.
We launched a beta version in the Google Play market. Now it has been substituted by a newer app.
KEY SCREENS - KEY FEATURES
Simple navigation, respecting Material Design patterns, with all functionalities subordinated to each Wifi network, and shortcuts to essential functions and other content in a Hamburger Menu.
Learning: Regarding UI I learned how to evolve the company’s brand in the digital field: more about consistency than identity.
We applied only the brand’s colours and icons leaving the logo just on the splash screen.
Contribution: The Channel Scanner, one of the key features of the app, is the feature that I am most proud. The difference with other apps: the unambiguous visual representation that I designed.
Connected Devices Monitor.
Achievement: MyWifi App not only helped costumers speed up their WIFI’s but also prevents technical problems in the routers.
Basic users could optimise their Wifi in just one click. Doing this every once in a while increases the working life of routers.
One Click Wifi Optimiser.
A self-management tool with a “guided” approach makes the user feel he is not alone against technology.
Wifi 10 tips screen: Index.
Wifi 10 tips screen: Router placement.