Augmented Reality

Overview

As a team of five, we were tasked with exploring current innovations and industry practices in the area of augmented reality. This research was then used to create an interactive children’s book. Taking advantage of our mixed disciplinary team, we covered aspects of user experience design, interactivity, animation, and gamification.

Team

My Role
Analyst / Designer
Anna-Kay Williams
Project Owner / Researcher
Maxie Tran
Illustrator / Animator
Keith Brown
Game Designer
Attheera Tapduangkeo
Game Programmer

Competitor Analysis

As our augmented reality children’s book required a unique evaluation method, I researched and compiled a list of 20+ AR design principles adapted from academic and industry sources.

I then used the list to evaluate the competition in order to analyze usability problems. Good and poor execution of our principles were noted during each app walkthrough.

Studying competitor UIs helped the team gain an understanding of UI conventions in children’s apps, as well as an understanding of existing AR app patterns. Below is an example heuristic that was presented in a slide deck.

Heuristic Slides

 

Personas

Using qualitative evidence from original research, I created several personas to aid in the design of the app. Rather than focusing on superficial qualities like age or gender, I developed personas based on actionable insights.

Child Persona

 

User Stories

As an exercise to mentally walk through the required functionality of our app, I created user stories that outlined user expectations and needs. Conducting this brief exercise allowed me to suss out the required team tasks, as well as the user experience before sketching out the wireframes.

Example User Stories

  • As a user I need to know when I have accomplished the game goal so that I can move on to the next task.
  • As a user I expect to see a loading screen so that I know what’s happening with the system.
  • As a user I expect to be able to set the difficulty of the game so that it isn’t too hard or easy for my age.
  • As a parent I want to restrict access to the internet to keep my child safe.

 

Wireframes and Screen Flow

I then created a screen flow to demonstrate the path a user takes after opening our app, followed by wireframes of each screen.

 

Screen Flow

Screen Flow

 

Once we had a general idea of the app’s content and flow, I created low-fidelity wireframes in Illustrator. Each screen’s layout took into account previous research and our hands-on analysis.

We then uploaded them to a prototyping tool to view the screens on various phone sizes for critique. In doing so we were then able to make further design revisions.

User Testing

User Testing

 

Design Rationale

The final user interface design was presented along with explanations uncovered during the research and testing process.

Design Rationale Slides

User TestingScreenflow and UI

Screenflow and UIScreenflow and UIScreenflow and UISaveSave

SaveSave

SaveSave

SaveSaveSaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSaveSaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

Related Projects