Work

Brief description

Introduction


OpenSignal's main product is Coverage Maps, which is the world's largest mobile coverage crowdsourcing project. Coverage Maps uses crowdsourced data to show users where they can obtain the best signal for their mobile devices. With mobile data coverage extending to over 1,000 mobile carriers worldwide, OpenSignal is able to provide accurate statistical and analytical information to users in over 200 countries. Millions of users have downloaded OpenSignal's app, which is available for both the Android and iOS platform. I was responsible for the user experience and designing the coverage maps.

Where it all started

Strategy & UX


All of the best ideas start on paper and the Coverage Maps project was no exception. I designed Coverage Map's user experience by sketching out wireframes for various proposed solutions. It's crucial that users fully understand the functionality and use of the Coverage Maps and wireframes serve as a foundation for the design process. The wireframes ensure that the content and functionality are positioned correctly based on user and business needs.

Complete map view

The biggest challenge was maintaining the integrity of the maps by showing users only the most relevant information. The next wireframes showcase a few of the ideas.

OpenSignal Coverage Maps wireframes - Complete map view
OpenSignal Coverage Maps wireframes - Initial view
Initial view
The main landing page where the user selects the location and the mobile network provider.
OpenSignal Coverage Maps wireframes - Sidebar
NetworkRank
The NetworkRank sidebar shows the detailed mobile network performance.
OpenSignal Coverage Maps wireframes - Dialogs
Dialogs
The various dialogs explain the functionalities of the Coverage Maps.
OpenSignal Coverage Maps wireframes - Search and filters
Filters
Ideas on how to let the user search for a location and select the mobile network.

Data visualization

Coverage Colors


Coverage Maps interface makes smart use of color to depict strong and weak coverage signals - green indicates a strong signal while red indicates a poor signal. This minimalist approach helps streamline the experience for the user, as it helps do away with the need for text.

Picked legend colors

The color scheme was rigorously tested by surveying a large number of core users to ascertain the best color combinations which clearly indicate where the best signals can be found.

OpenSignal Coverage Maps colors

Colors applied to the map

Applying the chosen red/green colour scheme to the Coverage Map helped cement the selection during the design process, as users best responded to this combination.

OpenSignal Coverage Maps design

It's all in the details

Components


Coverage Maps combines a wide variety of design assets: I had to proactively assess every aspect of the interface's design in order to hand over my work to the programmers. Creating a style guide is an imperative part of the design process, as it reduces the likelihood of communication flaws and ensures a streamlined product implementation process.

OpenSignal Coverage Maps NetworkRank components OpenSignal Coverage Maps Filters components OpenSignal Coverage Maps Dialogs

The results

Final Designs

OpenSignal website initial view design
OpenSignal website map view design
OpenSignal mobile initial view design
OpenSignal mobile map view design
OpenSignal mobile filters view design
OpenSignal mobile search view design
OpenSignal mobile networkrank view design
OpenSignal mobile networkrank view design
OpenSignal mobile networkrank view design
OpenSignal mobile legend view design
OpenSignal mobile types view design
View next project

BikerPit