A personalized fundraising website that connects the world-class conservation lab with its audience
Context
Cornell Lab of Ornithology (CLO) is a world-famous research lab that studies the environment through birds and other wildlife. IDEO was asked to create a campaign story to communicate the Lab's five-year strategic plan to its audience.
My contribution
As the sole interaction designer on the team, my primary responsibility was to transform the campaign story into a fundraising website and collaborate with client's web development team to make this vision a reality. This website helped the Lab's fundraising team raise 220M during Covid-19 time.
A personalized fundraising website that connects the world-class conservation lab with its audience
Context
Cornell Lab of Ornithology (CLO) is a world-famous research lab that studies the environment through birds and other wildlife. IDEO was asked to create a campaign story to communicate the Lab's five-year strategic plan to its audience.
My contribution
As the sole interaction designer on the team, my primary responsibility was to transform the campaign story into a fundraising website and collaborate with client's web development team to make this vision a reality. This website helped the Lab's fundraising team raise 220M during Covid-19 time.
A personalized fundraising website that connects the world-class conservation lab with its audience
Context
Cornell Lab of Ornithology (CLO) is a world-famous research lab that studies the environment through birds and other wildlife. IDEO was asked to create a campaign story to communicate the Lab's five-year strategic plan to its audience.
My contribution
As the sole interaction designer on the team, my primary responsibility was to transform the campaign story into a fundraising website and collaborate with client's web development team to make this vision a reality. This website helped the Lab's fundraising team raise 220M during Covid-19 time.
Problem and research
“Our big gift donors are aging and fundraising tool is outdated.”
In early 2020, the Lab transitioned to a new leadership team and needed innovative ways to attract leadership donors, so it requested a constantly updated website. The IDEO team conducted three rounds of interviews to understand the client's needs. I assisted by creating research discussion guides and conducting research. We extracted insights to develop a "CLO Field Guide," a visual tool for sparking conversations and critiques, which we shared with clients during co-design workshops to align the Lab's values and stories.
Problem and research
“Our big gift donors are aging and fundraising tool is outdated.”
In early 2020, the Lab transitioned to a new leadership team and needed innovative ways to attract leadership donors, so it requested a constantly updated website. The IDEO team conducted three rounds of interviews to understand the client's needs. I assisted by creating research discussion guides and conducting research. We extracted insights to develop a "CLO Field Guide," a visual tool for sparking conversations and critiques, which we shared with clients during co-design workshops to align the Lab's values and stories.
Problem and research
“Our big gift donors are aging and fundraising tool is outdated.”
In early 2020, the Lab transitioned to a new leadership team and needed innovative ways to attract leadership donors, so it requested a constantly updated website. The IDEO team conducted three rounds of interviews to understand the client's needs. I assisted by creating research discussion guides and conducting research. We extracted insights to develop a "CLO Field Guide," a visual tool for sparking conversations and critiques, which we shared with clients during co-design workshops to align the Lab's values and stories.
Research insights
How might we codify and share compelling stories as they emerge?
Research insights
How might we codify and share compelling stories as they emerge?
“
I can relate to your behind the scene stories more than missions and plans.
Leadership donors
Need a personalized hook to the lab’s mission so that they can engage deeply.
“
The Lab is a bouquet. I understand each of the flowers, but communicating the whole arrangement isn’t easy.”
The lab
needs consistent language to tell stories so that they can align internally before communicate externally
“
I would like an arsenal of assets at my disposal. I need some new nuggets.”
Fundraisers
need easy access to exciting Lab stories so that they are always up to date.
Fundraising
website
UX direction
Hot-off-the-press
I presented several animated design prototypes to our client and evaluated them based on three criteria: desirability, viability, and feasibility. After client workshops and donor interviews, we aligned on the "Hot-off-the-press" direction for its personalization and clear storytelling structure.
UX direction
Hot-off-the-press
I presented several animated design prototypes to our client and evaluated them based on three criteria: desirability, viability, and feasibility. After client workshops and donor interviews, we aligned on the "Hot-off-the-press" direction for its personalization and clear storytelling structure.
UX direction
Hot-off-the-press
I presented several animated design prototypes to our client and evaluated them based on three criteria: desirability, viability, and feasibility. After client workshops and donor interviews, we aligned on the "Hot-off-the-press" direction for its personalization and clear storytelling structure.
Option 1: Hot-off-the-press
Option 2: Ecosystem
Option 3: Today&Tomorrow
Visual collaboration
Rhymes - look through the birds’ eyes
I worked with the visual designer to explore campaign visual languages. We settled on "rhymes" as an overall direction—play with scale and photo juxtapositions to connect birds to their habitats and the larger world.
Visual collaboration
Rhymes - look through the birds’ eyes
I worked with the visual designer to explore campaign visual languages. We settled on "rhymes" as an overall direction—play with scale and photo juxtapositions to connect birds to their habitats and the larger world.
Visual collaboration
Rhymes - look through the birds’ eyes
I worked with the visual designer to explore campaign visual languages. We settled on "rhymes" as an overall direction—play with scale and photo juxtapositions to connect birds to their habitats and the larger world.
Design principles
Pacing & immersion
Strike a balance between bold, attention-grabbing moves and small, elegant moments to create an emotional experience that can move people's hearts.
Pacing & immersion
Strike a balance between bold, attention-grabbing moves and small, elegant moments to create an emotional experience that can move people's hearts.
Pacing & immersion
Strike a balance between bold, attention-grabbing moves and small, elegant moments to create an emotional experience that can move people's hearts.
Interaction is storytelling
This is an example of how I adopted the “Rhymes” visual language into interaction to support storytelling.
Interaction is storytelling
This is an example of how I adopted the “Rhymes” visual language into interaction to support storytelling.
Interaction is storytelling
This is an example of how I adopted the “Rhymes” visual language into interaction to support storytelling.
Mobile usabilities
I designed two sets of thumbnail sizes to ensure the graph fits various screen. For screens outside the common range, the graph follows the user’s dragging to keep the selected thumbnail in view. Additionally, a two-click interaction replaced the hover-on interaction on web, allowing them to see the story title before entering the story page.
Mobile usabilities
I designed two sets of thumbnail sizes to ensure the graph fits various screen. For screens outside the common range, the graph follows the user’s dragging to keep the selected thumbnail in view. Additionally, a two-click interaction replaced the hover-on interaction on web, allowing them to see the story title before entering the story page.
Mobile usabilities
I designed two sets of thumbnail sizes to ensure the graph fits various screen. For screens outside the common range, the graph follows the user’s dragging to keep the selected thumbnail in view. Additionally, a two-click interaction replaced the hover-on interaction on web, allowing them to see the story title before entering the story page.
320px * 568px
375px * 812px
428px * 926px
320px * 568px
375px * 812px
428px * 926px
Component library
Story to webpage within minutes
The Lab is rich with stories that can't all be featured on the website. To enable the Lab to share up-to-date research after IDEO's project ends, I created an editorial component library in Figma. This allows researchers and storytellers to quickly transform their stories into beautiful webpages. Below are examples built with this component library.
Component library
Story to webpage within minutes
The Lab is rich with stories that can't all be featured on the website. To enable the Lab to share up-to-date research after IDEO's project ends, I created an editorial component library in Figma. This allows researchers and storytellers to quickly transform their stories into beautiful webpages. Below are examples built with this component library.
Component library
Story to webpage within minutes
The Lab is rich with stories that can't all be featured on the website. To enable the Lab to share up-to-date research after IDEO's project ends, I created an editorial component library in Figma. This allows researchers and storytellers to quickly transform their stories into beautiful webpages. Below are examples built with this component library.
Scroll to see more
Impact
“We are so fortunate that this tool became available during Covid when our gift officer can’t visit donors in person."
— Bramble Klipple, Lab Director
Impact
“We are so fortunate that this tool became available during Covid when our gift officer can’t visit donors in person."
— Bramble Klipple, Lab Director
Impact
“We are so fortunate that this tool became available during Covid when our gift officer can’t visit donors in person."
— Bramble Klipple, Lab Director
Research insights
How might we codify and share compelling stories as they emerge?
Research insights
How might we codify and share compelling stories as they emerge?
“
I can relate to your behind the scene stories more than missions and plans.
Leadership donors
Need a personalized hook to the lab’s mission so that they can engage deeply.
“
The Lab is a bouquet. I understand each of the flowers, but communicating the whole arrangement isn’t easy.”
The lab
needs consistent language to tell stories so that they can align internally before communicate externally
“
I would like an arsenal of assets at my disposal. I need some new nuggets.”
Fundraisers
need easy access to exciting Lab stories so that they are always up to date.
Fundraising
website
“
I can relate to your behind the scene stories more than missions and plans.
Leadership donors
Need a personalized hook to the lab’s mission so that they can engage deeply.
“
The Lab is a bouquet. I understand each of the flowers, but communicating the whole arrangement isn’t easy.”
The lab
needs consistent language to tell stories so that they can align internally before communicate externally
“
I would like an arsenal of assets at my disposal. I need some new nuggets.”
Fundraisers
need easy access to exciting Lab stories so that they are always up to date.
Fundraising
website