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: An AR app which 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.

Key Responsibilities

  • Problem Research

  • Subject-matter Expert Interviews

  • System Map Design

  • Ideation / Sketching

  • User Flow / Sitemap Design

  • UI Design / Prototyping

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


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


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. As urban residents, it is easy to imagine “cities” and “nature” as two different entities. We know that certain wildlife exists outside of our cities, but it is easy to forget that city boundaries do not exist for our wild neighbour’s. We are living in “nature” every day and coexisting with nature all the time.

But most importantly, coexistence is not a choice. Wildlife live in cities too, and therefore, we must learn to coexist with them.

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

Brainstorming solutions


I was involved in two peer brainstorming exercises to help identify a solution. 

The first exercise began with me presenting a summary of the problem to a group of 20+ students. Then the students responded with questions they had that could further my exploration. This was really helpful in gathering feedback on research areas I hadn’t considered, such as identifying systems that create harmony or researching outside of Canada.

This one gets to the root of the problem

The second peer exercise was a group brainstorm, in which a group of 5 peers and myself brainstormed solutions on sticky notes.

Through these exercises, I identified three potential approaches:

1. Re-design neighbourhood infrastructure.  This approach would better suit a specific species problem, which didn’t fit my problem statement.  

2. Educate users on coexistence strategies. Many educational campaigns already exist, therefore this approach might be overdone.

3. Create a tool to shift coexistence perspectives. This approach aligned with my research on the ideological root of the problem, which could provide a more lasting impact.

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

Coexist Site Map with Mock-ups
Coexist Site Map with Mock-ups

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


Final UI Design



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.



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.


More user testing. 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.​

Persona development is key to empathy. 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.

Scene animations would require significant 3D modelling/animation. To create the interactive scenes, this project would require significant support for a 3D modeller and animator. Instead of providing sliders for the user, creating a few pre-created scenes for each location might be a more feasible approach for the artists and produce a similar learning outcome, though this would require user testing and further development to test.