Portfolio Piece

Team

My Role

Analyst / Designer

Anna-Kay Williams

Project Owner / Researcher

Maxie Tran

Illustrator / Animator

Keith Brown

Game Designer

Attheera Tapduangkeo

Game Programmer

Overview

As a team of five, we were tasked with exploring current innovations and industry practices in the area of augmented reality. This knowledge 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.

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 analyse 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 slidedeck.

Slide Examples
Slide Examples

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
Child Persona Example

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 expect to see a loading screen so that I know what’s happening with the system.

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 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.

I then created a screen flow to demonstrate the path a user takes upon opening our app.

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.

Screenflow
Screenflow and Wireframe Example

We then tested our initial prototype with users. This feedback was incorporated into several design iterations where we made continuous UI and UX improvements.

User Testing
User Testing

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

UI Slide Examples
Design Rationale Slides