Our Problem: The usability and navigational issues makes it challenging to connect the user’s intentions with the site.
Our Solution: Redesign the website to deliver the essential information and support for interested individuals faster and easier.
The Purpose: To simplify process of donating and applying to volunteer for users, as well as raise awareness in sustainability.
Coral reefs are some of the most valuable, diverse, and beautiful ecosystems on Earth. They host thousands of species of marine life and are estimated to have millions of organisms that depend on these environments. It is important to know that humans are dependent on these resources as they provide us with the plant and animal biodiversity to develop essential drugs, buffer our shorelines from dangerous waves and storms, and also help support our commercial fisheries and local tourism.
Despite their exceptional economic and recreational value, coral reefs have been severely threatened by pollution, disease, and habitat destruction.
The Coral Reef Alliance (CORAL) is on a mission to save the world’s coral reef by collaborating with communities to reduce direct threats to the reefs in ways that provide long-term benefits to people and wildlife.
To begin, heuristic evaluations were tested to understand how CORAL wanted to connect with their target users and their goals. We reviewed the current website and learned that it was already aesthetically pleasing and had a decent delivery of information. However, the unorganized navigation, and lengthy forms really made the website usability very challenging.
This proto-persona was to help jumpstart our research objectives for the following usability tests/interviews.
Chad is our scuba diving science teacher that wanted to raise awareness about coral reefs, but did not know exactly how to do his part.
Since we didn’t get a reply from the stakeholder, we wanted to widen our scope another way. Our team asked a few of our peers to test out the current CORAL website, with a few tasks in mind — learn where your donations go, donate, and volunteer.
Overall the website is basically navigable and users liked the imagery. There were a significant number of issues regarding finding where they are in the site and how dragging it can be reading through long sections. Users had complaints that the site can be easier to navigate without the unnecessary need of drawn-out information.
For survey questions we concerned ourselves around 3 topics:
• Common sustainability knowledge
• The thinking process behind donating –
• and volunteering.
Our research questions revolved around 3 topics:
• The user’s knowledge on a sustainable lifestyle
• Their decision making process in donating and volunteering,
• Their habits and experiences in doing so.
With a grand total of 8 survey responses and 5 quality interviews, our notes came out with pretty interesting data.
(1) That users have some basic knowledge of coral reefs and what they provide to marine life, but not so much human benefits.
(2) That they would like to follow a sustainable lifestyle when they can, but can become costly and time-consuming.
And (3) That they DO have the means to donate and volunteer, but CAN’T due to lack of money, time, and effort.
The affinity diagram pooled similar behavioral patterns that highlighted user’s goals, pains, and gains. It shows that their major pain points root from financial and physical constraints (like not having money to donate or free labor to provide).
The key takeaway with this diagram, however, are their issues with boring sections, lengthy donation forms, and demanding volunteer applications, all of which we aim to resolve.
This reveals that our team wanted to focus on the clarity and simplicity of the donation and volunteering process. We highlighted simple features that can make a big impact on users such as big “call to action buttons” and convenient and easy-to-fill-out forms. We also wanted to go into more detail about volunteer opportunities and responsibilities, as well as where donations go to engage users and encourage them to sign up.
This is the card sorting for the current Coral website. As you can see, the blue tabs are 6 primary pages in the main navigation bar and there were many secondary pages that flow under that. Under Coral Reefs 101, there were many tertiary articles that were hidden and kind of just dropped in a long overwhelming list.
In the redesigned card sorting, it consolidated the primary pages into 4 main sections. Under coral reefs 101, we decided kept all the educational articles, but organized them into different categories and subcategories so they were easy to understand and navigate through. Also focused more on the main tasks of donating and volunteering, designating a new section that focused more on those two tasks.
For thoroughness, established a new sitemap with 4 primary pages in the menu and the following secondary & tertiary pages.
The user flow focused on 3 main tasks, highlighted by the yellow diamonds. The 3 main choices were to donate, to volunteer, and the option to learn about a more sustainable lifestyle. It is designed in a way that whether the user decides to take that action or not, they will automatically be guided to the next action so that the main tasks are clearly displayed.
Based on the research, we created a mid-fi prototype v1 to test our ideations for Todd’s predefined user flow. Going for a minimal UI with prominent call-to-action buttons ensures there is always something for the user to do next after completing a task such as volunteer interest form, making a donation or looking up ways to make informed everyday changes.
The data from tests of prototype v1 produced the following key findings:
• Smooth, clean user flow is achieved
• Measure NPS 1 "How likely are you to lead a more sustainable lifestyle based on these suggestions on a scale of 0 (very unlikely) to 10 (very likely)?" - 7.25/10
• Measure NPS 2 "How likely are you to recommend this organization to your family or friend on a scale of 0 (very unlikely) to 10 (very likely)?" - 8.5/10
Key feedback from the users:
• The content for membership benefits that became available at $50+ donations (or $5+ monthly) was not clear.
• The “Live Sustainably” page was too long and wordy, which made the information not worth the attention and time to read through.
• The “Next” button should be more visible once a section is filled in.
Example 1: Home page
• The hamburger menu expands into a header navigation bar.
• The fish logo is replaced with the full titled version.
• The “Donate” button is made prominent in the header across all web pages.
• The title typography (H1, H2) is increased by 1.5x to take advantage of a larger screen.
Example 2: “Ways To Give Back” primary category
• The modules for the secondary categories and the footer move from vertical to horizontal listing depending on the screen width.
• The header image of the coral moves from above the title to the side for visual prioritization.
Example 3: “Take Action” card decks
• A wider screen displays more cards.
• Desktop view also adds a scroll bar for a more intuitive UI compared to hands-on swipe motion.
Through user research, it became apparent that visuals aren’t the only metric of a good website. In fact, without a consistent robust navigation flow and well-defined site map, user like Todd can easily lose interest in the organization, even if he full-heartedly believes in its mission.
Due to the constraints of the case study, we had to prioritize features we’d like to develop. Some of the next steps this project could take include:
• Develop the “More Ways to Give/FAQs” secondary category, which provides resources and answers to common questions.
• The organization partners would also need to be featured on the website more in CORAL’s interests.
• User Flow for Coral Reefs 101 - an interactive book format.
