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
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.
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
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
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.
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!
Entry Point 2
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!