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 combine the feature of promoting for and encouraging donations to the campaign with the feature of donation itself?
User Group
We choose Gen Y, Gen Z to be our user group 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 & mass appealed social media photo trends.
+
A compelling advertisement that can expand beyond the user groups that it first reached.
And Created a User Flow (Hover to see more)
Success Metric
Initial Design Testing Iterations
Need Cheaper Donation Option
Users are more likely to donate if they can make cheaper donations.
Rather than having a vast range for the amount one can donate, we decided to let users select if they want to make a donation as a corporation or an individual first, and rather than using set amounts, we created a scale for individual donation selection.
Learning about Visual Clarity
The buttons need to stand out more, users also want to see what they have selected. clearly
Frame too empty in the beginning
The first frame 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 towards GenY & Gen Z user groups.
The mysteries game in the ad. further draws in the users.
Skip button is added after a small number of users show impatience toward the animation.
Emotional
Creating empathy
The dramatic shift from the cheerful illustrations and the colorful image of the coral to the lifeless dead coral surprises and impacts the users emotionally.
Users reflected that this is the screen they remember the most a week after their user test.
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 donation
Animations are used to keep users interested.
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 presented 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?
I greatly enjoyed this project. Thank you for viewing!