Animal Welfare

Social Good Case Study

Animal Welfare is nonprofit organization committed to alleviating animal distress and suffering in emergencies by mobilizing the power of volunteers and the generosity of donors within local communities. The app and website connect activists with local chapters, communities and law enforcement to aid/rescue animals in need, educate users about their mission, explain how to get involved, and drive donations. Our use case for the website is to educate and involve users, while the dedicated mobile app drives donations, and coordinates rescue efforts.

We started with a mobile-first design because the majority of our users are in emerging markets, and on the go with cellular access.

USER: 14 and up.* (Gen Zs – Baby Boomers, the next billion users)
NEED: an app that connects the non-profit foundation with activist/animal lovers around the world. It enables the user to quickly report animal abuse and mobilize help, and activism, locally. This app caters to all animal lovers regardless of age, race, socioeconomic status, geographic location or ability.
IDEATE: make the user journey simple, accessible and inclusive. Conduct competitive audits on the competition to refine designs.
PROTOTYPE:
- Sitemap & user flow
- Sketch & Wireframes
- Dedicated Mobile App
- Responsive website for desktop and mobile
- Prototype (low fidelity and high fidelity): pages, micro-interactions, animation, carousel
TEST: unmoderated usability studies in design and functionality were performed at every stage, ensuring a user-friendly and functional final product, iterating to perfection.

#StopYulin2017

Background

World dog & cat meat consumption

China

China is the largest consumer of dog meat globally, consuming an estimated 10 million dogs (and four million cats) per year. The annual Dog Meat Festival (狗肉节), also known as the Yulin Dog Meat Festival, is held in Yulin, Guangxi, China, during the summer solstice from 21 June to 30 June.

The festival began in 2009 and spans about ten days during which thousands of dogs are reportedly consumed.

Media outlets and animal rights activist have reported that dogs are intentionally tortured (beaten, dismembered) or boiled alive to improve the taste of their meat.

A 2015 report by Animals Asia Foundation stated that most dogs consumed are strays or stolen pets. Approximately 70% of rural villages surveyed in China have suffered mysterious dog losses.

Yulin Municipal Government says it cannot stop the event because it is not an official event in Yulin. wikipedia: Yulin, China | Newsweek: Yulin

Vietnam

The second largest consumer of dog meat in the world is Vietnam, followed by Philippines, Thailand, Laos, Cambodia, Indonesia and the Nagaland region in India.

According to the Four Paws February 2020 report on the dog and cat meat trade in Southeast Asian countries, roughly 5 million dogs (far more per capita than China) are killed for their meat each year in Vietnam. wikipedia: Vietnamese Dog Meat Consumption

South Korea

The consumption of dog meat is heavily restricted and is now illegal in South Korea. On January 9, 2024, the South Korean parliament unanimously passed a law banning the distribution and sale of dog meat, to take effect in 2027. wikipedia: South Korea Dog Meat Consumption

Dog meat is also consumed in North Korea, Uzbekistan, Africa, rural Switzerland, and by some Native Americans.

*Even though the users of the app benefit from the app, the final beneficiary of the app/site are the voiceless animals in need of rescue.

Goal

• Advocate for the least, the last and the lost.
• Broaden UI/UX understanding, and brush up on user research skills.
• Develop advance skills in Figma, and troubleshoot prototyping challenges.

Role

User experience research | UI/UX designer | Visual/Brand designer

Process

• Empathize, define, ideate, prototype and test to create the final product.

• Design: using Figma as a design tool to its fullest potential.
• Design System: Advance system with tokenization of colors, fonts, units, and variables.
• Prototyping: Conditional prototyping, overlays / popup modal, animations, and videos.

Challenges

• Sourcing images for the website reminded me of why I fought for this issue in 2017 and continue to fight for it. It was very difficult to see the terror, horror, despair and resignation of these abused animals, and recognizing the harsh reality of how powerless these victims are. While I may only be dealing with images, the true heroes on the ground face this heartbreaking reality almost daily.
• Learning while creating this project pushed me to act, think and see beyond.
• Most research and testing were limited to what was within my capabilities.

Dedicated Mobile App

Goal of app

Our rescue app coordinates rescue efforts by connecting and mobilizing volunteers with local chapters, their community and law enforcement. Key metrics include rescues, donations, and activism in volunteering and reporting.

Value proposition

i. Product feature:

• Connects the rescue group with activist/animal lovers
• Offers a platform to report abuses, volunteer, donate, connect with local chapters and educate people
• Coordinates and mobilizes volunteers and pulls monetary resources in emergency situations

ii. Benefits: One stop shop to report, volunteer, donate, connect, and educate with a local and international reach.
iii. It’s features and benefits will be fine-tuned to hone in on specific user needs:

• Translation to local language
• Connection to local chapters/shelters & law enforcement
• Local currency donations will be allocated to local chapter’s funds

1. User Persona

#1: Robi Hu is a high school student.

He is a young activist who lives with his parents. He witnessed a family friend’s pet dog kidnapped, and later discovered that the dog ended up at a dog meat “festival” in Yulin. The family was devastated, and he was shocked by the graphic demise of a beloved pet.

#2: Jane Good is a retiring entrepreneur.

