Purrfect Home Pet Finder
Responsive Website
A responsive website designed to assist busy humans and animals in need at local shelters by providing a platform for connection.
My Design Process
-
Researching user needs.
-
Stating my users needs and problems.
-
Creating a lot of ideas and challenging assumptions.
-
Create solutions!
-
Testing my solutions and iterating on them.
Project Overview
The Problem
Busy people are overwhelmed by the the process of easily searching for a pet to adopt that would fit their lifestyle choices.
My Role
UX Designer
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting mock usability studies, accounting for accessibility, and iterating on designs.
Responsibilities
Empathize and Define
Initial Research into Users Needs
-
Conduct user interviews in order to better understand user needs and problems that users face in their daily lives around similar websites and apps.
-
Identify user pain points based on data from user interviews.
-
Create a persona to better understand the user their pain points.
User Research Summary
I conducted usability studies, created empathy maps, researched for a competitive audit, created personas, and much more. The main user group that was determined through my research we’re aged 18-65 and because of lack of time or inability had a difficult time finding the perfect pet for them at a local shelter.
The research confirmed original thoughts about intended users but research also let us know that not only was time, location, or inability a factor but so was convenience.
User Research Pain Points
Time
User group can sometimes be too busy to go to every shelter to look for a pet.
Accessibility
Lots of adoption sites are overwhelming and include too much information, etc. A simple more straightforward site would help with accessibility.
Interface
The interface of many shelter websites are not organized well or easy to use.
Availability
Users sometimes have a hard time finding the pets they want.
Persona: Mina
I created a persona for someone that embodied the user group that my app would be geared towards. I named her Mina!
Mina is looking for a more efficient way to find the perfect cat for her, and desires an easier solution like a website or app that can help her navigate the process with ease.
Ideate
Challenge assumptions and craft a solution!
The data I gathered from user interviews pointed to many users struggling with other the pet adoption process either in person or via a website or app. There was a clear need for users to be able to navigate the adoption process more easily…
-
Ideate on a proposed solution by creating paper wireframes
-
Take the paper wireframes to the next step by creating digital wireframes.
-
Create a low fidelity prototype from the digital wireframes.
Solution
Design a cross-platform tool to help people find the perfect pet for them by providing a space that showcases animals in need of adoption from local shelters.
Paper Wireframes
I ideated by creating paper wireframes of what the proposed app would look like. Mocking up the paper wireframes helped ensure that pain points were taken into account and think about where information would be on each page before taking the designs digital.
Navigation
Clear and concise navigation was an important feature to help users walk through the user flow more accurately.
Digital Wireframes
User Research
As I progressed through the design phase, I made sure the digital wireframes reflected feedback and findings from user research.
Prototype & Test
Create working prototypes of the digital wireframes and test the designs.
-
Create a low fidelity prototype from the digital wireframes.
-
Conduct an unmoderated usability study in order to identify ways to improve the app.
-
Create mockups of the low fidelity prototype based on insights from the usability study.
-
Create a high fidelity prototype based on findings from the usability study and the mockups.
Low Fidelity Prototypes
The Purrfect Home Pet Finder low-fidelity prototype shows the primary user flow of the responsive website I am building so that it could be used in a usability study with actual users.
Usability Study Findings
1
2
3
Accessibility
Having images of the pets with their names and info listed clearly allows for better accessibility with screenreaders.
Visual UI
Breaking up information into clearer sections would be helpful.
Navigation
There should be multiple ways for the user to navigate through the website. This could include both navigation options in the toolbar at the top and ways to access that information within the website itself.
Mockups
I took my design from rough digital low fidelity prototype to a more polished high fidelity prototype.
High Fidelity Prototypes
The final high-fidelity prototype was more complex but also more refined with clear user flows for ordering food. The app met user needs by providing allergen information up front.
Moving Forward
-
Accessibility takeaways based on study findings and the design process.
-
The most important things I learned during the design process.
-
Next steps in continuing to iterate on the design.
Accessibility Considerations
1
Color
Used high contrast colors so that all users can more easily view text.
2
Images and Words
Included pictures of items as well as icons so that the users not only had the text description, but a visual representation.
Text Hierarchies
Adjusted text size to assist users with screenreaders.
3
Takeaways
Impact:
The Purrfect Home Pet Finder responsive website meets user needs by removing the guesswork from from the adoption process.
“Being able to clearly see the adoption process laid out in front of me makes the process for finding a pet so much easier!”
What I learned:
Each step of the design process is so important! Drawing insights from research and applying your insights to your final designs can make the app truly useful and accessible for all users. Even small changes in usability can make a huge impact!
Next Steps
1
Usability
Conduct another round of usability studies to see what can be further improved.
2
Accessibility Research
Do further research on accessibility needs and see how I can continue to improve in that area.
Refine
Further refine my design based on the previous steps.
3
© Emily Cloninger