UI/UX Design for AR Urban Wildlife App
Year: Fall 2018
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.
Role: Fourth-year design capstone project
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, spending the next few weeks:
-
Conducting extensive desk research on urban coyotes.
-
Interviewing local experts on urban wildlife and coyotes.
-
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.
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 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.
Final UI Design
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.