Work

Brief description

Introduction


The costs for using your mobile data abroad are increasing and the amount of Wi-Fi hotspots around the world are exponentially growing. WifiMapper - the world's largest Wi-Fi database, with nearly 500 million Wi-Fi hotspots worldwide and over 2,000,000 recommended free hotspots wants to tackle the high roaming charges when traveling abroad. The data was available and my task was to design the mobile apps interface for both iOS and Android platforms to show all of this information on a user friendly way. This helped the user to connect to any available Wi-Fi hotspot around the world.

The wireframes

Sketches


There is so much information available for each Wi-Fi hotspot, therefore it is important to show the right information at the right place. As with any other project I started sketching out the wireframes for all the various screens. In the future more and more features will be added to the WifiMapper app, so I had to be really flexible with the designs in order to prevent redesigning complete screens from the ground up.

WifiMapper wireframes design

Types of hotspots

500 Million Wifi Hotspots


The WifiMapper database contains information of more than 500 million Wi-Fi hotspots, but not all the available hotspots are relevant for each user. That's why I divided all the hotspots into 4 categories: Free, Paid, Private and Unknown with each type of hotspot having its own advantages.

Type of hotspots

All of the Wi-Fi hotspots are divided into 4 categories:

  • Free Wi-Fi - connect to the hotspot without paying for it by either connecting to it or using the provided password
  • Paid Wi-Fi - pay in order to making use of the hotspot
  • Private Wi-Fi - hotspots for private use only, such as companies or homes
  • Unknown Wi-Fi - hotspots which haven't been categorised yet
WifiMapper hotspot labels design

Custom map markers

Mapping Hotspots


Presenting all the hotspots in just a list makes it hard to find the right hotspot based on your personal preferences. That's why I designed custom map markers that indicate the type of hotspot and the type of venue for each Wi-Fi hotspot. These markers are presented on a map that makes it easier to navigate through all of the millions of hotspots to which you can connect to.

WifiMapper mobile app design

Award winning designs

It's all in the details


As well as having a great user experience for the app it was important to make it beautiful. Every screen of the app is pixel perfect! This has been confirmed by Apple and other media sites by winning an awards for "Best new App" and "App of the year".

WifiMapper mobile app detailed designs

What did I do

User centered


It is really important to make the app user centered, to make the users feel as the app has been designed for them personally. This way it feels more intuitive and easy to use. On the profile section of WifiMapper the users can download the desired offline maps, as well as to set personal favourites hotspots, see personalised stats and change the apps behaviour by customising the settings.

WifiMapper user centered graphic

The results

Designs

WifiMapper mobile map view design
WifiMapper mobile map filters design
WifiMapper mobile map place type design
WifiMapper mobile details page design
WifiMapper mobile hotspot password dialog design
WifiMapper mobile hotspot classification view design
WifiMapper mobile photo view design
WifiMapper mobile create account page design
WifiMapper mobile profile page design
WifiMapper mobile edit profile page design
WifiMapper mobile stats page design
WifiMapper mobile no favourites page design
WifiMapper mobile favourites page design
WifiMapper mobile saved maps page design
WifiMapper mobile history page design
View next project

ReadWave