UX & UI to mobile AR experience for Apple

Apple one of the best known companies in the world. I had the privilege working with this client through Hogarth Worldwide, and my mission here was to design an experience for a specific flow of an AR campaign.

Context & Goals

Apple idealized an innovative way to help resellers highlighting the benefits of Apple’s devices: an interactive AR (Augmented reality) experience from a QR Code, which led to 4 different web pages.

The Focus

Besides working on the general prototype, my team was responsible to work on one of this flows – “Ask Andrew”. I was responsible to define the UX and UI for this pages, totally mobile-focused.

The Challenge

“Ask Andrew” flow should be a FAQ page, but smarter: The technology behind it would be able to suggest other results that may be related to the search and also the system would give a friendly feedback, with a pleasing language.

Kick Off:
It's time to question

We started understanding the project in depth: I was responsible to drive workshops alongside the team and stakeholders to make all sorts of questions that would help understanding the project from a bigger perspective:

What should be the outcome of this experience?

Who will be using? How often and why?

What are the most important aspects of this experience?

The Campaign
& AR Trigger

The reseller’s target company or user would receive a physical box with a coffee cup gift and QR Code inside, giving instructions to scan it with their phone. After that, an AR experience would appear, showing “floating” buttons around the cup – inviting the user to interact and click. When the user clicks on “Ask Andrew”, he is directed to a web page where it’s possible to ask questions and get answers from various aspects of Apple’s products.

Sketch drawing created to demonstrate the basic mechanics of the AR Experience

The UX

Talking Apple, I was already aware that the brand guidelines were very straight-foward, so I could predict that the challenge would be more related to the UX than the UI. After studying the guide carefully, I started to work on the flow, hierarchy of elements and heading tags.

First studies about hierarchy of elements on the page

Wireflow of screens & UI, demonstrating the interactiveness of “Ask Andrew” section

Prototype

This high fidelity prototype on an internal restricted tool was created to demonstrate the basic interactions and logic of the flow. CSS and micro-interactions are not yet included, but approved through references with the client.

Outcome

At this point, managers and stakeholders decided to proceed focusing more on other aspects of this project, before launch.

Credits & Mentions

Account, Project Management, AR & Technology Team, Creative Director, UX UI Design, Business Analysis (BA); Stakeholders: Hogarth Worldwide UK, Apple; Execution: Hogarth Brazil

Main Design Tools: Pen & paper (always my starting point!), MIRO for remote workshops, Adobe XD for UX UI