top of page

Save Apes

Mobile App and Responsive Website Case Study, 2022

Project Overview

Screen Shots of the Save Apes Mobile App and Web App 2

The Problem

Save Apes organization has identified a general lack of knowledge about the orangutan crisis, humans impact on orangutans, and also identified that there are limited platforms to make secure donations for orangutans and rainforests.

The Goal

Design an app and a responsive website that will provide detailed information about orangutans, their situation; and guide people find ways to help saving orangutans along with their home, rainforests.

My Role

UX designer leading the app and responsive website from conception to delivery

Project Duration

January 3rd 2022 - January 27th 2022

The Product

Save Apes is a world wide animal rescue organization focused on saving orangutans. This organization needs a tool that helps people learn about ways to help orangutans and make easy contributions for the cause. Their primary target includes young professionals who are concerned about endangered species and environmental problems.

Responsibilities

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

User Research Summary

I used Save Apes’s data on orangutan and rainforest crisis to develop interview questions, which were then used to conduct user interviews. 


Most interview participants reported feeling so bad about orangutans being endangered and rainforests being deforested, but they weren’t taking any actions to help a rescue organization. The feedback received through research made it very clear that users would be open and willing to work towards contributing the “save the orangutans” if they had access to an easy-to-use and secured tool to help guide them. 

Personas & Problem Statement

Dexter

Dexter is a mindful individual, who cares about animals a lot, who needs a platform to gather information about the ways that he can help orangutans, because he is not so good with internet and he had some unfortunate scamming experiences

Persona Card

Destiny

Destiny is a busy biologist, who has a deep knowledge about environmental problems and animals, who needs an easy way to make donations to a sanctuary on their phone, because they want to have a quick and thrustful way to help orangutans.

Persona Card for Destiny

Competitive Audit

An audit of a few competitor’s products provided direction on gaps and opportunities to address with the Save Apes app and website

Competitive Audit Results of Save Apes App
Competitive Audit Results of Save Apes App

Ideation

I did a quick Crazy 8s exercise to come up with ideas for how to address gaps identified in the competitive audit.
My focus was specifically on creating a personalized experience for users to feel attached to orangutans.

Paper sketching wireframes

Starting the Design

Digital Wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the Save Apes mobile app. These designs focused on delivering personalized guidance to users to help learn about organization, orangutans and to make easy contributions. 

Digital Wireframes of Save Apes

Usability Study Findings

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of making a donation and getting more information about orangutans and Save Apes organizations.

 

View Save Apes low-fi prototype
 

1. Contribution

1. Contribution

People want one column grid, they had difficulty skimming through the contribution screen. 

People want one column grid, they had difficulty skimming through the contribution screen. 

2. Payment

2. Payment

People found the payment options clustered.

People found the payment options clustered.

3. Social Links

3. Social Links

People wanted to be able to share their contribution OR the organization on general on social media platforms

People wanted to be able to share their contribution OR the organization on general on social media platforms

Refining the Design

Mockups

Based on the insights from the usability studies, I applied design changes like changing the grid layout on the Contribute screen to provide a clear flow. 

Additional design changes included adding a background to the rows in the Impact screen grid layout, and making the navigation clear by adding a “Learn More” text button. Unnecessary “cancel” button was also removed from the Newsletter subscription section.

Digital Wireframes of Save Apes turn to Mockups
Digital Wireframes of Save Apes turn to Mockups

Another design change was made on the Donation flow including adding background box that is consistent throughout the app. Button’s text and icon centered and added more dividers to make the screen less clustered.

Before and After Usability Testing

Accessibility Considerations

1.  ADA Compliant color combinations for color-impaired users.

2. Clear labels for interactive elements that can be read by screen readers.

3. Accessible font sizes and font families.

Refined Designs

Mocukps of the Refined Mobile App Designs

High-fidelity Prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study and more screens.

 

View the Save Apes high-fi prototype

High-fidelity Prototype of the Save Apes Mobile App

Responsive Design

Sitemap

I followed a Progressive Enhancement Mobile First approach and with the app designs completed, I started work on designing the responsive website. I used the Save Apes sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Sitemap of the Save Apes Web App

Responsive Designs

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study and more screens.

 

View the Save Apes high-fi prototype

Screen Shots of the Save Apes Mobile App and Web App

Going Forward

Takeaways

Impact

Users shared that the app made saving orangutans like something they could easily help with. One quote from peer feedback was that “Wow this app helps bring caring about the animals and their homes to a personal level in a way that’s easy, secure and engaging.”

What I learned

I learned that even though the problem I was trying to solve was a serious one, diligently going through each step of the design process and aligning with specific user needs helped me to come up with solutions that were feasible, useful and engaging.

Next Steps

1. Conduct research on how successful the app is in reaching the goal to reduce food waste.

2. Conduct another research to see if there are any other new pain points OR if the app needs any improvements

3. Add more educational resources or success stories for users to learn about orangutan crisis and the impact of contributions.

bottom of page