WHo is peta?
PETA (People for the Ethical Treatment of Animals) is a non-profit organization that strongly advocates for animal rights and protection. Their goal is to spread awareness and promote the kind treatment of animals. Their motto is, “Animals are not ours to eat, wear, use for entertainment, experiment on, or abuse in any other way”.
Role
UX Designer:
Wireframes, mockups, prototypes, usability testing
Duration
10 weeks
Team
Capstone project for SVC's User Experience Design certificate program. I teamed up with two UX designers and one Content/UX writer.
Scope
Desktop & mobile web
Mobile App
What are we solving?
The main ask from PETA’s team was to redesign their current Report Cruelty to Animals web page - How might we redesign the page to be more graphic and guided so users can efficiently assess their situation and find the correct reporting form? The goal here is to increase submission rates as well as reducing site abandonment by providing an experience users can find ease of usage. The supplementary ask is creating a mobile app to report cruelty and access information on handling animal emergencies on-the-go.
Current state of the site
From the inventory and audit conducted by our Content Lead, we identified several pain points with PETA’s current report form.
Our initial concerns:
The form lacks hierarchy, making it difficult to assess the proper submission procedure which may result in a rapid rate of site dropout
Redundant prompts requiring users to decipher excessive information in order to figure out which report form to use
These may lead to prolonged harm to the animals
Shown below are the various form options users are linked to
Report Cruelty to Animals landing page
Laboratory report form
Animal not in imminent danger form
Animal harmed on film/TV form
Hearing from the users
We sent out a questionnaire on forums and groups whose goals aligned closely with PETA’s. At the same time, I conducted an informal interview with a friend. We hoped to learn more about the forms accessibility, users’ opinions on the site structure and navigation, and the difficulty level in pinpointing an incident type to file a report under.
We managed to receive 3 responses to our survey along with my interview. It confirmed two major issues:
Navigational flaws and difficulties
Confusion discerning which form to report under as the forms shared many similar content. This lack of discernment downplays the importance and urgency of PETA’s intent.
Frustration over the forms’ language and redundant prompts. The redundancy due to the highlighted items above sharing a singular links.
Site frustration leading to abandonment
Navigation through the site’s complicated structure eventually lead users to abandon the report all together.
“[difficulties completing form] navigating and making sure i was filling out the right form - there’s a bunch of different forms that all look and read the same.”
“I’ve tried filling out the form before but gave up midway because of confusion”
Competitive analysis
For my competitive analysis, I reviewed the competitor apps PETA provided us under the same metrics. Out of the 3 apps provided, I was able to download 2 - Blaenau Gwent and Oasis Mental Health.
What I learned:
Oasis
App required an account to be accessible. Though, I never made it out of the loading screen. So the most I was able to evaluate were off of the screenshots provided on the Apple page. My main takeaways are:
Their design mimicked largely that of Apple’s design system
Accessibility based on visual cues
Very simple design layout
Blaenau Gwent
As the app is based in Blaenau Gwent County, I had limited access to the apps full list of features. Regardless, after some review of what I had access to, my takeaways were that:
Progressive reporting system
Accessibility based on visual cues
Simple, straightforward categorized tab labels
Simple design layout paired with a minimalist visual design style
Blaenau Gwent “Report Litter”
Strategy alignment
With the finalization of our research we compiled our observations onto post-it notes on a FigJam to begin affinity mapping. We aligned on 3 main focus points we felt were necessary in restructuring the user experience:
Clarity
Users express their frustrations when discerning between a form to report on.
Links and prompts provided were redundant on top of being overwhelming
Accessibility issues: users felt the text were difficult to read at first glance
Building trust
The current state of PETA’s report page impairs their ability to build a foundation of trust with their users.
Lack of reassurance coming from PETA
No confirmation provided regarding receiving user reports nor do they provide next steps
Users felt unvalidated.
Accessibility
Accessibility lied largely in the unstructured nature of the whole site’s navigation experience.
Contrasting competitor sites, PETA’s structure lacked consistency and clarity in their language.
During competitive analysis, we identified other sites structured the dense information in a progressive form on a single screen.
collaboration to execution
After dialing in a strategy, we each took upon ourselves individual work to conceptualize the 3 focus points.
Clarity through reworking the IA of the form
Simplifying and declutter the current reporting flow
Creating a progressive experience with digestible info on a single page
Building trust by reframing the context and tone
Revising PETA’s current language to be more supportive and guided for users
Making sure users are able to make informed decisions supported by the business
Accessibility through redesigning the site with a simplistic and minimalist approach
Implementing both the new IA structure and contextual supportive language
Progressive flow approach
Combining the four separate forms into one. This led to:
Reduced information overload
Digestible content for users
Clear emphasis of the differentiating paths a report may lead to
Landing page final design
Info card expanded
Following the landing page, users are met with two paths. The path they proceed in is dependent on them discerning whether the animal in distress is requiring immediate attention.
“Immediate Danger” final design
First iterations of the new progressive report form flow (brief overview)
1.
2.
Setting context and guidance
I designed the new landing page to establish a starting point for users and to establish context. We included clear information detailing the concept of animal abuse and distress. CTA’s present:
“Start Report” button encouraging involvement of individuals
Interactive info cards helping to define different incident types
Tips on how to be prepared when reporting
Current landing page
Wireframes
When ideating on designs, I partnered alongside one group-mate to brainstorm ideas. Upon PETA’s request for a mobile app, we approach our designs from a mobile-first approach. This way the designs can seamlessly be translated and scaled between both desktop and mobile app variants.
“Immediate Danger” first iterations + report form
The “Immediate Danger” page is a critical step in the reporting sequence. It dictates the appropriate authorities that’ll respond to the report: Local authorities or PETA.
From the contextual implementation made by our Content specialist, we were able to establish a better understanding of the differences between the paths allowing users to confidently proceed with their reports.
3.
4.
5.
In this first iteration of the current report form, the changes made are as follows:
Users can focus on a singular task as they progress. This solves the issue of users being bombarded with an overbearing load of information and decision making
Users remain on a single page throughout the whole reporting session regardless of the incident type they proceed with, maintaining a consistent experience
Users’ privacy are met with distinction of required vs optional information providence allowing users full flexibility of how much personal information they would like to disclose
Clear indication of form submission ending while allowing users to view a summary of their report to make any last minute refinements as needed
Confirmation that clearly sets expectations for users regarding next steps
Final REcommendations
Contextual info & supportive content
Building back trust by bringing awareness of what information is being requested from users.
Providing more contextual information that grounds each section’s intention
Added info icons providing extra detailed information and prompting per user needs
Map feature: Location selection
Providing users with a quick and accessible reporting experience!
Allows users to precisely pin-point the location of the incident or sighting of an animal in danger.
Allowing users multiple options to provide location regardless if they’re unaware of the specific address
Mobile app: Be Prepared
On the mobile app it features a page called “Be Prepared”. This page houses additional resources that prepare individuals if they ever wanted to take matters into their own hands to get involved in the protection of animals. The items provided are:
Support articles linking users to source material housed in the main PETA web browser
“Emergency Preparedness Info”
“Helping Wildlife Emergencies”
PETA’s “Animal Rescue Car Kit”
The staple experience
A simplistic and minimal design approach.
Consistent reporting experience while remaining on a single page
Visual indication of form progression
Clarity & accessibility; faced with fewer decisions at a single point
Prototype links
Usability testing
Conducted in-person testings while running the prototype on mobile device
Results
All 11 participants successfully completed the form
Users appreciated the direction of a progressive flow
Participants pointed out difficulties interacting with the map select button
Interaction space of the button too small
Participants still found it difficult to pinpoint the right incident type to report on
Lots of high remarks for added context
Positive feedback on mobile app design
“Appreciates extra info on recognizing cruelty/distress and what items to have to prepare the report.”
“Like Be Prepared section, bottom nav is easy to understand.”
“The progress bar was nice, I felt like I knew where I was in the process. There weren’t too many steps to be annoying.”
CLIENT FEEDBACK
After presenting our recommendations to PETA, they gave us a lot of positive feedback in our redesign. They complimented us in our accurate identification of the site’s pain points and especially liked our context based landing page.
“Fantastic job streamlining and identifying…where users get caught up…love added context in helping users find the definitions of words––hadn’t considered it. When you’re in this world it’s obvious...what that means…did amazing job pinpointing where [the confusing points] are.”
A Time to reflect
This project brought many wonderful opportunities and learning experiences working in a collaborative space. The most fruitful moments were problem solving each new challenges we stumbled upon as a team. One big takeaway for me was our ability to decisively manage our tasks to ensure we were all aware of our duties and expected contributions to the project. We had a clear picture of what exactly each of us were bringing to the table as a team.
Some next step and considerations:
Looking into implementing a “Save Report History” feature for the mobile app experience
Additional testing on how users believe an incident should be categorized
Participants struggled to identify the right option during usability tests
Considerations about broadening our research parameters in hopes of collecting more data
Expanding our interview parameters to family and friends to get more insight on user experience
Reaching out for follow up interviews to learn of any other pain points not mentioned. Potentially opening up other solutions we hadn’t considered.