Save Our Dolphins (Google UX Design Certificate)

The product:

Save Our Dolphins is a website that raises awareness about endangered dolphin species. The company is located in Canada. Our goal is to inform and involve the public in efforts to save endangered dolphins.


The problem:

Due to a lack of awareness and education, many people are unaware of the impact of endangered dolphin species


The goal:

The purpose of the project is to provide interactive resources so that people are able to learn more about endangered dolphin species and why it is important to save them.


Project Overview

My role:

From conception to delivery, I lead the UX design for the app and responsive website.


Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.


assorted-color abstract painting
assorted-color abstract painting

User Research: Summary

My objective was to determine who would be the primary users of this app/website. I wondered if anyone might be interested in learning more about endangered dolphins. I thought many people were not interested in saving dolphins, but I was incorrect. Many people know that dolphins are endangered, but few resources are available online about how to save them. Some of the online resources available are not interactive, and the designs are not appealing.

I developed two personas: a researcher and a regular person.


Problem statement:

Clyde Bolton is a marine biologist who needs websites about endangered dolphins that are more interactive

because he wants to keep people informed about endangered species.


Problem statement:

Yasmine Hayden is a social media manager

who needs more resources available for endangered dolphins

because she wants to help educate her friends and family about endangered dolphins.


Competitive audit

Some websites dedicated to saving endangered dolphins have existed for a long time. Several of these websites appeared stuck in the past; the designs were outdated and had not been updated for a long time.

As a result of the competitive audit, I have become more aware of what I must do to ensure our website is interactive. This is to encourage people to learn more about endangered dolphins.

Ideation

Initially, I had no idea how the website/mobile app would be designed. I have come up with a few sketches. My goal was to create a design that was simple and clean.

Digital wireframes

On the main page, l highlight the topic of saving dolphins and show a list of endangered species so that people can learn more about them. At first, I felt that some pages lacked a few elements, but I did not know how to improve them. Feedback indicated that the app had potential, but that the design was a bit plain.

There are some pictures of endangered species on the main page. I wanted to make users aware of how endangered dolphins are by going straight to the point.

The app includes a button for donating to save endangered dolphins on each page. The purpose of this is to facilitate donations by users.

Low-fidelity prototype

I have improved my digital wireframes by adding more elements to my design. I have decided to add more features to fill the empty white spaces.


Link: https://xd.adobe.com/view/51fbe3bb-bb0b-4b9d-90f6-eead9263491d-04a8/?fullscreen&hints=off

Usability study

Mockups

In addition to adding more design elements to all pages, I have also included a "Get Involved" page. I have added a water bubble design background to all pages, which was not previously present.

Based on our usability research, I have updated the donate page since it was a bit boring in terms of design. The donation section has been updated with the reason why people should donate.

High-fidelity
prototype

I am extremely pleased with the final results. It has been a lot of work, but I am pleased with the product. I have implemented user feedback and have worked hard to improve the design.

Link: https://xd.adobe.com/view/cc312ab3-3c9e-4ae8-9f02-fbb3ae8a9649-9962/?fullscreen&hints=off

Responsive Design

It was clear to me from the outset how I wanted the pages to be arranged on the website. It was important to me not to overload the website with many pages. My goal was to create a website that would be easy to navigate and simple to use.

Sitemap

I have adapted the designs from the mobile app for the desktop and tablet versions.

Takeaways

Next Steps