Jane has spent her life working for profit. She now seeks to make a positive impact by advocating for voiceless animals in distress. She and her husband are determined to end these “festivals” and rescue these animals.

2a. User Story

#1: Robi. As a young activist, I want to educate locals to end animal violence. Torture is not culture. I want local law enforcement to intervene in cases of pet kidnappings and reunite them with their families.

#2: Jane. As a senior volunteer, I want to free animals from pain and suffering, and give them a fresh start.

2b. Problem Statement

#1: Robi is a young activist who is determined to educate locals about animal abuse to end the senseless violence disguised as culture.

#2: Jane is a senior volunteer who is dedicated to ending animal abuse because she believes animals should not be subjected to torture.

3a. User flow

Map how users achieve a specific goal & interact with the system as they navigate through a product

Flow

Open the app and land on the Home / Donate screen.

• Read latest rescues/emergencies. Donate to emergency? Y/N…
• Browse Report Cruelty. Imminent danger? Y/N…
• Browse Volunteer Information. Consider volunteering? Y/N …
• Browse Local Chapters on Map or as text information.
• Information: About Us | Alerts (Full activation, Partial activation, Enhanced monitoring, Normal Ops) | Education (Teach, Learn), Plans (Prepare, Safety) | Ways to Help (Donate, Volunteer) | Settings (Change home location, Change language, FAQ) | Privacy & Accessibility

3b. Sketch & Digital Wireframes

As the wireframes sketches were created, the order of items were finalized for simplicity.

Ideation

Bottom navigation bar: Donate | Report | Volunteer | Local | Info

• Home/Donate: Latest rescues/emergencies, Donate
• Report: Report verified animal abuse
• Volunteer: Sign up to volunteer
• Local Chapter: Search local chapter on map/in content
• Info: About Us | Alerts (Full activation, Partial activation, Enhanced monitoring, Normal Ops) | Education (Teach, Learn), Plans (Prepare, Safety) | Ways to Help (Donate, Volunteer) | Settings (Change home location, Change language, FAQ) | Privacy & Accessibility

4. Prototype

Low fidelity prototype. Testing interaction on the wireframes, identifying screens for development, and ending the journey.

5. Test

User Research Study: Plan

Insights after first usability study

Users want an onboarding page to explain the functions of the app
Users want language customization for the app
Users want a a portal for volunteers

Recommendation after usability study

Upon entering the mobile app:
- Choose language
Onboarding:
- Take action on the go
- Donate to support AW’s work
- Find local chapters
Add volunteer portal

LO-FI

Low fidelity prototype after usability testing.

HI-FI

Mockups, high fidelity prototype and final designs after usability testing.

Social Good Case study on Animal Welfare mobile app.

Responsive Web Design

1. Site Map

This site map helps users navigate pages, and streamlines content and information organization.

Our website’s main purposed is to educate, involve users with local chapters, their community and law enforcement. Key metrics include rescues, donations, activism in volunteering and reporting, and minds and behaviors changed with lower numbers of abuse reports.

2. Sketch & Digital Wireframes

Based on the site map, the wireframe sketches were drawn, including different UI elements.

Ideation

• Home: Carousel of animal images to push the user to act, plea for donation, education, call for volunteers, and being prepared.
• Donate: Donation form, other means of donation: memorial gifts, wills, membership, where the money goes, and how it is used.
• Education: Hero, lessons & activities, resources, and programs.
• Volunteer: Hero, sign up form, volunteer areas of need, find local chapter
• About: Hero, how the Foundation began, transparency of financials, governance, and operations and news.
• Get Help: Report animal cruelty, and preparing for emergencies
• User account: Acct info, Settings, etc.

3. Prototype

Low fidelity prototype of the website for desktop and mobile.

4. Test

Conducted a usability test, and iterated on findings to create high fidelity responsive prototypes of the website starting with the desktop. Added breakpoints to the design system components to expand the design system.

Case study on Animal Welfare responsive website (desktop & mobile).

Mockups, high fidelity prototype and final designs for desktop.

Mockups, high fidelity prototype and final designs for mobile.

Takeaways

Overcame Challenges: Balanced demanding project timelines with personal growth (learning 3 languages concurrently) and emotional resilience.
Social Impact: Successfully created a user-friendly mobile app and responsive website, prioritizing accessibility and inclusivity while addressing the needs of both beneficiaries and benefactors.
Enhanced Skills: Strengthened UX/UI design expertise, particularly in Figma, while demonstrating empathy for marginalized users.
Demonstrated Resilience: Proved ability to navigate challenging projects and maintain focus on positive outcomes that met user needs and company constraints.
Built Upon Success: Leveraged the lessons learned from the previous NB Rock project to create an even more impactful solution.

Certificates

Completed a 6-month (200+hours of videos, reading and designing) rigorous, extensive and hands-on program in 6 weeks (July-Aug. 2024).

Google UX Design Professional Certificate

Advanced Figma UI/UX Design.
Completed 20+hours of coursework (April 2024).

Disclosures

Leveraged AI Tools: Effectively utilized GenAI tools like Gemini to refine and edit some written content, and tools in Figma to rewrite and trim content, and generate list content suggestions.
Efficient Workflow: Incorporated AI into the design process to streamline content creation and improve overall efficiency.
Demonstrated Adaptability: Successfully integrated AI into the workflow to support creative and practical needs.