Artboard.png

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.

teen-dental-health_edited.jpg
 
AdobeStock_287985876.jpeg

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.

IMG_2019.PNG
IMG_2018.PNG
IMG_2017.PNG

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

IMG_2020.PNG

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

iPhone X-XS – 46.png
iPhone X-XS – 54.png
iPhone X-XS – 49.png

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.

concept.png

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

concept1.png

• Bored of waiting for the bus?

Scan to play this tiny game and learn more about our ocean!
 

concept1.png

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!

Screen Shot 2022-09-22 at 6.38.57 PM.png

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!