AN APP & RESPONSIVE WEBSITE FOR SOCIAL GOOD

PROMOTING SOCIAL GOOD

Whale Friend is cross-platform tool designed to help conserve endangered species of whales. Designing a way to educate others on marine issues is particularly meaningful to me, as I have dedicated many years to learning about the environment and its dynamic system. Whale Friend serves as a resource for learning about whales and their importance to our ecosystem, in addition to providing a hands-on tool for users to actively get involved in the mission to save the whales. 

Background

THE PROBLEM

Many species of whales are endangered, largely due to human forces. While most people are aware of this issue, many people have adopted the mindset that it’s too late to help.

THE GOAL

Design an incredibly simple and rewarding way for users to help save endangered species of whales. 

EMPATHIZING

To begin the empathize phase, I first conducted foundational research to help pinpoint the major problems surrounding endangered whales today. I identified five major threats to whales, supported by the Department of Conservation. (DoC NZ, 2022)

Research

Next, I conducted qualitative research to understand current users’ knowledge on the issues that face whales today and their thoughts and feelings towards marine life organizations. I created a list of 1:1 interview questions and recruited 8 participants from ages 23-40 to answer the questions.

Interview

Results

Results showed that most users are aware of the problems affecting marine life today but are hesitant to act on it due to a number of reasons. The largest pain point identified was related to finances. The majority of users agreed that they associate major marine life organizations with donations. The problem?

| Users are skeptical about where their donation money is going

| Users would rather get directly involved with the issue than have someone else do it

Another pain point was associated with processes. Users expressed frustration with the process of getting involved with marine life organizations because:

| Organizations are often crowded with a lot of information

| Many organizations lack resources for simple ways to get involved

Findings

DEFINING

Determining my target audience was challenging, as I did not want to restrict Whale Friend to only those already involved in the environmental movement. Rather, I wanted Whale Friend to inspire all types of people to become involved in the mission. Considering the goals of Whale Friend and the data collected through foundational research, I identified my target audience as:

| Environmentalists seeking more opportunities for getting involved in conservation

| Non-environmentalists who are curious and eager to learn

| Researchers with backgrounds in marine life and conservation

Target Audience

Personas

To help define my problem statement, I created two personas that represent my target audience.

Our user is an environmentalist who wants to become more involved in the mission to save the whales. She would like a hands-on way to help save endangered species of whales rather than donating money to a large organization because she would prefer to see how her actions directly help the cause. 

Problem Statement

IDEATION

Brainstorming

Based on the key findings found through foundational research, I asked myself:

I began brainstorming ways to answer these questions using the crazy eights exercise:

I evaluated my initial concepts and narrowed down ideas based on user needs and business goals. Keeping in mind the major threats to whales found through foundational research, I decided to proceed with the beach cleanup tool idea. A beach cleanup tool would create a simple and fun experience for users to get involved in the mission while also addressing major issues affecting whales today.

Evaluation

Initial Paper Wireframes of Beach Cleanup Home Page

PROTOTYPE & TEST

Lo-Fi Wireframes

I drafted initial wireframes and created a low-fidelity prototype for the main user flow, hosting a beach cleanup. Users were prompted to input their name, the date, the location of the beach, and the amount of trash collected at the beach. I created a point system to motivate users to collect more trash and host more beach cleanups.

Test

My first usability study yielded important feedback about my design. Participants were instructed to complete the main user task, starting and completing a beach cleanup. I consolidated feedback into an affinity diagram and identified the main challenges discussed by users. From these challenges, I generated actionable insights.  

Going Hi-Fi

I iterated on my initial designs to address the pain points found in my first usability study. Results showed that users needed more guidance on the steps involved in hosting a beach cleanup, fun features to stay engaged, and a way to set a goal and track progress to reach a high level of satisfaction upon completion of the activity. 

01. Start Cleanup

Starting a beach cleanup is easy and accessible, with the beach cleanup button located right on the main navigation bar. Brief instructions are displayed to help new users navigate through the activity. A point system with medals is presented on both the home screen and beach cleanup page to help motivate users.

02. Input Name & Date

Adding the name of participants and the date of the beach cleanup creates a more personalized experience. The user is referred to by his/her/their name throughout the rest of the activity, as if the whales are speaking to them directly.  The calendar creates a quicker and more efficient process. 

03. Find Location & Whales

Users can easily locate their beach by inputting the name of the beach, city, zip code, or by clicking on the map. Once the location is found, a list of whales nearby is generated with a brief description of their characteristics and level of endangerment. Learning about specific whales nearby shows users how their actions are directly helping life around them. 

04. Collect Trash

