5 Great Isochrone Map Design Ideas

by Niharika Sisodia
on Jun 25, 2018

Isochrones can be a useful way of displaying large amounts of data to a user. But, they can also present problems. Maps can be difficult to read and understand. If too much information is presented at once, users can become overwhelmed. So, how can you design an isochrone map that is clear, informative and on brand? Here are our top 5 isochrone map designs.  

Colour

The Malaria Atlas Project (MAP) processed vast amounts of information to assess how travel time relates to socio-economic background. The isochrone map is layered with multiple data sets to create a heat map showing how economic, educational, and health status is related to travel time to cities.

isochrone-map-malaria

What works?

By focusing on the overview, MAP has ensured that the user is not overwhelmed by detail. The colours contrast and are further highlighted by the black background. The visual is easy to understand, in spite of the multitude of data that is being presented. 

Interface

When creating our own isochrone map app, there were many design considerations. We wanted to make sure that users could create their own travel time area. The TravelTime allows users to create isochrones maps by travel time using different modes of transport.

Screenshot from 2020-08-03 14-43-36-1

What works?

The concept of isochrones maps is relatively new and can be confusing. The TravelTime search box uses a full sentence and asks the user to fill in the blanks. This interface guides the user through the search process. We have also created a separate design for smaller screens. On a mobile, the point of interest view is a different screen to map view. This separation ensures that the map is still big enough for the user to view and navigate.

isochrone-map-london

Following the initial isochrone display, the user is given further filter options. By presenting the results in stages, the user can visualise relevant results on the isochrone map without becoming overwhelmed.

Brand

In trying to create a simple isochrone map for a user to navigate, it is easy to lose your brand identity. Zoopla present the results of house searches on isochrone maps.

isochrone-zoopla

What works?

Zoopla has tinted their isochrone in their brand colour, purple. They have also highlighted properties within the isochrone map with a branded pin. Not only does this increase brand awareness but creates an efficient interface. Users have a full screen map display and Zoopla has consistent branding within the isochrone map. Zoopla uses the TravelTime Search API to power this shape. 

Simplicity

The mapmaker, Francis Galton, created a series of isochrones maps starting from London and travelling around the world. He calculated how long each of these trips would take, and drew lines grouping those destinations that could be reached in an equal amount of time.

isochrone-francis-galton

What works?

The map was intended to roughly estimate travel time. The key confirms a broad range, such as ‘within 5 days’. These general ranges allow for smooth isochrone boundaries. Unless specific results are required, a smooth boundary is more aesthetically pleasing and easier to understand. This is especially true of an isochrone map that covers large areas.

Clarity

In the example below, the Propertywide site displays a cross section of isochrones for two users. These users are looking to share a house but work in two different locations. They’ve entered two office addresses and can see which locations would be good for both of them. The results display where they could live within both their maximum travel times.

isochrone-map

What works?

Propertywide uses colour to distinguish between the two office location commute areas and connect the map results to clear icons on the left of the page. This makes it easy for the user to see which results relate to which information.

But Propertywide has clarified their isochrone design even further. They have greyed out irrelevant information and cut away colour for the intersection. These design choices mean that the user is drawn to the results that are relevant.

You can find more information on isochrones here

Click

 

Related

How to Create Isochrones with Postman and the Traveltime API

With this Time Map endpoint tutorial using postman, you can get a list of coordinates showing a perimeter of where’s reachable within a travel time limit.

Evelina Bezubec Nov 4, 2019
READ

Use this Travel Time Calculator to Discover Journey Times

Explore travel time calculator tools. Calculate travel times globally. Optimise your journey using time instead of distance.

Evelina Bezubec Aug 1, 2019
READ

Isochrone Analysis Made Easy

Isochrone analysis simplified. Learn how to use isochrone analysis in mapping. Improve customer service, logistics or plan an office relocation using isochrones analysis techniques. Save time and costs, and retain staff using the TravelTime platform.

Niharika Sisodia Mar 25, 2019
READ

Isochrone Map Design Inspiration

Perfect your isochrone map design. Use these tips to make your isochrone map easy to understand. Improve user experience by creating a simple and aesthetically pleasing isochrone map.

Niharika Sisodia Feb 7, 2019
READ

10 Must-Read Articles About Map User Experience

Read 10 articles that analyse map user experience. Take UX tips from expert analysis to help you build the perfect user experience for the map page on your website or app.

Niharika Sisodia Jan 14, 2019
READ

10 Inspiring Interactive Map Design & UX Examples

Discover the best interactive map designs. Use map design to improve user experience for mobile and desktop users.

Niharika Sisodia Dec 18, 2018
READ