AW-org-WF

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.

  1. USER: 14 and up.* (Gen Zs – Baby Boomers, the next billion users)
  2. 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.
  3. IDEATE: make the user journey simple, accessible and inclusive. Conduct competitive audits on the competition to refine designs.
  4. PROTOTYPE:
  5. 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
• A safe, clear way to report cruelty (with follow-up and accountability)
• Trust and transparency in how donations are used
• A sense of progress and motivation (especially for volunteers)
• An empowering, not overwhelming, user experience
• 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

Robi Hu

Inspired by:
Robin Hood — a student “stealing back” safety for animals, champion of the meek.

bio_RobiHu

Personal Profile

Robi is a young activist living with his parents. He witnessed a family friend’s pet dog kidnapped, and later discovered that the dog ended up slaughtered at a dog meat “festival” in Yulin. The family was traumatized, and he was shaken by the graphic demise of a beloved pet. He’s determined to raise awareness, act (report cruelty), and be part of a new generation that stands up for animals.

RHu_attribs

U

Jane Good

Inspired by:
Jane Goodall — a compassionate, wise donor who wants to make an impact from afar.

Bio_JGood

Personal Profile

Jane has spent her life working in the corporate world. 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. Her giving back will be her legacy.

JGood_attribs

1b. User Journey

updated 03.25

P

Momo Tran

Inspired by:
Momotarō — a peaceful weekend warrior who fights injustice alongside his companions to save animals.

Bio_MTran

Personal Profile

Momo is a busy working professional who spends his weekends advocating for animal welfare. Alongside his wife and friends, he’s committed to helping animals in need — from reporting cruelty to volunteering with local rescues. Driven by compassion and national pride, Momo wants to help end the dog and cat meat trade and reshape how his country is seen on the world stage.

MTran_attribs

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.

U

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

S

#3: Momo. As a busy working professional and lifelong animal lover, I want to help end the dog and cat meat trade in Vietnam. This is both a cruelty and a national image problem. This fight is both personal and patriotic.

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.

P

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

S

#3: Momo is a working professional who wants to take action against animal cruelty and protect his country’s image by organizing local efforts and empowering others to speak up.

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

 

AW-mob-userFlow

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

 

AW-sketches-WF


4. Prototype

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

WF_AW-solo


5a. Test: Unmoderated Usability Study

User Research Study: Plan

Insights after first usability study
  1. Users want an onboarding page to explain the functions of the app
  2. Users want language customization for the app
  3. Users want a a portal for volunteers
Recommendation after usability study
  1. Upon entering the mobile app:
    • Choose language
  2. Onboarding:
    • Take action on the go
    • Donate to support AW’s work
    • Find local chapters
  3. Add volunteer portal
LO-FI

Low fidelity prototype after usability testing.

HI-FI

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

AW-WF-prototype Animal Welfare mob-mockup

Social Good Case study on Animal Welfare mobile app.

5b. Test: A/B Test

A/B Testing

Insights after A/B Test
  1. The version without onboarding (Version A) performed better in terms of task success, user confidence, and flow clarity.
Recommendation after usability study
  1. Use updates from version A
  2. Remove Onboarding
  3. Move Language option into the app’s top nav bar
  4. Keep volunteer portal

updated 03.25

LO-FI

Low fidelity prototype after A test.

HI-FI

Mockups, high fidelity prototype and final designs after B test in A/B testing.

AW-WF-prototype AW_mockup+032725

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.

AW-web-siteMap

2. Sketch & Digital Wireframes

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

Ideation

Navigation: Logo | Donate | Education | Volunteer | About | Get Help | (icons) Volunteer/User sign in | Search

• 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.

AW site WF sketch

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.
  • Deepened Design Thinking: Applied human-centered design principles to uncover hidden user needs, conducted heuristic evaluations and A/B testing, and designed with greater empathy, purpose, and ethical responsibility.
Certificates

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

Certificates

Completed a 3-month (120+hours of videos, reading, designing and testing) in-depth, extensive and hands-on program in 4 weeks (March 2025).

If Google UXD Certification was challenging and difficult, this HCI certification was impossible.

Disclosures
  • Leveraged AI Tools: Effectively utilized GenAI tools like ChatGPT, Gemini, and DeepSeek 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.

Designer’s work is solely owned by designer. Any downloading, copying, alteration, distribution and forwarding of content is strictly prohibited. All rights reserved.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.