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.