Let's Save the Oceans
What we face:
Over a million of animals die from plastic waste in the oceans each year.
By 2050, there will be more plastic than fish in the sea​.
Awareness may be higher, but action still remains low.
We are still suffering from "that doesn't concern me" mentality.
As a UX/UI designer I wanted to explore how we could leverage the power of UX/UI design, visual design, and the written word to not only raise awareness, but turn concern into tangible contributions.​​​
Visual hook, what
are you saving?
What we do
Call to action
Emotional hook, why do we need you?
What's working? What isn't?
LGO isn't about competing with other NGO's, it's about drawing inspiration from what these organisations do right and bringing in value to the community. This isn't a competitive audit. It is a peer audit.
Key points
Call-to-action buttons should be prominently displayed on the homepage and designed to stand out.
The donation process should be simple and quick to ensure donors are not discouraged from completing it.
Directly asking for money isn’t as impactful as showcasing why the oceans urgently need support.
Articles are valuable, but concise, visually-driven facts leave a stronger impact.
How can someone contribute if they can’t donate money? Building a community is just as important as securing funds.
Responsiveness is key.
Who am I designing for?
I interviewed 5 potential donors to understand their needs and their psychological barriers.
Meet the users (personas):
Carlos (39)
Carlos is owner of a manufacturing company, who is in a constant hustle and can't sit down to browse through different campaigns and ways to help.
"I want to give back but I usually don't have the time"
Alana (23)
Alana is a university student who wants to help however she can, even if she doesn't have the income to donate.
"I want to be as involved as possible but I don't have the money."
Understanding Opportunities
Need accessible information about the cause, presented in a more impactful way beyond just images and articles.
Need alternative options to help.
Need an easy and fast way to donate.
Present the donor with the option of becoming a member when donating.
Enhance LSO's identity and mission through impactful visual design and intuitive navigation.
Focusing on a single mission, like saving the oceans, rather than multiple campaigns helps avoid overwhelming the user.
Happy user
Happy ocean
Exploring the How
Ideating
Initial ideation process. Method used: Crazy 8 exercise to come up with the best design for my type of user
Website
Laptop
Main page
Main page scroll down total view
Donating process - in one screen
Website
Mobile
Making sure it's responsive and just as intuitive
Adjusting
Through conducting an unmoderated usability study with the Low Fidelity Prototype of the main user flow (Donate), I pin pointed some pain points the users where experiencing in the process and made some changes.
Added the option for creating an account while donating
Added alternative payment methods
Deleted distraction from the process and went with a clean design instead
Added steps for the user to tell how long (short) the process is
Added steps
Simplified the optional account section
Alternative payment method
Prototyping a solution
Final outcome
Challenge
Raising awareness.
Research
People are either unaware of or underestimate the urgency of the ocean’s reality.
Solution
Design the website to create a strong visual impact from the moment users land on the homepage.
Impact
Spark interest.
Generate curiosity.
Nudge to the user's sense of responsibility and community.
Friendly yet direct and strategic UX Writing to raise awareness and inspire action.
Why Save the Oceans?
Where is our plastic?
Representing LSO as a brand, but mainly as a mission and a community.
What is LSO and why not donate to WWF or Oceana instead?
Develop LSO's brand through a UI design that is clean and professional, yet approachable and warm. Every element should reflect the mission, the oceans we aim to protect, and the urgency of their preservation.
Engagement + connection between LSO, the mission, and the user.
People don't have time.
The rush and hustle of life leaves no time for people to browse and decipher how a website works, or how they can help.
Build a responsive website that allows people to donate wherever they are in an easy and intuitive way.
Increase in donations from phones, tablets, and laptops.
Takeways
LSO's website was a challenge.
Developing a whole brand identity through UX/UI design helped me create unity from the start. Although user-centered, this website also explored the importance of brand mission and engagement. It can't be all about the user.
Who's my user?
What are their goals with this website?
User
Goals
Identity
Company
Goals
Identity
Who's my brand?
What are their goals with this website?
Since LSO doesn't have "competitors" because all NGOs have a mission we all share as community, it was challenging to deconstruct different websites and not fall into a "copycat" mentality. It was important to remind myself who I was designing for and what made this website different from WWF's for instance.
If I could do it all again from scratch, I would have spent more time in both the research and ideation process. The website could use a stronger information hierarchy. What does the user need to find? What does LSO need the user to find? Where should they find it? Do we need as many buttons? Is there a better flow to explore for this website? How can I exploit the power of UX Writing even more?