Coexist-Header.png

UI/UX Design for AR Urban Wildlife App

Year: Fall 2018

Role: Solo project 

Client: Personal capstone project

Problem: How might we empower the public to better coexist with urban wildlife?

Solution: AR app that introduces users to local wildlife through location-based animations and educational content.

After researching local challenges with urban wildlife for my capstone project, I discovered that public ideology about what is "natural" or "unnatural" in cities impacts our actions towards wildlife. I wanted to design a solution to make urban wildlife more visible and break down the stigma that these animals don't belong in urban neighbourhoods.

The COEXIST App uses Augmented Reality (AR) to introduce urban residents to the wildlife living in their city through location-based animations and coexisting "tips" specific to local species.

By making our wildlife “neighbours” more visible, I hope to remind urban residents that we already coexist with wildlife everyday and by managing our own actions, we can live together peacefully.

Project Goals

Introduce users to urban wildlife they unknowingly coexist with every day

Reassure users that urban wildlife belong in their neighbourhood 

Educate users on how they can coexist peacefully with urban wildlife

Key Deliverables

01.

Background

 Research

02.

System

Map

03.

User Flow

Design

04.

UI Design 

Prototype

Background
Research

Understanding the problem

 

I started this project with a focus on urban coyotes, as negative coyote interactions were gaining media attention and being reported more frequently than previous years. I was curious to learn more about the current relationship between humans and coyotes in urban spaces to better understand what was occurring.

 

I conducted a deep research dive into the topic, spending the next few weeks:

  1. Conducting extensive desk research on urban coyotes. 

  2. Interviewing local experts on urban wildlife and coyotes.

  3. Conducting site visits to common coyote interaction locations.

Site visit photo: Garbage can be a food source for coyotes, creating an unhealthy relationship between coyotes and humans in residential areas. Photo by Courtney Clarkson.

Site visit photo: Sign at park entrance warns visitors about coyotes. Photo by Courtney Clarkson.

 
 

Mapping the Problem

System Map Design

 

After conducting my initial research, I designed a system map detailing the cycle of escalation that occurs when human behaviour interferes with urban coyotes.  

Urban Wildlife System Map

System Map: I created this system map to illustrate how human behaviour escalates negative relationships with urban coyotes.

Defining the problem

 

One of the key outcomes of this exercise was identifying the link between human behaviour and urban wildlife challenges, and the link between human behaviour and worldview. 

When our ideology categorizes “nature” and “city” as separate entities, we do not believe that wildlife belongs in the city.

This concept became the foundation of my project when I expanded the problem scope to include other urban wildlife, as this ideology applies to all species. This lead me to my project statement:

How might we empower the public to better coexist with urban wildlife?

Brainstorming
Solutions

Ideation sessions with classmates

As part of my solution ideation, I was involved in two brainstorming exercises with the class where we collectively pitched solutions to address my 'How might we..." statement.

This allowed me to get feedback on my ideas and discuss the pros/cons with a fresh perspective.

 

Designing the app experience

Information Architecture

I created a sitemap to map out the user flow and organize the mock-ups that needed to be created to illustrate the experience.

Coexist High-level Site Map
Coexist High-level Site Map

press to zoom
Coexist Site Map with Mock-ups
Coexist Site Map with Mock-ups

press to zoom
Coexist High-level Site Map
Coexist High-level Site Map

press to zoom
1/2

Final UI Design

Coexist-intro%2520photo-2_edited_edited.

CONCEPT OVERVIEW

 

The COEXIST App concept uses Augmented Reality (AR) to introduce urban residents to the wildlife living within their city. AR Trigger installations would be installed around the city to alert users about the available locations. Once the user installs the app, scanning the installation results in an AR scene that includes the species native to that ecosystem.

The final prototype included a high fidelity mock-up of the COEXIST app, created in Adobe XD.   

Public AR trigger installations

Discover "trigger objects" around the city to prompt app download

The user experience with COEXIST begins with an encounter with one of the site-specific installations. These colourful animals include call-to-actions for the user to download the app and meet their wild “neighbours” through AR.

Onboarding + camera access

Introduce the app quickly & simply

The introduction screen provides a quick overview of the application before directing to a camera permission screen. 

Skipping the "create an account" step allows the user to begin playing with the app before committing to signing up.

After the intro sequence, the app guides the user to centre the trigger object in the phone screen, activating the AR scene available in that area.

Edit human factors in real-time

Human behaviour filters allow users to change the AR scene to see the impact on wildlife 

By entering the “filters” screen, the user can change the human impact sliders to change the scene.

 

This feature shows the impact of human actions over time through interactive exploration, while the “?” buttons explain why specific actions make a difference.

Learn about local species

Learn how to be a better neighbour 

Users can select a species to read a short summary. From here, they can choose to see more detailed information about the species, see uploaded photos, or upload their own photo of the species. 

 

By integrating City of Calgary’s Wildlife Monitoring data, COEXIST would allow users to see the number of local sightings of a species. Through exploring different species, users learn how their actions impact their wild neighbours and how they can make a difference.

Species-specific information screens provide more information, including recent sightings in the area, conservation status, human actions impacting this species, and interaction tips. 

Upload your own photo

Share a photo of wildlife you've encountered

The app also provides a photo sharing opportunity so users can view and share images of the species in the local environment. Building off City of Calgary’s “Calgary Captured” program, this feature shows users examples of how wildlife currently coexists within our urban environments.

 

Project Outcomes

This project was showcased during our final Information Design showcase event, titled Humanly. During this event, I had the chance to discuss this concept with a variety of visitors and gather feedback on the concept.

This app was also showcased at the 2019 Alberta EcoTrust Environmental Gathering event, where I had the opportunity to discuss the concept with environmental professionals, non-profit organizations, and interested developers.

Humanly, Information Design capstone showcase: Photo credit unknown.

2019 Alberta EcoTrust Environmental Gathering: Photo credit Ben Kunz.

Learnings

Persona development is key to a successful solution. During my research, I focused mainly on desk research and expert interviews, neglecting to gather insights from the public outside of peer focus groups and the final presentation.

 

If I was to redo this project, I would have taken the time to speak with a variety of user segments (individuals living beside wildlife corridors, new Canadians, wildlife lovers/haters) to better empathize with the user.

Start user testing/validating early. This project would have benefited from initial user tests, such as paper prototypes or low-fidelity wireframe prototypes, to gather user feedback earlier in the process and better identify user needs early in the process.​

Consider a less animation-dependant solution. The current implementation would require significant resources, and there might be a way to get the same results without relying on responsive animations.