top of page
PetCode Thumbnail

PetCode Redesign and UX Writing

San Francisco Animal Care and Control

Project Overview

Role: UX Research and UX Writing
Client: San Francisco Animal Care and Control
Focus: Button labels, text field instructions, menu clarity
Users: Shelter volunteers (often older, varying tech comfort)
Goal: Make the interface easy to understand and complete without confusion.

THE CHALLENGE

My team and I created PetCode as an omnichannel web app enabling San Francisco Animal Care and Control (SFACC) shelter volunteers to share rich, multimedia profiles of dogs with potential pet adopters. However, SFACC relied on us, external volunteers, to upload photos, videos, and text for each dog’s profile.

We designed a shelter management tool that allows shelter volunteers to upload multimedia and text content internally.

As our users were not tech-native, I sought to reduce the risk of:

  • Misinterpreting fields

  • Skipping required inputs

  • Feeling overwhelmed 


Volunteers needed to complete structured forms, but unclear language could slow them down or lead to inconsistent data entry.

RESEARCH

Stakeholder Interviews

Due to shelter policy, my research was limited to two (2) interviews with our SFACC liaison. These focused on gathering requirements and understanding volunteer impressions of PetCode’s initial language and instructions.

Crucial Insight

Volunteers preferred plain, familiar language and benefited from specific guidance rather than abstract, “cute,” or system-oriented terms.

DESIGN

UX Writing Contributions

Collaborating with the team’s UX designer, I contributed the following:

  • Labeled buttons to reflect clear actions

  • Wrote instructional text for text fields

  • Helped structure the dropdown/menu language

  • Collaborated with the UX designer to align wording with user needs

Button Clarity

I revised button labels to reduce ambiguity about what happens.

For example, “Save and Exit” became “Save Profile.”

From:

Original Button Example.png

To:

Edited Button Example.png

Text Field Instructions

Before:

Text Field Example.png

After:

To help users know what “good input” looks like, I asked questions using plain language.

Before: “What wags this floof’s tail?”
After: “What is the dog’s typical behavior?”

Edited Text Field.png

Menu Labels

I edited menu labels to align with user mental models, moving from vague or internal terminology to plain-language categories.

Edited Menu Text.png

Original menu text

Original Menu Text.png

Edited menu text

PROTOTYPE

Design Principles

For this project, I focused on the following:

  • Use plain, familiar language.

  • Reduce ambiguity in actions.

  • Guide users toward complete, useful input.

  • Support users with low technical confidence.




Click through the prototype.

PetCode prototype link

Constraints

For full transparency, I would like to state the project's constraints.

  • Limited research (1 stakeholder interview and 1 follow-up interview)

  • No usability testing before the project’s cancellation

  • Worked within the existing design structure

NEXT STEPS

Maintain momentum

If my team had more resources and access, I would like to perform the following steps to improve PetCode’s usability
 

  • Test comprehension of labels and iterate on our findings

 

  • Identify where users hesitate due to language

 

  • Measure completion rates or errors

Thank you for reading!
bottom of page