Atlas Map

A project to improve the user experience of a web-based map application used by traffic controllers of the bus fleet for the long-distance bus service provider FlixBus. The project was intended to address UI and UX issues reported by the users of the application.

Role

User Research, UX Design

Team

1 UX Designer, 1 Front-end Developer, 1 Product Owner

+

Fleet traffic management team

Client

Flixbus, Flixtech

Project Duration

3.5 Months

Design Tools

Adobe XD, Figma, Photoshop, Illustrator, Userzoom (UXR & testing Platform)

Project Overview

Atlas map was the application used by the fleet traffic control team to monitor, direct and solve route and traffic-related issues of the buses on the move. This application was built upon the base maps provided by mapping service provider Mapbox.

The issue with the application was it was built in a hurry without much user input, so the UX was not very well optimized and as the fleet was going bigger every month, the traffic controllers were facing challenges to keep up with slow, unintuitive, and error-prone interface options. Since they work in a high-pressure environment with moving vehicles, the mistakes are costly and quickly add up to a high number due to customer complaints, returns, and traffic fines.

The main pain points of the application were with the visibility and identifiability of the vehicles and route on the map. Additional pain points were to view the map without obstruction with access to essential controls and see the alerts in the interface at any state of the application.

Approach

To understand the goals and scope of work I have done multiple sessions with the Product Owner and the developer. We have collaboratively defined the goals of the project and the Product Owner has connected me to the real users (Fleet traffic controllers) of the application.

Goals:

1. Improving operational performance

2. Reduce response time after traffic incidence identification

3. Reduce stress during peak work hours

4. Reduce eye strain from long term use

5. Reduce operational error

6. Addressing Colorblind and vision-impaired (blurred vision) user issues

Scope of work:

The 3rd party Mapping service allowed us to make changes within the following areas to achieve the goals:

1. The appearance of the vehicle on the map

2. The appearance of the map terrain in different use conditions

3. Timing and Appearance of the route and trace

4. Timing and Appearance of the on-map information display

5. Limited customization of information display overlay

6. UI element appearance and position adjustment

7. Introducing Map legend (additional)

Analysis Matrix of the current implementation

I have created a matrix of the different map variants to understand which features are aligned with the probable solution and which ones need to be changed or tested for better usability.

Problems and User Needs

I have decided to use user interviews and Live observation to identify the user needs and clearly define the problem. I have observed the users while they are working with the map, I have asked them to narrate the activities they are doing in the map and also vocalize their emotions while doing it. Some of the users has sent me screen capture video recording with narration of their map use sessions.

I have used the current implementation extensively to empathize with the user, reproduce the problem areas and identify problematic design elements in the interface.

From the application use, live observation, and interview following problems and user needs has been identified:

• UI elements are taking a lot of real estate on-screen and leaving less space for the map.

• Different vehicle types are indistinguishable due to similar shape and very close color variation

• Route and trace markers are blended in the background and do not provide direction of the vehicle

• Zoomed out map states are almost unusable due to lack of visual cue of the needed information

• Some vital information is hidden behind multiple steps or under scrolls

• Critical alert areas in the map are not instantly reachable when needed

• Some available map themes are problematic to use with the current map markers due to low color contrast

• One available map theme is not used at all due to visual clutter

User Stories

Some of the user stories as discovered from the user research are:

User Story 1:

As a user I would like to view the map without obstruction with access to essential controls

User Story 2:

As a user I would like to view ride related data with minimally obstructing the map view

User Story 3:

As a user I would like to see alerts in the interface

Research - Benchmarking

To address the problems and user needs I have decided to explore how other mapping applications are solving these problems (Benchmarking). I have also analyzed applications that has map as part of their core product e.g. Ride sharing apps, navigation apps.

Applications I have benchmarked are:

WebFleet, Google maps, Waze maps, Here map, Apple maps, Tomtom gps navigation, Maps.me, Stygic, Karta/openstreetmap, OSMand, Uber, Miles, Lime, Lyft, weshare

Benchmark Observation

Route and Trace:

• Most of them use an outline for route/trace stroke

• Some use a white outline

• Some use a darker version of the same color of the stroke color

• Some use a lighter version of the stroke color, gives a 3d/gradient/emboss effect

• Some use semitransparent strokes in distinct colors

