A Use Case for Augmented Reality

3 minute read along with visual samples

Background

At the time of writing (April/May 2020) the world is going through something we’ve never experienced before. There’s no doubt you dread the daily headlines as much as I do so I won’t attempt to summarize what’s already known.

The crisis has, however, given me time and thought into how emerging technologies could potentially help people avoid physical contact, pick up some DIY skills, and fix problems that you’d normally rely on others for via physical service offerings.

I’m going to focus on one of these problems:

Fixing a bike puncture...

image of bike puncture

I’ve been interested in augmented reality for a few years now and believe it has endless potential for all types of businesses and services.

Because the technology is still in its infancy, I haven’t delved into any particular technology stack or operating system due to the trial and error nature of such.

Instead, I have been learning the fundamentals of 3D, immersive design and discovered the overlaps with more traditional design aspects (storyboarding, interface design etc.) along with both daunting and exciting new things associated with designing for physical spaces.

AR and VR items

Some AR/VR literature and headsets I've played around with over the past couple of years.

This work is both a hobby and also preparation work for when AR/VR becomes more mainstream. While it may not matter much today, it's helping me to get ready for exciting challenges in the future.

Process

In order to get a better understanding of bike repair specifics, I went on to YouTube and looked at some popular videos on how to replace the tube of a wheel. From urban gardening to car repair, YouTube is well known for having a community of users that post DIY video tutorials on a wide variety of subjects. With that in mind, it felt like a good place to start. I viewed a number of bike puncture repair tutorials and jotted down the various steps involved with fixing a puncture.

In addition to this I contacted a family member who has repaired his own bike on a handful of occasions. He came to mind as I recall him hiring a bike repair specialist to do a workshop with his employees on how to fix a punctured tube.

I then compiled my findings and created a high level journey map and storyboard.

bike puncture journey map

Here's a high level journey map I made which shows the various stages of fixing a bike puncture and the core actions for each stage that the user must take.

bike puncture storyboard

This is a simple storyboard of some of the main user interactions. You'll see an audio symbol in some parts, as voice instructions would play a useful role in helping the user with each task. It would also help to eliminate some UI clutter from the user's view.

These items gave me a solid platform in which to make the high fidelity designs from. I used a free and fantastic application called Blender 3D to create these. As the name suggests, Blender 3D is a tool for 3D modelling, texturing and scene creation. You can make all kinds of things with it and its assets can be exported to game engines such as Unity where actual AR/VR apps and games can be made.

High Fidelity Examples

I made the 3D environments using a tool called Blender and the user interfaces with Sketch. The environment designs here are essentially "mockups" of a real life setting - in this case a back garden of a house.

I also availed of some of the Google Daydream templates for UX best practices when designing for physical/3D surroundings.

A 3D environment

(1 of 10) The 3D environment I made using Blender with guideline parameters sourced from Google Daydream developer tools.

selecting popular DIY tutorials

(2 of 10) Here the user is viewing popular DIY tutorials for the garden where repairing a tire puncture is one of the options

notification of equipment needed

(3 of 10) When a user selects the tire puncture tutorial, they are given a warning that certain equipment is required. This saves them from entering the tutorial only to find that they don't have the tools to complete the task.

bike rotate

(4 of 10) The first step is to flip the bike over in order to take the wheel off. AR rotate arrows prompt the user what to do.

upside down bike

(5 of 10) Now the bike is upside down and the user is prompted with the next step...

spanner required

(6 of 10) AR highlights the bolt (in amber) and indicates to the user what utensil (spanner) is required and how to do it...

spanner in the right place

(7 of 10) When a user applies the actual spanner, the targeted area turns green - implying that they have targted the bolt correctly.

remove the tire

(8 of 10) With the wheel removed, the next step is to remove the tire. Again the AR assists with what to do next...

insert the lever

(9 of 10) Once again the AR signals to the user that the correct area has been targeted.

insert the tube

(10 of 10) The final step before reassembling the wheel is to show the user who to correctly insert the new bike tube.

Lessons learned

  • Steep learning curve from 2D design: There is so much more to consider when it comes to designing for immersive experiences. User safety, scene composition and natural light are just a few of the additonal aspects that need to be considered when designing for AR/VR.
  • Endless possibilties: The absence of screen constraints gives you a variety of options you would otherwise not have.
  • Prototyping tools needed for designers: No Invision, Framer, Adobe XD equivalent exists yet. This is something I intend to explore further to see how a prototyping tool would work for AR/VR and what "paper prototyping" techniques could be employed for this medium.