Interface Redesign for SamKnows

Redesigning an internet measurement mobile application

First Test.png

Metrics outside.png

Second Test.png

Metrics inside.png

iPhone 11 Pro.png

Project Summary

The Project

Our goal was to redesign a mobile application that reflected the website experience and design, and offer a simpler interaction than the current application.

My Role

With a small product team, I was responsible for:

Visual and Interaction Design
Brand Design
Prototyping

My Approach

I spoke with stakeholders to better understand the overall product vision and broader business goals to help build context. They wanted to replace their current native application with something new that looks and feels more like the web application. I iterated on several ideas of how the application should look before landing on a design that not only reflects the current website but offers a fresh take on the brand.

Our Users

Onsite ISP Engineer

Wants to test the internet speed of a customer’s home to make sure the customer is getting the speed they’re paying for.

"Is the internet speed in this home connected and running properly?"

A Customer or Volunteer

Wants to test the internet speed of their home and compare it to the internet speed of their device.

"Is it the internet speed coming into my home that’s broken, or is it my home wifi?"

The Current App and Website

The visual design of the current application was not only fussy and confusing, it did not reflect the look and feel of the website. While the app used the same blue and typeface, it did not separate or contain the two test results.

From an interaction standpoint, in the app the user had to select each test they wanted to run and then select “Start testing” to run the test. The website, on the other hand, automatically runs a download test and then when the user wants to run more tests, they select “Show more metrics”. The native app had to be reworked entirely in order to align with the journey flow of the website.

Current Native Application

Current Website

Previous Designs

A previous designer had left a few designs for me to consider for the visual design. I asked stakeholders where some of these ideas came from and discovered that they are based on Google Material Design. The heavy use of white and grey with a bit of blue reflected the website well and so I used that as part of my initial exploration.

previous designs.png

Iteration and Exploration

My initial explorations took the challenge literally: make an interface that looks exactly like the website. From there, I tried using cards to separate the two different speed test results while using the cloud graphic as a way to teach the user the difference between the two results and how the test works.

I thought that the results were too fussy, so I took a step back and looked at some ideas on Pinterest and Dribbble. I was inspired by the flat designs and how simple they are, so I made a few iterations in that direction.

However, after several iterations, I was not happy with the outcome and had a conversation with our Marketing designer about what could be changed and how we can stay on brand. I also did not think that the first round of iterations could be easily white labeled, which is a requirement for this project.

The Prototype

After a few more iterations, I landed on an interface I was happy with. I built a prototype that I used to talk with the developers and stakeholders to gather feedback regarding feasibility, and look and feel. I made some slight adjustments based on this feedback and made updates to the prototype. You can view the final results below.

Interact with the prototype

Different Devices

Along with the colors and layout, I considered how the interface should look on different size devices and different versions of Apple’s iOS. This would help developers know how to build a responsive interface.

iPhone SE.png

iPhone 11 Pro.png

Error States

I also worked with the back-end developers to understand the error states and design the screens and copy.

Can not reach your Whitebox.png

Not Compatible.png

Select your router.png

Another test is running.png

Can not run tests.png

White Label Exploration

I also considered how this interface could look if our major users decided to use the application for their own purposes but needed the interface to look and feel like their brand.