Tools used:
Duration:
3 Weeks
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
Game Design
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.
With 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 need to be emotionally touched, engaged and need to understand their impact with their donation. 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.
To further increase engagement we decided to base our design on game design principles for player engagement, like keeping pacing by switching between different pillars (Game Makers Toolkit), which allows us to keep people interested through the entire experience.
Create an Interactive
BROWSER BASED
MOBILE experience
IDEATION
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
Interactive MINI-GAME
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 mini-game we hope to keep the pacing and 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 and game 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.
The following metrics are important to consider for future testing:
#
numer of
donations
⬇︎
SCROLL
DEPTH
Number of
Shares
Adobe
Creative
Jam
TEAM:
Veronika Kostova
rAN hAO
Duration:
September 2019 - oCTOBER 2019
playful-learning.project
#released product
#education tech
Next: