Reefstar
OVERVIEW
In a desperate attempt to survive increasing ocean heat waves due to climate change, some corals glow in vibrant color. The corals produce brightly colored chemicals in their flesh that act as sunscreen. It is one of the most disturbingly spectacular sights in nature. Reef Stars is a revolutionary reef restoration method for endangered coral reefs.
A $35 donation buys a Reef Star that can restore a dozen coral reefs.
GOAL
The main objective of this website is to educate and encourage individuals and corporations to donate to the ReefStar organization to restore the coral reefs and the communities that depend on them.
Our goal is to encourage and motivate individuals and corporations to make an impact on our ocean’s wellbeing.
TARGET USERS
Individuals and Corporations who care about ocean’s wellbeing
MY ROLE
I was the UX Designer and Visual Designer for this project. I conducted user research, competitive analysis, UI design, and crafted a fully animated interactive prototype.
This was a 4-week project for Adobe Creative Jam, we worked in a team of two and won 2nd place in Adobe Creative Jam. Our team's prototype finished ahead of about 60 other teams, which also included teams from RISD and SVA.
USER RESEARCH
From previous studies, we already know what users care about when it comes to making a donation:
The mission, the cause, the impact, and different ways of donation
The main challenge is to visualize those in a appealing and engaging way for users to know the cause and experience joy of this process. After some quick brainstorming and competitive analysis, we started prototyping our design solutions.
Competitors and inspirations
Inspiration site: Simply Chocolate
Home page and the mission
The home page establishes the objectives by providing users with the choice to either donate or learn more.
To learn more, users are taken down the depths of the cave to encounter information about the glowing phenomena of coral reefs.
Learn more about the coral reefs
The animation shines light on the glowing colors of the reefs.
The bright page is followed by a dim page that demonstrates the dark after-effect of the glowing.
The ReefStar agenda is subsequently presented to the user as a solution to the crisis, and the user is prompted to take action by donating.
Glowing, glowing, gone…
Make a Donation
The donation page delivers a memorable message through a play of words: “Bring Back the Coral of the Oceans.” There are three options the user can choose from: he can donate one $35 reefstar, enter a custom amount, or donate 20 or more reefstars. A $35 donation allows the user to donate to a community in need before proceeding to checkout.
Bring Back the Coral of the Oceans
The message is brought to life by an animated globe that gradually turns the color of corals when the user selects a donation option.
Stars Planting Stars
A donation of 20 or more reefstars is intended for more affluent individuals and corporations. This user is first taken to the “Stars Planting Stars” page, where he can get inspired by the most generous “star” donors from across the world.
With a donation of 20 or more reef stars, users can place their own names and goals on the coral map.
Donate to a Community in Need
Users are then offered the option of choosing where to donate, before finally completing their transaction.
The confirmation page invites the users to share their impact through social media and receive photographic updates of their reef stars.
Their impact is celebrated by an animated reef star sinking to the ocean floors, ready to revive the coral reefs.
