2
Users did not expect Donate section to have choices.
Case Study
Save The Whales UX/UI App and Responsive Website
Save The Whales is a Selinas-based organization focused on conservation of whales. The organization needs a tool that helps people learn about the whales and their plight. Save The Whales’ primary target users include college students and adults who are concerned with the whales and would like to learn more about what they can do to help.
CLIENT
Save The Whales
DURATION
January — April 2022
SOFTWARE
Figma, Photoshop, Illustrator
The Problem
6 out of the 13 great whale species are classified as endangered or vulnerable, even after decades of protection. An estimated minimum of 300,000 whales and dolphins are killed each year as a result of fisheries bycatch, while others succumb to a myriad of threats including shipping and habitat loss.
The Goal
Design an app that will improve education on the topic of whales and their plight, and help people find ways to get involved.
My Role
UX designer leading the app and responsive website design from conception to delivery.
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.
Understanding the user
I used Save The Whales data on whales biggest threats to develop interview questions, which were then used to conduct user interviews. Most interview participants reported feeling badly about current situation, but they didn’t actively try to help the whales plight. The feedback received through research made it very clear that users would be open and willing to work towards saving the whales if they had access to an easy-to-use tool to help guide them.
Persona 1 — Miriam
Problem statement:
Miriam is an assistant who needs to find a non-profit with informational support and option to volunteer, because they want to actively educate others about whales and their plight.
Miriam is an assistant who needs to find a non-profit with informational support and option to volunteer, because they want to actively educate others about whales and their plight.
Persona 2 — Jacob
Problem statement:
Jacob is a married software engineer who needs to be able to donate on a regular basis through an app because they care about whales extinction and are concerned about paper waste.
Jacob is a married software engineer who needs to be able to donate on a regular basis through an app because they care about whales extinction and are concerned about paper waste.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on a simple way of donating and getting involved.
Starting the design
After ideating and drafting some paper wireframes, I created the initial designs for the Save The Whales app. These designs focused on delivering personalized guidance to users to help find the ways to get engaged.
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of choosing a nonprofit and donating to it.
Study type:
Unmoderated usability study
Unmoderated usability study
Location:
United States, remote
United States, remote
Participants:
5 participants
5 participants
Length:
30-60 minutes
30-60 minutes
These were the main findings uncovered by the usability study:
1
User did not expect Confirmation page to be indicated as the last step of the donation process.
3
Users would like to have share buttons within the app.
Refining the design
Based on the insights from the usability studies, I applied design changes like moving the progress bar to the bottom of the screen, eliminating an indicator for the confirmation page, and removing all unnecessary information from the screen.
Additional design changes included adding a clear indicators for ways to close the popup screen and go back to a previous screen.
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Accessibility considerations
Clear labels for interactive elements that can be read by screen readers.
Initial focus of the simple and clean straightforward content presentation helps define the primary task or action for the user.
The design uses accessibility-friendly color combinations.
Responsive design
With the app designs completed, I started work on designing the responsive website. I used the Save The Whale sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size and guarantee seamless user experience throughout.
Results &
Conclusion
Users shared that the app made fight against whale extinction seem like something they could actually help with. One quote from peer feedback was that «The Save Whales app helps bring caring about the whales to a personal level in a way that’s easy and engaging.»
What I learned
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
Next steps
1
Conduct research on how successful the app is in reaching the goal to inform people about whales plight and help non-profits who are engaged in the cause.
2
Add more educational resources for users to learn about whales and their plight. As well as a Share button for users throughout the app.
3
Provide incentives and rewards to users for successfully donating. Consider matching donation as well.