Coral Restoration Advertisement
Adobe Design Jam Finalist
This is my first UI/UX work!
Delivered an interface that motivates and enables users to donate to reef restoration efforts. Parts of the design concept were adopted by The Ocean Agency into their campaign. The work was selected as a finalist in the Adobe Creative Jam competition.
Time: 1.5 weeks
Team: 2 (UI/UX designer + Illustrator)
Role: UI/UX designer
Client: Adobe X The Ocean Agency
The Challenge
Problem: How can we attract attention to and encourage donations for the campaign by generating organic sharing between users?
User Group
We choose Gen Y, Gen Z to be our user groups because even though they are some of the hardest user groups to motivate to donate according to data online, they are also the ones who introduce new ideas to their families.
Obstacles:
Find campaign advertisements boring. Large information becomes a high entry bar for younger users.
Lack of motivation to engage with the advertisements and share the campaign after the donation was made.
Design Solutions:
Donations
Create fun and easy entry points. Engage the user during donation.
Sharing
Gen Y, Gen Z behaviors can be greatly influenced by media trends. Therefore we used social media as a starting point and ending point to amplify the effect of the advertisement through sharing.
Inform
Provide just enough information to keep people engaged and care.
We Began by Sketching Rough Ideas...
Then Turned Them into Fast and Easy Prototypes, We Found...
The ad. idea is simple and efficient, but it needs an element of intrigue to stand out against the pool of other ads.
Making donations through game purchases is a popular idea. It's cool and exciting to design, but complicates the process & does not achieve the goal efficiently.
Therefore We Combined the Two Concepts
Engaging games & the massively appealing social media photo trends.
+
A compelling advertisement that can expand beyond the user groups that it first reached.
And Created a Story for Our Users (Hover to see more)
Success Metric
Initial Testing Iterations
Need Cheaper Donation Options
Users reflected they are more likely to donate if they can make cheaper donations.
Rather than using set amounts of donation as options, we created a scale for individual donation selection.
Learning about Visual Clarity
The buttons from our initial design need to stand out more, users also want to see what they have selected. clearly
Frame too empty in the beginning
Initially, the first frame of the ad. is empty until users tap on it to plant a coral. Users suggested adding information there, but others say that would make them lose interest. We decided to show a coral in that first frame, while still leaving enough space for a sense of mystery.
The corals appearing on-screen gets repetitive after a while for some individuals
In response, we reduced the number of corals that would appear before the ad transitions into the next phase and added a skip button for users who want to get to the point.
Final Prototype
Hook/Attraction
Attractive entrance to the ad.
The pictorial and playful quality of Instagram, Facebook, and Snapchat filters are the best entry points for an ad targeted toward GenY & Gen Z user groups.
The mysterious game in the ad. further draws in the users.
A "Skip" button is added after particular users show impatience toward the animation.
Educational
Making Users Care
Information is reduced to concise sentences to inform the users why the issue matters.
More information was added in iterations as a response to users wanting more information before a donation choice is made.
Elements of animation throughout the interactions keep users interested.
Emotional
Creating empathy
The dramatic shift from the cheerful illustrations to the lifeless dead corals surprises and impacts the users emotionally.
Users reflected that this is the screen they remember the most a week after their user test.
Encouraging
Subtle design choices engage and encourage the users
The Corals in the background slowly comes back to lives as more donation information is given.
The amount of corals restored is shown in relation to the amount of donation selected to encourage donations.
Follow-up & Amplify
Other Entry Points to the Ad.
Physical lead-way to the ad.
The playful quality of the UI design works well with interactive screens. Collaboration with ocean parks could be made to promote the cause.
Concept 2
• Bored of waiting for the bus?
Scan to play this tiny game and learn more about our ocean!
Bored of waiting for the bus?
"Scan to play this tiny game and learn more about our ocean!"
Our photo filter & media sharing concept was adopted by The Ocean Agency!
What We Achieved
Easy entry
We found a way to introduce the ad. that is easily accessible and relevant to user habits.
Sharable
We designed a fast user flow for sharing. The photo filter features open the potential for the campaign to become a trend.
Engaging
The animation, characterization of corals, story-telling, and responsive aspects of the ad. worked together to create a uniquely branded experience for the user.
Next Steps
Returning Users
The ad. serves more as an entryway for users to learn about the cause, donate, and share. Moving forward, I would like to explore how we can bring back users who had already donated and develop their relationship with the non-profit organization.
Testing the Campaign Concept
How effective are the shared photos in attracting more users, is a link or logo provided with each photo shared? How effective is the facebook profile photo filter in relation to the camera filter for snapchat and instagram?