UX/UI, AR

After

Overview
After is an augmented reality game for iOS that combines benefits of kinesthetic learning and the popularity of AR games to prepare high school residents of Red Hook for the few days after a flood, when they must seek resources and navigate the transformed landscape.
Role
Product Designer
Team
John Boran Jr.
Yanging Ye
Gustav Ole Dyrhauge
Phuong Anh Nguyen
Responsibilities
UX/UI
Prototyping in AR

problem

People don't know where to gather resources after a flood

Hurricane Sandy dramatically altered the physical landscape of Red Hook, Brooklyn. When this happened, emergency resource stations opened to serve the community. When Red Hook flooded, many community members struggled to navigate their neighborhood and locate the emergency stations.
"We’re struggling to get people involved and build community resilience."
Marlene Pantin, subject matter expert
Director of Red Hook Conservancy

context

Climate change means more and bigger storms like Hurricane Sandy

The neighborhood of Red Hook, Brooklyn, NY is one of the most low-lying areas in New York City. In 2012 Hurricane Sandy caused it to flood more than any other area in New York City. Most Red Hook residents didn't evacuate for fear of losing their belongings and homes. They struggled to orient themselves in a changed natural environment and gather resources for their families.
Hurricane Sandy Inundation Zone, 2012. Red Hook Houses highlighted in orange.
Image by Emily Schmidt, based on shapes from NYC Open Data.

opportunity

Turn emergency response preparedness into an augmented reality game to enable kinesthetic learning

Gameify the collection of resources in a post-disaster landscape to build community resilience in the midst of climate change.

After speaking with users, the team learned of their affinities for games like Fallout 4 and Pokémon Go. We saw an opportunity to gameify the task of teaching secondary students about emergency response measures. Our solution uses augmented reality to leverage kinesthetic learning practices in a new way.

research

Kinesthetic learning

Kinesthetic learners, those who learn best through physical awareness and muscle movement, may account for as much as 45% of the population
There exists positive high correlation between Kinesthetic Learning Style and academic achievement of [secondary] students.
Chiray K. Bajaj College of Education
Learning Style and Academic Achievement of Secondary School Students Study

Research

User interviews

We conducted user interviews and gained insights from two people who lived in the Red Hook Houses during Hurricane Sandy.
Max Roelvink
High School Student
overview
Max lives in the Red Hook Houses and was severely affected by Hurricane Sandy. His apartment was looted and power wasn't restored for 4 months.
challenges
  1. Knowing what to prepare.
  2. Knowing where to gather provisions in the few days after a flood.
  3. Protecting his and his father's belongings from looting.
"My dad and I weren't ready. We didn't know what to do [after the storm]."
Location
Red Hook, BK
Age
18
Mapping the AR scene

Physical prototype

The team conducted physical testing by setting up a mock neighborhood and giving participants a paper key. Participants found stations and collected resources. This helped the team understand the game flow and core features to design.
Mapping the User Experience

User flows

After observing users navigate the game manually, the team created a map of features users found vital to the app.

Feature prioritization

The team received feedback from the physical prototyping session, and then prioritized the features that were core to the users' understanding of the app.
  • Onboarding tutorial
  • Navigation between AR view and Map view
  • Mission toolbar
  • Resource station navigation
  • Mission levels
Low-fidelity wireframes

Augmented reality view

The team then began to design the app's content architecture, which changed throughout several iterations and user testing.

Easy to switch between AR view and map view

user testing

iOS mockup

We then tested the mockup with would-be users in a lower manhattan park. The team received feedback that informed the next iteration.
High-fidelity wireframes

Introduction

How it works

Google Maps x Pokémon GO x Fallout 4

The player can choose from one of three missions. Each level is designed to engage youth in different preparedness strategies and variables.

The app draws inspiration from the popularity of Pokémon GO and the post-apocalyptic feel of the video game Fallout 4.
Gameplay

Navigating your neighborhood

Digital Prototype

Unity + Vuforia SDK

The player can collect a resource, such as a flashlight, by following the GPS map and coming within several feet of the item. An animation will surround the item indicating that it is then in their possession. The player can choose to leave it behind at certain checkpoints when their bag is full for other players to collect or bring it home for their family.

Gameplay demonstration

After is a tool for feedback from Red Hook residents. It has been designed to be taken into the field and continually tested while implementing user feedback to build new features. It could serve as a proactive tool to inform community strategies as New York City neighborhoods prepare for the next one.