Artboard.png

Coral Restoration Advertisement

Adobe Design Jam Finalist 

Overview

This is my first UIUX work!

The Challenge

Enable & motivate people to donate to reef restoration efforts.

Time Frame

1.5 week

Background
$35 donation restores a reef.

Team: 2 people

My Job: UIUX Designer

My partner's job: Illustrator & Image Material Editor

 
AdobeStock_287985876.jpeg

Design Goals:

Important features:

• Donations
  Make it fun and easy for anyone to donate!
  Corporate-level sponsorship

 

Sharing

How can sharing amplify the campaign to other individuals/ communities?

• Inform

Provide just enough information to keep people engaged and care.

What form of media will make the most impact?

User Group

Gen Y, Gen Z are some of the hardest user groups to motivate to donate, but they are also the ones introducing new ideas to their families.

Approach: When there is a social media trend, the number of Gen Y and Gen Z people participating can surge. We used social media as a starting point and ending point to share the cause. 

teen-dental-health_edited.jpg
IMG_2019.PNG
IMG_2018.PNG
IMG_2017.PNG

Rough Ideas

Week 1

 

 Fast Prototyping

The ad idea is simple and efficient, but it needs some "Jazz" to stand out against the pool of other ads. 

Making donations through game purchases is a popular idea. It's a cool design project, but complicates the process & does  not  achieve the target in an  efficient  way.

Revision & Final Sketch

IMG_2020.PNG
IMG_2022.PNG

We combined the engaging nature of games and the mass appeal of social media photo trends.

We created a compelling advertisement that can expand beyond the user groups that are first reached.

UserFlow

Success Metric

(Hover for Success Metrics)

 

User Test
Iterations

Week 2

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 – 54.png
iPhone X-XS – 49.png
iPhone X-XS – 46.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 frame, while still leaving enough space on the frame 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.

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.

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.

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.

Corporate 

Corporate level engagement is encouraged


Easy to recommend the donation to the user's corporation 

Shows Logos of companies that are already involved serve to further encourage engagements. 

SOCIAL MEDIA SHARING

Complete Walkthrough

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!
 

Entry Point 2

concept1.png

Bored of waiting for the bus?

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

Reflections

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 ad. The 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 an engaging 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.

Surface Level Design Iteration

Next, I want to user test surface design choices and test the visibility of the call-to-action buttons. Looking back, there are a lot of graphic design elements that could be improved.

Reduce the Number of Frames

Looking back on this first UI project I've created, In an attempt to create engaging interfaces, I've neglected to minimize the time users would spend to complete an action. The Donate functions have too many frames and take unnecessary time away from the user. They could be shortened.

What Comes After Sharing

How effective are the shared photos are in attracting more users, is a link or logo provided with each photo shared? How effective is the profile filter in relation to the camera filter?

 

I greatly enjoyed this project. Thank you for viewing!