AR Navigation
Introduction
Not long after joining HyperAR, I was called to a meeting with the CEO, the Head of Mobile and given the statement:
'We want to build the world's best AR navigation experience'
...I was confused, Hyper already had, by everyone's understanding, a very good AR navigation solution, and it's not like it's a saturated market of solutions.
How do you improve on something that already worked well?
Well, after doing an exploration into the implemented solution, I noticed something, which allowed me to think of a concept to massively simplify the entire experience, reduce cognitive load and making the experience so much more fun and engaging.
How do you improve on something that already worked well?
Well, after doing an exploration into the implemented solution, I noticed something, which allowed me to think of a concept to massively simplify the entire experience, reduce cognitive load and making the experience so much more fun and engaging.
Research
To begin with, I performed a deep dive into the current live solution myself. It was made up of 4 components:
Blue Path: These were a stack of blue circles, mimicking the path on the map, directing user straight in AR.
Waypoint Sign: This was a 2D blue circle with an arrow, pointing the direction the user needed to go in worldspace at the junction of a turn.
Heading Correction Pointer: A 2D UI element that pointed at the edge of the screen then the user wasn't looking in the correct direction.
Arrival Pointer: Another 2D worldspace element which would sit in front of the user's destination.
Blue Path: These were a stack of blue circles, mimicking the path on the map, directing user straight in AR.
Waypoint Sign: This was a 2D blue circle with an arrow, pointing the direction the user needed to go in worldspace at the junction of a turn.
Heading Correction Pointer: A 2D UI element that pointed at the edge of the screen then the user wasn't looking in the correct direction.
Arrival Pointer: Another 2D worldspace element which would sit in front of the user's destination.
The combination and interplay of these components, hiding and showing depending of specific states and logics, works well most of the time. There are, however, a number of couple of problems with it, which can have a big impact of users.
Split Screen: When the AR is shown, it shows in a window from the top of the screen, with the map still present below it. This creates a busy and distracting hierarchy, and more cognitive load.
Conflicting States: Sometimes states would overlap there would be multiple components on screen at once and present conflicting information, which can be confusing for users.
Reliance of Show/Hide: The whole system relied on showing and hiding different elements, based on proximity and navigation logic. This can lead to some components getting close to the screen before disappearing, and requires the user to constantly be switching their attention to different components.
Out of these discoveries, I also had a realisation:
All 4 components are just pointing in a certain direction.... So why couldn't they be 1 single component?
Split Screen: When the AR is shown, it shows in a window from the top of the screen, with the map still present below it. This creates a busy and distracting hierarchy, and more cognitive load.
Conflicting States: Sometimes states would overlap there would be multiple components on screen at once and present conflicting information, which can be confusing for users.
Reliance of Show/Hide: The whole system relied on showing and hiding different elements, based on proximity and navigation logic. This can lead to some components getting close to the screen before disappearing, and requires the user to constantly be switching their attention to different components.
Out of these discoveries, I also had a realisation:
All 4 components are just pointing in a certain direction.... So why couldn't they be 1 single component?
Development
I pictured a single arrow mimicking the states of the previous 4 components, but through flying about in front of you - Staying with you on long walks, flying out to direct you a turns, and then meeting back up with it when you reached them.
To investigate if this was even possible, I walked around IKEA (a partner of ours) and recording my phone while pretending to be following a route in AR - I'd follow the main path, turn around at times and weaved through fixtures.
I then took the footage and used After Effects to add an arrow on top, mimicking the behaviour and states that I had already defined. And the results were... Amazing. I quickly showed the Head of Mobile and explained through the concept. We both got very excited and started work immediately.
To investigate if this was even possible, I walked around IKEA (a partner of ours) and recording my phone while pretending to be following a route in AR - I'd follow the main path, turn around at times and weaved through fixtures.
I then took the footage and used After Effects to add an arrow on top, mimicking the behaviour and states that I had already defined. And the results were... Amazing. I quickly showed the Head of Mobile and explained through the concept. We both got very excited and started work immediately.
After starting, the scope grew quite considerably and tools to enable the arrow to have context of the route unlocked possibilities for things like turn by turn directions and logic for complex manoeuvres.
It was constantly exciting getting a new build, testing it out, iterating over areas it needed work on and feeding that back into the development.
It was constantly exciting getting a new build, testing it out, iterating over areas it needed work on and feeding that back into the development.
User Testing
User testing wasn't really a thing at Hyper when I joined, however, with the help of a new Project Manager that joined, we implemented a tight user testing iteration feedback loop throughout the project.
Working closely with out partner IKEA, we were able to run 4 user test sessions - All crucial to the development of the product. They raised issues that we were blind to, like the speed of the arrow transitions to different states, the distances different states were triggered at and just some... 'odd' behaviours that we would never have through of.
Working closely with out partner IKEA, we were able to run 4 user test sessions - All crucial to the development of the product. They raised issues that we were blind to, like the speed of the arrow transitions to different states, the distances different states were triggered at and just some... 'odd' behaviours that we would never have through of.
Results
The results from the final round of user testing were incredibly successful, highlighting it as being much easier to follow than the previous version, more intuitive and far more fun.
AR mode usage jumped to an average 63% per journey (7% before) and 95% of people saying they would use AR (30% before). As well as lot of amazing anecdotal feedback people saying how fun and much clearer it was compared to the old system etc.
And on social media, the arrow is always I massive hit, pulling in 1000s of views and amazing comments asking when their local stores are getting it!
AR mode usage jumped to an average 63% per journey (7% before) and 95% of people saying they would use AR (30% before). As well as lot of amazing anecdotal feedback people saying how fun and much clearer it was compared to the old system etc.
And on social media, the arrow is always I massive hit, pulling in 1000s of views and amazing comments asking when their local stores are getting it!