UX sample | Content Design

UX case study: Mission and website

Organization: Billion Oyster Project
Platforms: Web and mobile
Role: Communications Manager / UX Copywriter
Focus: Narrative, information architecture, stakeholder alignment

Summary

Background

Billion Oyster Project is an ambitious and beloved nonprofit in New York City that does a lot of work serving many diverse groups of people.

As such, one of their challenges was speaking about their work in a way that was authentic but not confusing.

Goals

They needed a single, clear mission that all their work would ladder up to, instead of long descriptions of all the wonderful work they do.

They also needed an easy-to-navigate website reflecting their mission.

What I did

I designed and led a collaborative, research-driven process for revising the organization’s mission and vision statements, involving all staff and 100+ external stakeholders (see steps I designed below).
I co-designed the architecture of the new website and wrote copy, proactively initiating the steps below.

Results

People unfamiliar with Billion Oyster Project quickly understood our mission and purpose.
Clearer narrative helped our digital audience grow faster.
- Email newsletter subscribers grew by over 65% in one year.
- Instagram audience size grew by over 50% in one year.
The website tells the story of Billion Oyster Project to diverse audiences (e.g., people of NYC, volunteers, teachers, students, corporate donors, press) in a way that helps staff to engage all of these major stakeholders.

Opportunities

For people of NYC

Help me quickly understand the purpose of Billion Oyster Project.
Help me quickly understand how I can get involved.
Help me understand why oysters are significant.

For teachers

Help me quickly get the information I need to consider using Billion Oyster Project curriculum.

For Billion Oyster Project

Help us bring New Yorkers together to:
- Restore oysters to New York Harbor
- Enjoy and protect a healthy, beautiful harbor equitably

Step 1: Research

How do people think about the Billion Oyster Project? Before jumping to exact language or designs, it was important to understand what stakeholders and supporters loved about Billion Oyster Project.

What I did

I designed an (optional) survey for the organization's digital/social audiences. Responses were signal from our "biggest fans" about what they love.
I led brainstorm sessions for staff and board members, including conducting an exercise where I asked every participant to bring a print-out of one image describing what Billion Oyster Project means to them.
- I find that bringing images to the discussion (vs. just words) helps us drill down to concrete concepts faster.
I privately interviewed the founders, making sure that their intentions and passions were at the forefront of our mission and vision statements.

Work sample: Survey for digital/social audiences

Step 2: Analysis of surveys, interviews, and brainstorms

What I did

I analyzed data from the survey above as well as from a similar survey that I made for high school students working closely with Billion Oyster Project. Our learnings included the following insights which influenced our mission, vision, and website:
- Many of our followers listed a park as their favorite place in NYC
- Many people wanted:
  - More updates on oyster reefs and restoration
  - More ecosystem science and updates on biodiversity
I reviewed my interviews with founders and input from staff and board members.
Using survey results, I created personas representative of 3 main audiences that our new mission and vision should serve.

Work sample: Personas

Note: Since Harbor School students worked with Billion Oyster Project as part of their official maritime training and already understood the project deeply, our updates to mission, vision, and website weren't geared toward persona 3. But keeping these talented students top-of-mind as important collaborators and stakeholders was essential.

Additional considerations