• Few use without an outline but the stroke is thick and distinct than the road/street itself

• Some use drop shadow with the stroke and objects

• Some change color of the stroke based on the basemap it's on, some keep it distinct through the outline and drop shadow

• Most of them change the attribute (color, dots) within the outline to convey different meanings (e.g. google map – Route Stroke outline color always dark blue, inside color for normal traffic is light blue, medium traffic orange, heavy Red)

• Stroke weight remains consistent as the map zooms out, e.g. stroke gets thicker as it zooms out

• The Walking route stroke attribute is differently handled in different platforms – google uses individual dots with outlines around each dot. Some use dash inside stroke outline, some only use dashes.

• OSMand app uses small arrows within the stroke to convey direction

Vehicle Shape:

• Some maps use 3d versions of the vehicles from the top view

• Some use basic shapes (circle, square, etc) to represent a vehicle

• Some use a drop shadow to distinguish the vehicle from the background

• Selecting a vehicle shows route and trace in some applications

• Some use icons that have front-back distinction in those cases, Front points towards the forward moving direction

• Some fade unselected vehicles to Distinguish between selected and non-selected vehicle

• Some add drop shadow under the selected vehicle, some use darker outline around the selected vehicle, some use floating labels on the selected vehicle to distinguish between selected and non-selected vehicle

• None use Legend

Ideation and User tests

Benchmarking and analysis led to the ideation phase where I came up with multiple solutions for Vehicle appearance, route and trace and map color schemes that address the issues users were facing in the map view. I have planned to test these solutions in multiple different user demographic.

Test types

• Test of Vehicle shape for identifiability in top view and perspective view

• Testing vehicle color in 4 different base-map styles (Dark, Light, Street, traffic)

• Testing route and trace color and stroke in 4 different base-map styles (Dark, Light, Street, traffic)

• Test of vehicle shape in different surrounding settings (on land, on water, in group, within high object clutter)

Measurement Criteria:

• The color contrast ratio on different overlay elements on the background

• Instant identifiability (Selected, deselected, needs attention, etc)

• Intention relevance (Is the visual representation conveying intended/necessary info)

• Surroundings (on land, on water, in-group, within high object clutter)

• Text overlay legibility, clarity, and contrast

• Stress level on the eye after long time use

• Accessibility - Color blindness, blurred vision

• Use in Low light and high light condition

Test method for improved vehicle identifiability

To improve the identifiability of different vehicle types in the fleet and their status, I have created multiple remote tests and tested in 3 different user locations. The tests were following:

• Place multiple similar shapes (for Vehicle) in different settings (in clusters, with text overlay, etc) and basemap style and asking to count to measure accuracy. In zoomed in and out map

• Use different shapes and asking which one represents vehicle (bus, train, car) the best

• Use blurred versions of the shapes and asking to identify the representation

Acceptance criteria

• The shapes have to be distinguishable both zoomed in and zoomed out view

• The shapes should not be similar to other common markers in the map

• The shapes should be identifiable from any orientation

• The shapes should require previous familiarity of specific language alphabets to recognize.

Findings

• Some shapes has better association towards certain kind of vehicle (i.e. Car, Bus or Train) without any previous information

• Using different colors in vehicles bring confusion

• State of a vehicle is better distinguishable with adding another shape element than changing color

• Information overlays can impact identifiability and needs shortcut to disable instantly.

• Zoomed out view of the vehicle clusters needs to have visual identifiability for number and type of vehicles

• The mouse pointer should snap to the nearest vehicle when hovering near it.

• Should have direction indication possibility (front-back)

• The vehicle should be recognizable in zoomed out state

• Bus, train should be distinguishable in zoomed out state

• Outline and drop shadow increases identifiability

• Vehicle selected and deselected state needs to be shown

Final Implement recommendation

Route/trace Stroke

• Use outline on stroke

• Test among white-gray-dark color outline to find ideal one for most basemaps

• Consider changing stroke color based on basemap style (if possible)

• Change stroke weight depending on zoom level

• Use light or dark small arrow to convey direction

Vehicle Shape

• Should have direction indication possibility (front-back)

• Should be recognizable in zoomed out state

• Bus, train should be distinguishable in zoomed out state

• Consider drop shadow

• Consider selected-deselected state

• Consider outline

• Consider color distinction with basemap and route/trace

More Projects