An interactive experience that educates users on the
effects of climate change on migratory bird species.
Role
Designer (Individual Project)
Skills
Branding, Product Design,
Illustration & Photography
Tools
Figma, Procreate, Photoshop,
After Effects
Duration
10 weeks
Project Overview
Climate change has far-reaching implications across all sectors of the environment. One specific example is its effect on migratory bird species.
Bird's Eye View challenged me to concisely explain a complex issue using interaction and discovery. This guide educates users through engaging visuals, simple interactions, and specific narratives to foster empathy and personal connection.
PDF | 16.4MB
Available information is fragmented, which decreases accessibility. There's also a general lack of awareness of the issue, which further hampers conservation efforts. Finally, most of the information available focuses on statistics, creating an empathetic gap.
Create an engaging interactive experience that brings analytical information into a simple and visually engaging format. Bridge the gap between abstract data and personal relevance by using compelling and specific narratives.
01. Research
I conducted extensive research and benchmarking on this topic, the highlights of which are included below. View my project definition or research document for more in-depth information.
PDF | 94KB
PDF | 55KB
Benchmarking
EBird
User-generated information database containing information about migration & bird sightings. Information collected contributes to conservation efforts & helps inform bird research worldwide.
Lots of useful educational information
Information is dense & highly scientific
Merlin Bird ID
Launched in conjunction with eBird, this app assists users in identifying the birds they see. Includes abundance & range maps, photos, and general information about species.
Much simpler & more accessible than eBird
Doesn't discuss effects of climate change
Migrations In Motion
Interactive map showing how animals move in response to the effects of climate change on their environment.
Effective & simple visual representation
Could be more detailed
Lacking bird-specific information
Personas
Bruce the birdwatcher
Bruce wants to understand why migration cycles are changing and how to better predict them. He cares about the conservation of birds and wants to know how he can help.
Needs
Accurate & up-to-date information
Education on impacts of climate change
Guidance on conservation efforts
Polina the Politician
Polina is passionate about fighting climate change and wants to understand its far-reaching impacts. She wants to stay educated so that she can make well-informed policies.
Needs
Data on climate change impacts
Education on factors causing changes
Case studies & examples of successful conservation
Terri the Teacher
Terri wants to find a specific lens through which they can teach climate change. They care about helping their students make a real connection with the material they're learning.
Needs
Engaging & interactive content for their students
Clear explanations of scientific concepts
Material that their students can connect with
Images designed by stories / Freepik
02. Iteration
Sketches & Ideation
Preliminary Sitemap
Rough layout of how the site will be organized.
Sketches
Applying the proposed user flow and working through initial UI compositions.
Round 1
Moodboards
I explored two visual approaches: Mixed Media (left) and Scrapbook (right).
UI Designs
The corresponding UI designs for Mixed Media (left) and Scrapbook (right).
Round 2
My second iterations took elements from both styles. I explored creating a more cohesive visual feel and focusing on clarifying my visual hierarchy.
Round 3
I continued to improve upon the cohesiveness of my branding and strengthening my type hierarchy.
I also focused on removing unnecessary visual elements to simplify screens.
03. Final Designs
From iteration round 3, I had reached a visual style that I felt confident in. From here, I focused on refining UI consistency across all screens and simplifying some UI elements in order to create more whitespace, preventing the compositions from feeling too cramped.
UI Screens
Splash Screen
Card Select
List Select
Vignette Screen
Map Screen
Map Screen - Zone Interaction
Map Screen - Button Hover Zones
Final Prototype
Full prototype video, including splash screen intro animations, card and list selection pages, migration zone interaction demo, time scrubber interaction demo, and transitions between each page.
I was successful in my goals of education through giving users a basic understanding of the topic, raising awareness through creating an engaging interactive experience, and telling a story through small vignettes about specific birds.
I pushed myself to design in a style I wasn't experience with, but I wasn't prepared for the severe learning curve. I would have likely ended up with a more refined final product if I had allowed myself more time for additional rounds of iterations.
Complete a few more rounds of iteration to fully refine the final product
Develop the finalized designs into a functional prototype on Framer or another low-code website builder
Conduct user testing to assess the functionality and usability of the prototype
