Project at a glance
* Client Name: Ocean Defenders Alliance (ODA)
* Project Time Frame/ scale: 2 weeks/ 3 team members
* My Major Tasks: (1) UX design- Wireframing, Low and High- Fidelity prototyping
(2) Coding- Contributed in one page of HTML, CSS and bootstrap coding
* Design Tools / UX Methods Used: Sketch, InVision, A/B Testing, Google Survey,UX flow chart, HTML, CSS, jQuery, GitHub, GitKrarken, VS Code.
* Project Deliverable: Coded Prototype
01- How This All Starts
With three aspiring UX: UI designers who feel uneasy about the severity of plastic pollution that is inundating our planet terribly. We feel the compulsion of joining the community to make the change.
May 2018, as the UX: UI course approaching the end. Our team started the final design challenge by asking these questions to ourselves:
(Question 1) How can we apply the skills and learning in user experience for a good cause?
Ans: A non-profit organization, whose website would most greatly benefit from an improvement in their design.
(Question 2) What are most concerning environmental issues nowadays?
Ans: The emerging problem of ocean pollution, to name a few facts among the myriad.
380,000 marine mammals and turtles that are killed by ghost gear every year.
Some 18 billion pounds of plastic waste flow into the oceans every year from coastal regions.
In the Los Angeles area alone, 10 metric tons of plastic fragments—like grocery bags, straws and, soda bottles—are carried into the Pacific Ocean every day.
02- Introduction
Ocean Defenders Alliance, a marine conservation group. Which we believe by retouching their website will help them to deliver a more convincing messages and solutions on the issue of plastic pollution.
With this goal in mind, we found a marine conservation group called, Ocean Defenders Alliance. It is an Orange County, California based organization which works to clean and protect marine ecosystems through documentation, education, and meaningful action.
ODA is committed to protecting near-shore ocean ecosystems, working with affected communities, ODA focus primarily on the reduction and removal of man-made debris which poses serious threats to ocean wildlife and habitats.
03- Design Process
We followed the Double Diamond framework to pace our design process from discovery, conceptualize to deliver.
04- Identify The Problem
Their current website,
1. Informative but lack of information structure and visual hierarchy.
2. Is hard to navigate your way to find things. Bad content chunking strategy.
3. Incompatible with mobile nor tablet devices and not responsive across other platforms.
4. Cluttered and inconsistent visual experience caused low credibility of the organization. Including, font, size, colors, image usage, tab, and buttons.
The technology and layout on the website hadn’t been updated, which meant a major overhaul from the ground up was necessary.
How might we enhance the usability, accessibility, consistency, feedback to create the user flows of signing up and taking action to achieve a higher conversion rate?
Ocean Defenders Alliance Current Website
05- Research
To minimize the assumptions, we continue to deepen our "discover" and "define" in the Double Diamond process. The image of our user become more visible as we were conducting 1 Proto Persona, 2 Interviews, 1 Storyboard, and 1 User Journey Map.
Two Interviews
To understand and reevaluate the problems and needs of the organization, we manage to interview two people to gain insights from different aspects.
1st interview with the founder of ODA, Kurt Lieber.
From Kurt, we learned that the biggest hurdles ODA is facing are getting the words out there and finding recruits, especially to get the young people to participate. Kurt also told us that "I've heard about this Snapchat thing, but I don't know anything about technology just can't get this thing working" From this, we acknowledge that the disconnect between the old generation and Millennials is the challenge for him.
2nd interview with an active surfer and ocean conservationist.
Chris is an avid surfer in his late 20s living in Huntington Beach. He is worried and contemplates the ocean pollution issue because he has encountered several disrupted experiences while surfing out at sea.
Storyboard & User Journey Map
Our team created a storyline and user journey based on Sheryl's surfing experience and expending it further. From here, we were able to map out the physical and emotional relationship between users and ODA.
06- UX Hypothesis
Now we can combine question and research into hypotheses.
* Tell the story of ODA by creating a storyline on the landing page.
* Induce user's attention by redesigning call to action buttons.
* To increase average session duration by utilizing interactive components to bring the story comes to life.
07- Conceptualize and Develop
In order to implement the abstract concepts on screens, we went through wireframing, prototyping and iterating experiments.
+ ODA User Experience Flowchart
+ Wireframes & Iterations
+ Low- Fidelity Prototypes & Iterations
+ Style Guide
+ High- Fidelity Prototypes
+ A/B Testing
+ Coded Prototypes
ODA User Experience Flowchart: "Path to signing up for volunteering."
When engaging with potential donors, volunteers, and advocators, storytelling and clarity are keys. To tackle the central challenge of ODA, we decided to laser focus on redesigning one primary user flow of signing up for volunteering. Ideally, users will navigate from homepage to information page and finally to take action page. The UX flowchart demonstrated this particular decision flow.
Wireframes & Iterations:
My primary role is UX design, to redesign the component and interaction of these three pages to achieve navigation that tells a story about ODA. In this project, we focused on the path to taking action like, sign up for volunteering.
Style Guide:
Mood board keywords: Nautically theme
Our overall goal when creating the style guide was to keep as much of the existing ODA styles but use them to create a new and cleaner design aesthetic.
Here are few things we incorporated in UI style guide.
* Nautical themed font for headings
* Kept their original color scheme, but expanded on the color palette
* Incorporated the new font in the logo
Low- Fidelity Prototypes & Iterations:
(I) Homepage, to engage and retain the users for onward exploring.
(II) What We Do Page, to educate users further on the issue then provide different solutions.
(III) Get Involved Page, finally to create an emotional connection and take action.
(IV) About page, it was created at early stage but eventually scrapped out because of issues it created with the design flow we had planned for the final prototype.
We went through several iterations for potential designs for each page, which also went through additional changes as the design process went along; the chosen layouts at each stage are shown below.
High- Fidelity Prototypes:
We then incorporated style guide in low- fi prototypes to create high- fi prototypes. Going through this process, we followed closely with the rules been stated in the style guide. It helps keep our designs consistent throughout the site and maintain the ODA brand. The final high fidelity prototype was created using InVision.
A/B Testing:
We followed with a A/B testing to help us decide on the layout of our tap nav bar.
Home Page: (L) Low- Fidelity V1 / (M) Low- Fidelity V2 / (R) High- Fidelity
What We Do Page: (L) Low- Fidelity (R) High- Fidelity
Get Involved Page: (L) Low- Fidelity V1 / (M) Low- Fidelity V2 / (R) High- Fidelity
Coded Prototypes:
After UX/UI been layout on the screens, we built the coded prototype to make it a real-life experience. We allocated one week to code out the final prototype by using HTML 5, CSS 3, Javascript, and the Bootstrap 4 framework library. Click for coded prototype!
08 Reflection- Moving forward
We redesigned three web pages that formed a user flows of taking action in 2 weeks time frame. To push the project further in the future we would like to,
Integrate analysis tools like Hotjar and Google Analytics on current web pages to collect feedback from real users. As a designer, I embrace feedback/criticism from everyone because I am making something for the consumers and not myself. Getting feedback also provides me with enough materials to visualize the data and make the meaningful decision for a better iteration moving forward.
Based on the input from the users, I would also like to add more interactive components across the website where applicable for a better visual appealing and to bring out effective storytelling.
Ultimately, we would love to work with Ocean Defenders Alliance team and volunteers to get more real- time users feedbacks and be more engaging with their works personally. To observe and to minimize the assumptions in the iteration process. Finally, to present the new website as their official website and to be a part of the ocean conservation movement.
🐋 🐳 Thank you for your attention 🐬 🐢
