About the client
Birds Canada is a nonprofit organization dedicated to bird conservation through research, education, and citizen science. They rely on volunteer Citizen Scientists to collect data on bird populations over time. To support this effort, we worked with them to develop a mobile application that simplifies data collection in the field and a web app that transforms this data into stylized reports for public engagement.
ROLE
Design Lead at Punchcard
CONTRIBUTOR CREDITS
Shaylena Stenback
(Watercolour art)
PLATFORMS
Web app
TECH USED
Figma
scroll down
Project overview
Birds Canada has traditionally compiled its bird science data into reports. This year, their goal was to create a more engaging digital report that incorporates storytelling elements, making the data more compelling and accessible. By doing so, they aimed to inspire Canadians to engage with the findings, understand the state of bird populations, and take action to support conservation efforts.
Project overview
Birds Canada has traditionally compiled its bird science data into reports. This year, their goal was to create a more engaging digital report that incorporates storytelling elements, making the data more compelling and accessible. By doing so, they aimed to inspire Canadians to engage with the findings, understand the state of bird populations, and take action to support conservation efforts.
Project Goal
The aim for this project was to create a living report that could educate the community on the status of Canada’s bird populations today, how they have changed over time, and what we can all do to help the birds that call Canada home.
Project Goal
The aim for this project was to create a living report that could educate the community on the status of Canada’s bird populations today, how they have changed over time, and what we can all do to help the birds that call Canada home.
Problem Statement
As a radio listener, I am trying to discover new music and artists, but I can only listen to certain content on CKUA radio because the programme segments are available live only at a specific time. This makes me feel left-out and not in control.
Wireframes
I began with wireframes to establish both the storytelling approach and the site's UX. Given the animation-heavy design, I structured the experience like a storyboard, guiding users through the content as a narrative. This provided a strong foundation for discussions with the client, helping us refine the story we wanted to tell. I also used wireframes to illustrate my vision for animations and incorporated rough imagery from the web to communicate the UI style and watercolor illustration direction, as we planned to collaborate with an illustrator for the site’s visuals, allowing for quick iterations based on client feedback
Wireframes
I began with wireframes to establish both the storytelling approach and the site's UX. Given the animation-heavy design, I structured the experience like a storyboard, guiding users through the content as a narrative. This provided a strong foundation for discussions with the client, helping us refine the story we wanted to tell. I also used wireframes to illustrate my vision for animations and incorporated rough imagery from the web to communicate the UI style and watercolor illustration direction, as we planned to collaborate with an illustrator for the site’s visuals, allowing for quick iterations based on client feedback
Wireframes
I began with wireframes to establish both the storytelling approach and the site's UX. Given the animation-heavy design, I structured the experience like a storyboard, guiding users through the content as a narrative. This provided a strong foundation for discussions with the client, helping us refine the story we wanted to tell. I also used wireframes to illustrate my vision for animations and incorporated rough imagery from the web to communicate the UI style and watercolor illustration direction, as we planned to collaborate with an illustrator for the site’s visuals, allowing for quick iterations based on client feedback
Mockups
I created all the mockups, incorporating placeholders for the watercolour artwork we planned to commission from an illustrator. Since visuals played a crucial role in user engagement for this project, we dedicated effort to not just the UX and infographic design but also the overall UI design.
Mockups
I created all the mockups, incorporating placeholders for the watercolour artwork we planned to commission from an illustrator. Since visuals played a crucial role in user engagement for this project, we dedicated effort to not just the UX and infographic design but also the overall UI design.
Mockups
I created all the mockups, incorporating placeholders for the watercolour artwork we planned to commission from an illustrator. Since visuals played a crucial role in user engagement for this project, we dedicated effort to not just the UX and infographic design but also the overall UI design.
Digital storytelling
The client and I chose a visual direction that evoked the experience of looking through a field book. Traditionally, bird scientists recorded their observations in field books, and while modern research now relies heavily on technology, we wanted to pay homage to the origins of bird science.
Digital storytelling
The client and I chose a visual direction that evoked the experience of looking through a field book. Traditionally, bird scientists recorded their observations in field books, and while modern research now relies heavily on technology, we wanted to pay homage to the origins of bird science.
Digital storytelling
The client and I chose a visual direction that evoked the experience of looking through a field book. Traditionally, bird scientists recorded their observations in field books, and while modern research now relies heavily on technology, we wanted to pay homage to the origins of bird science.
Population trends
We needed to present infographics in a way that was clear and accessible to everyday users without domain expertise. To achieve this, I focused on simplifying the visuals as much as possible while ensuring they were intuitive and functional across both desktop and mobile.
Population trends
We needed to present infographics in a way that was clear and accessible to everyday users without domain expertise. To achieve this, I focused on simplifying the visuals as much as possible while ensuring they were intuitive and functional across both desktop and mobile.
Population trends
We needed to present infographics in a way that was clear and accessible to everyday users without domain expertise. To achieve this, I focused on simplifying the visuals as much as possible while ensuring they were intuitive and functional across both desktop and mobile.
Population change status
Some of the infographics on the site presented complex data that could be challenging for users without domain knowledge to interpret. To make them more accessible, I incorporated legends to help guide users in understanding and distilling the information more easily.
Population change status
Some of the infographics on the site presented complex data that could be challenging for users without domain knowledge to interpret. To make them more accessible, I incorporated legends to help guide users in understanding and distilling the information more easily.
Population change status
Some of the infographics on the site presented complex data that could be challenging for users without domain knowledge to interpret. To make them more accessible, I incorporated legends to help guide users in understanding and distilling the information more easily.
Final thoughts
This project had a tight timeline and required input and approval from multiple stakeholders, making it a fun challenge to navigate. It was a great opportunity to exercise my creative storytelling skills, and I especially enjoyed collaborating with the contracted illustrator to bring my design vision to life. I also loved working on motion design, creating prototypes and storyboards for the developers to refine the site’s interactions and animations. Knowing that my work contributed to Canada’s sustainability initiatives, and ultimately had a positive impact on the environment, made this project especially rewarding. It’s always fulfilling to see design making a real difference in the world.
Final thoughts
This project had a tight timeline and required input and approval from multiple stakeholders, making it a fun challenge to navigate. It was a great opportunity to exercise my creative storytelling skills, and I especially enjoyed collaborating with the contracted illustrator to bring my design vision to life. I also loved working on motion design, creating prototypes and storyboards for the developers to refine the site’s interactions and animations. Knowing that my work contributed to Canada’s sustainability initiatives, and ultimately had a positive impact on the environment, made this project especially rewarding. It’s always fulfilling to see design making a real difference in the world.
Final thoughts
This project had a tight timeline and required input and approval from multiple stakeholders, making it a fun challenge to navigate. It was a great opportunity to exercise my creative storytelling skills, and I especially enjoyed collaborating with the contracted illustrator to bring my design vision to life. I also loved working on motion design, creating prototypes and storyboards for the developers to refine the site’s interactions and animations. Knowing that my work contributed to Canada’s sustainability initiatives, and ultimately had a positive impact on the environment, made this project especially rewarding. It’s always fulfilling to see design making a real difference in the world.
