Overview
ADOBE cREATIVE jAM
My Role:
Product
Designer
company
Adobe has partnered with the OceanAgency and Pantone to initiate a global campaign using creativity to accelerate climate and ocean action.
Teammates
Product Designer
What I did
Wireframing
Storyboarding
Interaction Design
UX Design
UX Writing
Impact
1. Created a creative solution to help environmental restoration
2. Developed an interactive and engaging experience with focus on quick access
sAFE THE cORAL REEFS
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 a sunscreen. It is one of the most disturbingly spectacular sights in nature.
The Glowing Glowing Gone campaign's cry:
Let's be the first generation to save an entire ecosystem.
The Challenge
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.
ReefStars are in the center of it all. They are a revolutionary reef restoration method that provides hope for coral reefs and the communities that rely on them. A $35 donation buys a ReefStar and restores a reef with a dozen corals.
Due the limited amount of time we had we decided to go for qualitative secondary research that would give us an idea of what approach to take and how to solve the challenge.
We discovered that people do not want to be bothered when it comes to donations and are having a hard time to understand their impact. They need a quick intake of information and a quick way to act, which means an easy way to react to a call to action. Additionally, we wanted to make the experience accessible on the go. So naturally, we decided to create a mobile experience that is browser based and does not require an app download.
Create a
BROWSER BASED
MOBILE experience
RESEARCH
The short experience we envisioned would require compelling visuals to succinctly get the message across. By using real imagery and abstracting it to the point that it is still recognizable and yet not distracting we created assets that we could later put together and play around with in the prototype.
Each group of assets has a different color intensity and degree of abstraction to give the feeling of depth once layered over one another.
30+
Assets
Fore ground,
Mid ground
& Far ground
ASSETS
DESIGN
MOBILE PROTOYTPE
Storyboards
MOBILE
pROTOTYPE
With all the assets finished we had to create our prototype and put everything together. We build a sitemap that would help us create a narrative for our user. Based on that sitemap we created mockups and later a working prototype in Adobe XD.
Start (on surface of the water)
↓
Introduction to variety of fish
↓
Introduce healthy coral
↓
Coral reef cities
↓
Some coral bleach (white)/maybe text says something like: buuuuut....
↓
Coral completely white
↓
Some corals turn yellow/purple/blue
↓
Coral reef is dead (black)
↓
Interactive part/game
Introduce the reefstar
Users place the reefstars on the seafloor and create grid
↓
Corals start growing back
↓
Donate cta
↓
See where you placed your reefstar
Share
SITEMAP
& INTENDED USER JOURNEY
HIGHLIGHTs
THE SIGNIFICANCE
OF THE REEFSTAR
With the ReefStar being the proposed solution to the problem we are telling the user about, we had to make sure we clarify the importance of the ReefStar. This is why we decided to create an interactive section in this experience. Not quite like a game and more than just reading about the ReefStar. With this short interaction we hope to engage the user enough that they feel that they can make a meaningful impact in this enormous rescue mission.
MAKE
DONATION EASY
The linear structure of the product allowed us to easily take people to the donation section as well as create multiple options within the journey to share this story, which is another crucial part of bringing awareness to the issue.
The donation itself can be easily adjusted but we made sure to give an incentive to donate as much as one full ReefStar by making a note below the slider.
Another impactful addition was a visual validation of the donation by showing where this particular ReefStar would be places and giving another opportunity to share and increase visibility.
RESULTS
Environmental
iMPACT
Even though this design was not realized the project itself still exists and continues to educate people on the importance and impact of reef restoration. To learn more about the ocean crisis please visit theoceanagency.org.
Personally, I have learned a lot about interaction design through this project. I found game design theory to be truly influential and helpful to create a product that is original, tells a story, and is still understandable.