(Before my work) people unfamiliar with Billion Oyster Project often thought that we were restoring oysters because they were an endangered species (they're not).
It was very important to the founders to encourage interaction with and affection for New York Harbor as a whole (not just oysters).

What I did

I surfaced and articulated #1.
For #1 and #2: I adjusted our language and storytelling company-wide to focus on the ecosystem benefits of oyster reefs (cleaner water, biodiversity, flood prevention) vs. just oysters.

Step 3: Strategic approach

Synthesizing research results, I proposed that our mission and vision statements—and the language and communications following them—should:

1

Include oyster reefs specifically.

Respects survey results, conveys the large scale of the project, and better emphasizes the ecosystem benefits of oysters

2

Create the impression of New York Harbor as a public space, like a park.

Aligns with our fans' love of parks, and illustrates the harbor as a shared common space that the public deserves to enjoy

3

Include the idea of community, restoring this harbor together.

Aligns with people's desire to get involved and founders' desire to empower people and communities

4

Include the concept of restoration, alluding to the surprising fact that New York Harbor used to be full of oyster reefs.

Sparks imagination and gives hope

Step 4: Defining the north star in plain language

What I did

To gut-check where we were headed with the mission and to further crystalize a concrete image of the future we want to create, I created this document and refined it with the founders.

Work sample: "Guiding lights" document

Step 5: Writing the mission and vision

What I did

I drafted mission and vision statements based on the conceptual direction outlined above.
I integrated feedback that I elicited from staff, board members, and founders to create final versions that now live on the homepage and on official fundraising and communications materials.

Work sample: Mission statement

Work sample: Vision statement

Step 6: Site architecture

What I did

I collaborated with our Deputy Director on the site map, with an eye to making sure that the structure reflected our mission and avoided previous areas of confusion. I recommended:
- The addition of a page specifically about oyster reefs, high on the "Our Work" menu
- The addition of a "Why Oysters" page, high on the "About Us" menu, to speak to the role of oysters as ecosystem engineers

Step 7: Webpage layouts and copy

What I did

I outlined the headings and information that should appear and then wrote copy.

Work sample: History of New York Harbor webpage

My approach

Take people through the historical journey in a browsable, emotionally engaging way. This history of New York Harbor is a surprising story that attracts people and press to Billion Oyster Project. (Big shout-out to my graphic design and research partners, and to the founders and Director for their very clear articulation of what inspired them)!
Provide clear entry points for people to get involved.
Provide clear entry points for people to learn more.
Make sure no one tries to eat oysters from New York Harbor.

Work sample: Volunteer webpage

This is one of the site's most visited pages, linked from many emails and social media posts. Billion Oyster Project attracts thousands of volunteers!

My approach

Be inspirational but also provide extreme clarity about how/where to sign up.
Convey a friendly, welcoming tone.
Demonstrate momentum around, and gratitude for, the people involved already.

Results

People unfamiliar with Billion Oyster Project quickly understood our mission and purpose.
We no longer received questions about oyster extinction (no more misconception of extinction).
Clearer narrative helped our digital audience grow faster.
- Email newsletter subscribers grew by over 65% in one year.
- Instagram audience size grew by over 50% in one year.
The website tells the story of Billion Oyster Project to diverse audiences (e.g., people of NYC, volunteers, teachers, students, corporate donors, press) in a way that helps staff to engage all of these major stakeholders.

UX case study: Mission and website

Organization: Billion Oyster Project Platforms: Web and mobile Role: Communications Manager / UX Copywriter Focus: Narrative, information architecture, stakeholder alignment

Summary

What I did

I designed and led a collaborative, research-driven process for revising the organization’s mission and vision statements, involving all staff and 100+ external stakeholders (see steps I designed below).

I co-designed the architecture of the new website and wrote copy, proactively initiating the steps below.

Opportunities

Step 1: Research

What I did

​

I designed an (optional) survey for the organization's digital/social audiences. Responses were signal from our "biggest fans" about what they love.

I led brainstorm sessions for staff and board members, including conducting an exercise where I asked every participant to bring a print-out of one image describing what Billion Oyster Project means to them.

I find that bringing images to the discussion (vs. just words) helps us drill down to concrete concepts faster.​

I privately interviewed the founders, making sure that their intentions and passions were at the forefront of our mission and vision statements​.

Work sample: Survey for digital/social audiences

Step 2: Analysis of surveys, interviews, and brainstorms

What I did

​

I analyzed data from the survey above as well as from a similar survey that I made for high school students working closely with Billion Oyster Project. Our learnings included the following insights which influenced our mission, vision, and website:

Many of our followers listed a park as their favorite place in NYC​

Many people wanted:

More updates on oyster reefs and restoration​

More ecosystem science and updates on biodiversity

I reviewed my interviews with founders and input from staff and board members.

Using survey results, I created personas representative of 3 main audiences that our new mission and vision should serve.

Work sample: Personas

Additional considerations

What I did

I surfaced and articulated #1.

For #1 and #2: I adjusted our language and storytelling company-wide to focus on the ecosystem benefits of oyster reefs (cleaner water, biodiversity, flood prevention) vs. just oysters.

Step 3: Strategic approach

Synthesizing research results, I proposed that our mission and vision statements—and the language and communications following them—should:​

1

Respects survey results, conveys the large scale of the project, and better emphasizes the ecosystem benefits of oysters

2

Aligns with our fans' love of parks, and illustrates the harbor as a shared common space that the public deserves to enjoy

3

Aligns with people's desire to get involved and founders' desire to empower people and communities

4

Sparks imagination and gives hope

Step 4: Defining the north star in plain language

What I did To gut-check where we were headed with the mission and to further crystalize a concrete image of the future we want to create, I created this document and refined it with the founders.

Work sample: "Guiding lights" document

Step 5: Writing the mission and vision

What I did

​

I drafted mission and vision statements based on the conceptual direction outlined above.

I integrated feedback that I elicited from staff, board members, and founders to create final versions that now live on the homepage and on official fundraising and communications materials.

Work sample: Mission statement

Work sample: Vision statement

Step 6: Site architecture

What I did

I collaborated with our Deputy Director on the site map, with an eye to making sure that the structure reflected our mission and avoided previous areas of confusion. I recommended:

The addition of a page specifically about oyster reefs, high on the "Our Work" menu

Step 7: Webpage layouts and copy

What I did I outlined the headings and information that should appear and then wrote copy.

Work sample: History of New York Harbor webpage

My approach

Work sample: Volunteer webpage

This is one of the site's most visited pages, linked from many emails and social media posts. Billion Oyster Project attracts thousands of volunteers!​

My approach ​

Results

Organization: Billion Oyster Project
Platforms: Web and mobile
Role: Communications Manager / UX Copywriter
Focus: Narrative, information architecture, stakeholder alignment

I find that bringing images to the discussion (vs. just words) helps us drill down to concrete concepts faster.

I privately interviewed the founders, making sure that their intentions and passions were at the forefront of our mission and vision statements.

Many of our followers listed a park as their favorite place in NYC

More updates on oyster reefs and restoration

Synthesizing research results, I proposed that our mission and vision statements—and the language and communications following them—should:

What I did

To gut-check where we were headed with the mission and to further crystalize a concrete image of the future we want to create, I created this document and refined it with the founders.

What I did

I outlined the headings and information that should appear and then wrote copy.

This is one of the site's most visited pages, linked from many emails and social media posts. Billion Oyster Project attracts thousands of volunteers!

My approach