Project Summary

Create an augmented reality tablet-based presentation tool for the Visa London analytics team. Application will be used both during guided presentations to a group and stand-alone by individual users.

Application would primarily be used to tell a narrative using EU and non-EU maps and demographic/sales data. Narrative must be ‘customizable’ in the sense that the presenter should be able to enter and exit storylines at will based on their audience.

Project Stats

Role: UX Designer – low/medium fidelity wireframes, UI design, interaction design, user testing

Team: 02 Designers, 01 UX Designer. 02 Developers, 01 Producer, 01 Tech Director

Wireframe Iterations: 07

Duration: 01 month

UX Challanges

• Designing comfortable ergonomics for one and two handed tablet use
• Ensuring UI doesn’t clutter the AR experience but is always accessible
• Designing a graceful pause and resume state for presentations
• Making sense of huge datasets and presenting them clearly to users

Initial Wireframes

From these initial wires, the client explained that they also wanted the ability to have ‘deep dive’ data accessible from certain graphs. They also clarified the need for a ‘data ticker’ displaying global and selected data in the second globe storyline.

I also determined that there was a more intuitive way to allow users to be able to see more of the AR view while having the on-screen UI be always accessible. Another piece of the experience I workshopped was instead of make the timeout screen time based, it made more sense for this to be user controlled, mainly for the presenters’ benefit.

Wireframe Iteration 05

On-screen UI is now hidden by a ‘drawer’ on the left-hand side. This serves a dual purpose of using more screen real-estate for the AR experience as well as planning for an extensible experience: As more storylines are added and more sub-category icons are inserted into this drawer, overflow icons can be accessed via a scrollbar in this lefthand drawer menu. The pause screen is now a full-screen image that can be user controlled to accommodate a user moving the tablet away from the target image to address presentation materials.

Designs (first iteration)

Wireframe Iteration 07

After breakout sessions with our developers, we determined that the data the client wanted us to present had a lot more variables and flexibility than we initially planned for in the UI. Because of this, I proposed the addition of more hidden drawers of controls for the story lines. This solution had the benefit of not cluttering the AR view and being a familiar functionality that could conceal the complex data interactions the client wanted to visualize.

Low fidelity whiteboard of new interface:

Final UI