Reefstars

The Brief

In this 2-week Adobe Creative Jam Challenge against students from Yale, Pratt, SVA, and RISD, we needed to envision a digital solution that will enable people around the world to donate to reef restoration efforts and have a direct impact on our ocean’s wellbeing.

The Goal

In this two week sprint, we needed to build a prototype for a digital product that will best serve the needs of the campaign. We decided on building a website suited for desktop and mobile since 51% of people visit a nonprofit’s website on a mobile device. Studies show mobile-responsive devices yield 34% more donations.

The Research

We started this project with industry research. Something profound that we came across was that in 2017, $410.02 billion was given to charitable causes, but environmental causes and animal welfare only get 3% of these donations.

While 9–10 employers offer gift matching programs, an estimated $4–10 billion of corporate gift matching goes unclaimed and unused each year. The main reason people don’t take advantage of gift matching is the unawareness of the program at one’s company.

We did a competitive feature analysis on some of Reefstar’s main competitors, so we could better understand our user’s expectations and mental models.

We sent out surveys and collected 128 responses. We did six interviews with friends, employees at dive shops, and stakeholders from companies. We put the data into an affinity map so we can visualize the trends. The quantitative data showed that ocean conservation is at least moderately important to 91% of people.

Top 4 Reasons People Donate

● It makes me feel good.
● I was emotionally moved by a story.
● I feel fortunate and want to give back.
● I like to get something in return.

User Pain Points

● Not able to donate enough to make a difference.
● Lack of transparency about where money goes.
Lack of awareness (out of sight, out of mind).

We created a user persona, Midwest Megan. Megan is a representation of the average person in our tribe. She cares about the ocean moderately. She worries about where her donations actually go, and whether or not her contributions actually make an impact.

We made a user journey map to give us some context on how our user thinks and feels while donating to a charity. This lets us visualize our tribe’s frustrations and where opportunities for design lie.

Ideation

7 How Might We Questions:
● HMW make it fun and easy for anyone to donate?
● HMW empower individuals to invite their company to donate?
● HMW allow individuals to keep up with what's happening with their dollars?
● HMW show total contributions and their impact as a whole?

● HMW allow users to share their involvement to social media channels?
● HMW allow the campaign to be amplified?
● HMW provide information about the epidemic and keep people engaged?

Prototyping

We created low-fidelity prototypes on whiteboards.

We focused on the main pages for our user flow, including the home page, the donation page, and the checkout page.

We used these low-fidelity prototypes to create mid-fidelity wireframes.

We then moved on to our high-fidelity prototype. We started by creating a design system for the project, so that we could have a single source of truth for our design.

We built out our wireframes into high fidelity, adding colors, fonts, and pictures we chose based on the requirements we were given by stakeholders and desirability testing.

We went with a dark UI to highlight the bright colors and photos, making the design uplifting and optimistic.

We followed the “persevere or pivot” method, and changed the design based on qualitative feedback from users.

After many iterations of the website, we came up with our final design. Once finalizing the design, we added animations and transitions to the design to give the site a more complete look and feel.

View the High-Fidelity Walkthrough with Voiceover:

Next Steps

● Building out the mobile version
● Building out the share feature to be functional
● Reaching out to potential partners
● Usability testing on the high-fidelity prototype

Success & Failure Metrics

● Increase in donations
● Increase in social media shares
● Daily active users
● Click-through rate to the donation page
● Bounce rates
● Lack of interest in partnership from businesses

Check Out My
Other Work

Got something in mind? Let's talk.