About This Work

When I started my last contract at eeGeo (today WRLD), a Dundee-based 3D-mapping development company, I was assigned the task of redesigning the compass controls of their Recce mobile app. Part of the task consisted in creating a design concept for the "blue dot in a 3D environment", that is how the user is represented on the 3D map once they locate their position.

The below screenshots from the Recce app show the old 3-state compass controls (Locate Me, Lock Rotation, Unlock Rotation) and the way in which the user's position was displayed on the 3D map at that time:

Analysis, User Flow, and Diagrams

I started by analysing the mechanics of the system in place to draw a picture and understand what I would be dealing with. So I created a diagram to describe both the 3D-map's and the UI's behaviour in relation to the user's interaction, and two more diagrams to illustrate all the possible user flows and interaction states of the old compass buttons.

More Diagrams, Concept Design, and Prototyping

Then, I moved on to designing the new control system with the goal in mind of providing the user with better reference and more detailed visual feedback about the map's orientation and the user's position on the map. Concurrently, I worked on the design concept to represent the user as a "blue dot in a 3D environment". The solutions I came up with comprised:

  • An encircling compass ring labelled with the four cardinal points, which would rotate around the compass icon/button
  • A blue sphere with a rotating pointing arrow to represent the user's location and their bearing on the map

After creating a series of design options for the new compass icons/buttons, I created an interactive prototype in Adobe Animate to present my designs to the developers, a couple of diagrams to illustrate the mechanics of the new compass controls, and some basic mock-ups to show the design concept of the blue sphere after quickly sketching it with pencil on paper.

Finally, it was time for some user testing. We chose a set of icons composed of the standard GPS icon for the 1st state (Locate Me), and an open and a closed padlock for the 2nd and 3rd states (Lock and Unlock Rotation). In addition to the standard 3-state control system, we also decided to run an A/B test to compare it with an alternative 2-state version.

User Testing, and In-Depth Competitor Analysis

The user test helped us gather qualitative feedback, highlighting a slight preference for the standard 3-state control system, and, most importantly, a couple of points that required further improvement:

  • Regarding the 1st state button (GPS icon for the Locate Me function), the new compass controls offered a lot more affordance than the old one, but some users were not sure about its functionality because of the encircling compass ring
  • Regarding the 2nd and 3rd state buttons (open and closed padlock icon for Lock and Unlock Rotation), all participants were unsure about them and none guessed their functions correctly, though all understood after performing the action

It was then time to start an in-depth competitor analysis (Google Maps, Apple Maps) to address the issues affecting the UI and consequently the user experience, so I dissected the mechanics of both their control systems to illustrate the user flow, interaction states, and UI behaviour through the whole "Locate Me/Enter Compass Mode/Exit Compass Mode" cycle.

Iterations, and Approved Final Version

Bearing in mind the results of the user test and the information gathered from the competitor analysis, I did some iterations to improve the user experience by reducing the noise in the UI caused by the persistent encircling compass ring, and by designing a new set of more indicative icons to offer better affordance and reduce the user's cognitive load. In particular:

  • Regarding the 1st state button (GPS icon for the Locate Me function), I enhanced its predominance by designing a larger icon, and by setting the encircling compass ring's opacity down to 50% when at rest.
  • Regarding the compass ring itself, I ensured that its rotation would keep providing the user with detailed visual feedback about the map's orientation by fading the ring's opacity up to 100% whenever the map was being rotated; once at rest again, the encircling compass ring's opacity would fade down to 50% to reinstate the Locate Me button predominance.
  • Regarding the 2nd and 3rd state buttons (Enter and Exit Compass Mode), I improved their perceived affordance by designing 2 switch-style compass needle icons, which would change colour when toggling between 2nd and 3rd state.

Below, the mock-ups show the final and approved version after the changes that I made to the new compass controls.

Compass Controls, Semantic Animation, and Mechanics

The below animations show the UI's, the map's, and the blue sphere's behaviour in relation to the user's interaction and their bearing.

1st State

User in free exploration, before locating their position on the 3D map. When the map is being rotated, the encircling compass ring rotates accordingly and its opacity fades up to 100%.

2nd State

User after locating their position on the 3D map, before entering Compass Mode. The encircling compass ring behaves in the same way, but independently of the user's (device's) bearing.

3rd State

User while in Compass Mode. Their orientation is fixed, and the map rotates following the user's (device's) direction; the opacity of the encircling compass ring is constantly set to 100%.

See It In Action Yourself

If you would like to have a better look at the compass controls that I designed, the WRLD app is avalilable for download for both Android and Apple devices.