Augment Reality Prototype

UX Design

The Project & My Role

In design school, I worked as a UX Designer for the GBC Office of Research & Innovation. We were a small group of students and faculty hired to create product prototypes for businesses.

In my final year, we were contracted by a large North American hardware retailer to create an augmented reality prototype.

The Task

Investigate how the client could incorporate augmented reality into their existing mobile app.

Customer & business impact:
TBD—we were contracted to explore how AR could be incorporated into their mobile app.

My Role

Tools Used

Duration

Deliverables

Team Size

UX/UI Designer
Illustrator
Figma
Wiarframe
Unity
9 months
Working prototype
6
An GIF of the augmented reality prototype being used on a street.

Step 1. Client workshop

We took a broad look at the visions and goals of the company as well as what the client's goals were for the prototype. We also examined customer pain points.

With the clients, I examined opportunities and gaps in their service spectrum: in-store, online and mobile. Then I mapped where augmented reality might create opportunities and bridge gaps.

Why? 

Outcome

Our team was able to align with the client on the needs of the user and understand how their service spectrum works across in-store, online, and mobile.

A whiteboard with sketches and sticky notes.
A whiteboard with sketches and sticky notes.
A whiteboard with sketches and sticky notes from a client workshop.
Client workshop, plotting goals and values into the service spectrum
A mixture of goals and customer pain points mapped to the service spectrum (App, in-store, online)

Step 2. Precedent research & field study

I researched various AR precedents, including Lowe's, Amazon, and Ikea. These precedents used AR to view products in the user's space or perform measurements from point A to B.

I went to our client's various store locations across Toronto and performed a short field study. I spent time inside asking employees questions and observing customer interactions.

Why?

Insights

Outcome

We created journey maps that helped us find pain points along the user journey that could be addressed. The journey maps also included concerns the clients had brought up in the workshop.

A journey map of the client's customer, purchasing materials for a DIY project. Emotions, pain points, and opportunities are described throughout the customer journey.
One of four journey maps. Click to enlarge.

Step 3. Sketches  / brainstorming sessions

The team began by individually sketching up some ways AR could solve the client and customer pain points we found.

Outcomes

1. A dynamic AR visualization of an appliance. It would populate the intended space showing dimensions and measurements. It would also have open and closing animations to demonstrate how it would function in the user's space.

2. AR that could measure a user's space, and then overlay flooring or paint over the measured space. The app would then tell the user how much of that product the user would need to fill the measured space and direct them to the product page.

A sketch I made of an augmented reality prototype.
A sketch I made of an augmented reality prototype.
A photoshopped image I made of an augmented reality prototype.
Sketches of AR concepts to meet customer needs
Sketches of AR concepts to meet customer needs
Mocked up in Photoshop to give the team a better visual of my concept

Step 4. Wireframing & AR prototyping

After some deliberation, the team chose the second measurement/overlay idea. This idea was more in line with what the company wanted out of their prototype, as opposed to the appliance visualization idea.

After our sketches, I started building wireframes in Figma. Printing them out and placing them on the wall helped us find potential problems with the flow.

A brainstorming session with me team.
A brainstorming session with me team.
Team mapping out the flow

Creating user flows helped us get a better sense of what functionality would be required in the product. We created our user flows after finding gaps in the flow of our wireframes.

A user flow of the prototype.
Final user flow. Click to enlarge.
A GIF demonstrating our augmented reality prototype.

One of my teammates made a visualization of the AR component using Adobe Aero. Aero was a helpful tool because we could demonstrate the core functionality of the app without using a more complex software like Unity.

Step 5. Development

To help out our developer, I learned how to use Unity. I created UI assets in Illustrator and Figma and exported them to Unity. I then animated and coded the UI so our developer could integrate it into the final prototype.

This is the final prototype video we pitched to the client. Our AR prototype was fully functional at this point and could be integrated into the client's mobile app.

Conclusion

Our prototype ultimately didn't make it into the client's app. But working on a team to build an augmented reality app was a great experience.

AR melds digital experiences into the physical world—Building interactions around the medium of a phone camera is an exciting design challenge.
Next Project