17
Nov
2016
3

Adding value and removing friction in our flagship mobile app, OS Maps

The second in our new series of blogs from the teams behind our apps, maps and services, sharing their experiences in software engineering, cartographic design, user experience and more. Chris Hall, based at our London Geovation Hub, shares his experience on updating OS Maps’ route ratings. 

Whilst I was using our OS Maps app to find a new route, I stumbled upon a frustrating experience with the route discovery process in OS Maps. Through some research and visual exploration, I was able to solve the problem.

Friction

OS Maps allows users to find and follow routes all over the country. Users can plot their own routes, and share them with the community publicly. To aid the discovery process we allow users to grade their route out of three options to reflect its difficulty. Routes are currently displayed as a pin on the map with a gradient indicator: Green for leisurely; orange for moderate; and red for challenging. This has created a great spread of the types of routes we get in the app, which for the most part works really well. However, one day I discovered this route:
old_pins

   

This is a leisurely graded route that is actually a 6-hour cycle from central London to Colchester. I think it’s fair to say that to most, this is by no stretch of the imagination a “leisurely” cycle. And herein lies the problem, with the user being free to set their difficulty, it only takes one scenario like this and trust in the grading system is broken. I can no longer look at a pin and know it’s suitable without opening the route. This introduces a lot of friction having to go back and forth opening routes to find a suitable one, and makes the discovery process potentially frustrating.

All right, so what do we do?

At the time, I happened to be booking a trip to Berlin on Airbnb – and it suddenly dawned on me how their discovery process feels so fluid and friction free. Take a look at these pins as an example:
air_bnb


By having the listing price inside the pin, the user is getting value and information about that listing without having to open it; they can make a decision about the suitability of a listing from the map – perfect! This means every pin that the user opens will be a potential match every time, based on the price alone. This reduces friction and introduces delight as every pin you tap “could be the one”. Okay, so how do we get this magic into OS Maps?

UI time

So, if I want to display a value for a user to judge suitability against it needs to be something objective. Difficulty is subjective, and time to complete is based around an average time calculation. Distance, though – distance is always the same, and gives you an indication of the difficulty and time it’ll take you to complete the route.  sketching

After some quick sketching, we had the outline of our solution. A pin that contains the distance and allows you to choose routes based on more than a subjective difficulty rating. Following some time in Photoshop, a few design iterations and looking at the screen from funny angles, I had a design I was happy with:
new_pins
Now we are displaying distance inside the pin, giving all that delightful friction reducing value I’ve been speaking about, but we still retain the difficulty grading with the coloured base of the pin. As a final thought, we didn’t want these taking over the map too much in areas that are crowded with routes, so we introduced a micro transition where the pins go from simple dots to full pins once a close enough zoom level is reached. Here you can see it working in the app, and it looks great:
osmaps_pins

This has elevated the experience of the route discovery process and eliminated friction and a source of frustration for the user. Now, just by scanning the map you can see if there are routes that are suitable for your ability or desire. Want to walk less than 50km but more than 20km? Now you can see what works for you without having to do additional filtering or guessing around difficulty level.

You may also like

App development: Pie chart cluster markers

1 Response

  1. James

    Very interesting to read the processes involved with eliminating or reducing ‘friction’ in usability of software applications. And great to see other (non geographical) specialist apps (Air BnB) influencing the OS Maps app.

Leave a Reply

Your email address will not be published. Required fields are marked *

Name* :

Email* :

Website: