project overview
The product
companion is a (make believe) animal shelter that aims to match adoptable/fosterable pets with well-suited humans. The Companion website caters to this experience by providing a fun, efficient, and clear way to find the perfect pet for people of all levels of experience with pets.
Duration
may 2022 - August 2022
Companion
Case study for Google's online ux design cert
My role
The problem
UX designer designing a responsive website for companion from conception to delivery
People who are interested in bringing a pet into their home for the first time are often unsure if they are prepped for the commitment of adopting or fostering.
The goal
Create a responsive website for companion that allows users to feel confident, prepared, and supported when bringing a lifelong pet in their homes.
My responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the user
user research | personas | problem statements | user journey maps
user research in summary
I conducted interviews and created empathy maps for the initial project idea from Google’s UX Design Certification course which was to design a responsive website for an animal shelter. It is in actuality that from understanding their needs that the primary user group was identified: first-time pet owners.
This user group is a growing population as we can see from how many young professionals are working in remote/hybrid SITUATIONS during COVId-19 and feel lonely. However, with the ambiguity of returning to the workplace and time at home, many users are unsure if they can really commit to owning a pet or if they are ready for one. In conjunction with this, animal shelters often receive an overwhelming amount pets and not only need foster homes/adoption, but are also constantly searching for volunteers and donations to support them.
user research: pain points
Persona
Z
a
C
H
problem statement:
zach is a recent hire of a hybrid office and moved to be closer to his workplace. he needs an accessible introduction to owning a pet because he has never owned a pet in the past but has always liked animals.
goals:
-
Wants to know whether he is ready to adopt or should foster instead
-
Wants resources to feel confident and prepped in owning a pet
frustrations:
-
unsure what kind of pet would best suite him and what he should do before owning a pet
-
Feels overwhelmed when doing his own research
zach is a young professional that just moved into his own apartment in a new city. His new job is hybrid and goes to the office once/twice a week. he feels lonely at home and is interested in owning a pet but hasn't in the past and doesn't know if he's fit for the commitment.
user j0urney map
Mapping zach’s user journey revealed how helpful it would be for users to have access to a dedicated website like companion.
starting the design
Paper wireframes | Digital wireframes | Low-fidelity prototype | Usability Study
Paper wireframes
Intentionally drafting iterations of each screen of the website on paper ensured that the elements that made it to digital wireframes would directly address user pain points. Thus one of the main features included was the companion quiz on the main page along with a hero image.
digital wireframes
As the initial stages of the design process continued, I made sure to include feedback from user research
The main feature, the companion quiz draws the most attention on the home page
The main goal for the user is to get an idea of what level of commitment is suitable for their current situation according to companion's options: adopt, foster to adopt, foster, or volunteer. Thus, while the companion quiz may be helpful for some, it is not the sole way to interact with the site and simply gives those who may be unsure a better sense of what may fit their lifestyle.
Low fidelity prototype
From the digital wireframes I was able to construct a low-fidelity prototype that could be tested in a usability study. The main user flow included navigation to the companion quiz, viewing adoptable/fosterable pets, and finding the contact information of companion.
Usability study: Findings
I conducted two rounds of usability studies. Findings from the first round helped influence the designs from wireframes to mockups. The second study utilized a high-fidelity prototype and revealed what aspects of the mockups needed refining.
round 1 findings
Users don’t boxes that take up large portions of the screen
text weight and size is important in establishing hierarchy
users like more than one way to access certain pages
round 2
findings
users like emphasis on the tabs they are viewing
users like shortcuts to pages for quicker transitions
refing the design
mockups | high-fidelity prototype | accessibility
Mockups
The main purpose of early designs were to articulate the main user flow of filtering the menu, so once usability studies were complete, I was set on adding graphic elements to really bring out the true experience. I made sure to focus on the hierarchy and consistency of elements to ensure ease of use.
#F0803C
#FFFEEE
#2D728F
KEY MOCKUPS
The second usability revealed frustrations that were related to design elements rather than the user flow itself. 5 out of 6 users had difficulty understanding what was clickable and what wasn't. From this clear pain point, I added emphasis on the buttons through hover states, changes in typography/color, and made clearer interactions. other feedback related to font size and images led to design changes as well.
high fidelity prototype
The final, responsive, high-fidelity prototype included graphics, animations, and other design elements to personalize the app. It also included cleaner transitions to make the user flow intuitive.
accessibility considerations
going forward
takeaways | Next steps
Takeaways
impact
The app caters to the reality that there is an increase in people interested in bringing a pet into their home with the rise of remote/hybrid work culture. companion meets this demand while also providing information so that pets are not matched with unprepared owners & unstable homes.
"i think companion could be a great solution for those who have more time on their hands at home and can really help shelters out by fostering. i also know so many people who have benefited from adopting and fostering after being so lonely in this remote-work life."
- from peer feedback
What i learned
the extent that i have dedicated to the companion app is only the beginning. there are many functional tweaks that need to be programmed and research that could be conducted for the authenticity of the website's goal, but i believe the idea has been presented fairly. with proper funding and research, companion has the potential to be an impactful solution. being this is a make-believe shelter for a project within a bootcamp, I do not have the capacity to do so, however contributing to this project has made me aware and excited for real projects that can benefit real users.