Client:
Diageo

Specialisms:
Design leadership, concept design, UI/UX, interaction

Johnnie Walker Bartend.ar

We developed an Augmented Reality (AR) App for crafting Johnnie Walker cocktails. Currently live, the app is in its second iteration, with a final update planned to refine transitions and interactions for an enhanced AR experience.

As the Head of Product Design and Lead Designer for the Augmented Reality Cocktail Mixing App, my role has been pivotal in shaping the project's vision and execution. Responsible for overseeing the entire design process, I played a key role in conceptualizing the app's user experience, ensuring a seamless blend of augmented reality elements with intuitive and engaging UX/UI design.

Background

The project originated from the innovation lab at Diageo, with whom we maintain a close collaboration to breathe life into their groundbreaking ideas. After a successful trial at a Johnnie Walker festival in Brazil, the decision was made to expand the project into a comprehensive, full-scale version. The technology's versatility extends beyond the cocktail-mixing app, as it will also be integrated with other products, such as a QR code on gift packages. This background underscores the project's evolution from conceptualization to real-world application and its integration into broader brand initiatives.

Project challenges and constraints

Technological Integration

Navigating the seamless integration of AR elements posed a unique challenge, requiring close collaboration with external AR specialists.

User Accessibility:

Ensuring the app is user-friendly for individuals with varying technical backgrounds presented a design challenge, necessitating intuitive interfaces and clear instructions..

Localisation Complexity:

Managing multi-language support for a global audience introduced complexities, requiring careful consideration for cultural nuances and linguistic differences.

Glass Placement and Scaling:

Finding an optimal solution for placing and scaling virtual glasses in the AR space proved challenging, with several iterations and user testing needed for refinement.

Transition and Interaction Refinement:

Fine-tuning transitions and interactions emerged as a crucial task in the second iteration, addressing aspects that developers hadn't quite mastered for a smoother user experience.

Limited Testing Environment:

Initial testing in a confined setting at a Johnnie Walker festival posed limitations, highlighting the need for broader testing scenarios to ensure scalability and real-world applicability.

Brand Consistency:

Maintaining brand consistency across varied elements. Using brand colours and fonts that are not best suited for digital apps. Whilst also integrating social media-inspired patterns to QR code integrations required meticulous attention to detail and alignment with overarching brand guidelines.

Matching UI designs

As you will see from the demo this was still required further iterations to align things such as spacing with the UI.

IA, flows, sketches & wires

With a relatively straightforward end-to-end user flow in place, we swiftly transitioned from flows and sketches into low fidelity wires and finally hi fidelity. Aside from the home screen, the challenge focused on creating clear UX and UI that integrated well with the augmented reality (AR) functionality facilitating the user's seamless progression from one stage to another until completion.

Collaborating with the Johnnie Walker team and working within the framework of Johnnie Walker brand guidelines, we developed the high-fidelity designs.
Key screens comprised the landing screen, an age gate pop-up, and the homepage, enabling users to scroll through available cocktail recipes. Upon selection, users seamlessly transitioned into the augmented journey, maintaining a consistent UX and UI pattern across each screen as they progressed through the steps. The final screen entailed conceptualisation and collaboration with 8th Wall to craft an exciting augmented reality (AR) animation, designed for users to eagerly share with their friends.

As the Lead Product Designer for this project,
my role encompassed the transformation of a handwritten questionnaire into a captivating digital format, aiming to capture user data, enhance customer engagement, and facilitate promotion and offer sharing. Leveraging the digital medium, I infused the Diageo magic into the once mundane questionnaire, employing creative conceptualisation and UI/UX expertise.

Following initial sketching, I transitioned directly into low-fidelity concepts. Each set of questions provided an opportunity to challenge the norms of a conventional questionnaire. Drawing inspiration from gamified experiences like Duo Lingo, I aimed to create a distinctive and interactive encounter for each question.

For this project, I conducted some preliminary user testing with the client and the design team. BUt ot be honest, my barometer was If any of the concepts failed to bring me joy or evoke a smile,
I promptly discarded it.

View prototype here