Types of trash are separated into four categories: Plastic, Metal, Paper and Glass. Users can input pieces of trash manually or click the plus or minus buttons for added convenience. As users add more trash, they collect more points. Pop-up windows appear throughout the activity with  fun facts and thank you messages told from the perspective of a whale, which aims to motivate users to continue the activity.

05. Complete Activity

After users reach their goal, they have the option to continue the activity, save their progress for later, or complete the activity. Once users complete the activity, they are given a detailed summary of their accomplishments. They are awarded points based on the total number of trash collected. They are given the option to share their summary on social media.

A progress bar was added to the beach cleanup activity to inform users of what steps to expect before, during and after the cleanup. It allows users to notice how quickly they are progressing through the activity and reduces uncertainty. 

Colorful visuals and pop-up windows with fun facts were added to the activity to keep users engaged and excited. I gave each whale a unique name and created personalized messages told from their perspective to make the experience feel special to every user. 

I created a point system and added a progress bar leading to a goal to help users sustain momentum and feel a sense of accomplishment. Users are awarded a medal upon completion of the activity, which can be shared on social media to showcase achievements and inspire others. 

Final Prototype

APP TO RESPONSIVE WEBSITE

After finalizing the Whale Friend mobile app, I began planning for a responsive website. I first identified the primary use case for the Whale Friend website. While the Whale Friend app serves as a direct tool for getting involved, the Whale Friend website focuses on educating users, offering more ideas on how to get involved, and driving donations. The two platforms promote a similar message but focus on two distinct experiences. 

Planning

I began planning the information architecture for the Whale Friend responsive website by creating a hierarchical sitemap. I recalled important information about my target users and narrowed down elements to include on the website accordingly.

Information Architecture

I decided to employ a progressive enhancement approach in my design process. Designing from the smallest to largest screen helped me prioritize the most important elements to include on the Whale Friend website. 

Ideating

Mobile

.

.

.

.

.

.

.

.

.

.

.

Tablet

.

.

.

.

.

.

.

.

Desktop

After completing mockups for the mobile version of the Whale Friend website, I proceeded to complete mockups for a tablet version and a desktop version. I then connected all screens to create three different prototypes for testing. 

Prototyping

VISUAL DESIGN

When deciding on the visual style for Whale Friend, I was inspired by the deep ocean. I wanted to keep the design simple, fun and modern to make it easy for users to stay engaged. I used black, white and dark blues as my primary colors and electric blue as my accent color. I created a glow effect around rounded elements and experimented with different transparencies to mimic the deep ocean and create a modern feel.

REFLECTION

| Simplify the Design and Test with Different Demographics

While the initial goal for Whale Friend was to create a simple user flow for users of all ages, I started to stray away from this goal in my design process. Due to available resources, only adult users were recruited to participate in the usability studies. In the future, I would like to test my designs with a younger audience and iterate on them to make the platform more useful to a larger demographic.

| Design More Tools for Getting Involved

As the research studies showed, users want more hands-on ways to get involved in the mission to save the whales. My design for the Whale Friend app addressed this issue by providing one specific way to get involved. In the future, I would like to develop more tools that can be utilized on both the app and website. Specifically, I would expand upon the whale tracking tool and “Report a Whale Sighting” feature on the website. 

| Create a Smoother Transition Between App and Responsive Website

While the Whale Friend app and website have different use cases, I would like to create a way to make the two platforms more interconnected. The goal of the website is to inform users, while the app serves as a tool for completing a task. After finalizing the design for the website, I started to ask myself: How can I make the relationship between the app and website more clear to users? 

Future Steps

| The Importance of Research

I was given a broad prompt for this project. While it can be exciting to jump right into the design process, foundational research is extremely important in making design decisions. I had many ideas for my initial design, but research played a critical role in narrowing down ideas and keeping the users’ needs front and center. 

| Accepting Challenges

When challenges arise, I sometimes become discouraged. I continue to learn that what might seem obvious to me does not always seem obvious to other people. It is important to accept these challenges and not view them as roadblocks. Instead, I try to view challenges as inspiration for creating new and even better ideas.

| Designing for Good

I am extremely inspired from this project, as it was my first project ever designing for social good. I have always been an activist for the environment.  I learned through this project that good design can create change. It is my responsibility to recognize underrepresented groups and address the problems that I see in my community. Being a designer is a privilege because design can help communicate messages in way that is easier for people to understand than other forms of communication. 

Learnings

References

Department of Conservation New Zealand. (n.d.) Threats to Whales. https://www.doc.govt.nz/nature/native-animals/marine-mammals/whales/threats/#:~:text=Introduction,global%20warming%20an%20whale%20watching.