Pet'S
Project overview
The problem
Most pet shelters’ websites have outdated and cluttered designs and illogical structure. They are overloaded with content and the overall look and feel is depressing.
The goal
Design the website to be user friendly by providing well structured and clear navigation as well as having only relevant and informative content. Overall look and feel of the website should be warm and uplifting.
The product
Pet’s is one of few shelter for dogs and cats. Majority of adopters are working adults with families. Pet’s goal is to make pet adoption process as easy and as convenient as possible for all potential adopters.
My role
UX designer - designing the app for The Bakery from the conception to the delivery.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs and responsive design.
Project duration
September 2021 – October 2021
Understanding the user
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many users are busy working adults leaving with their families. They would like to adopt a pet from a shelter but very often are discouraged by the first contact with their website. Many websites are badly designed, badly structured and overloaded with irrelevant content. That makes the website confusing, overwhelming and depressing. Website that should provide relevant and structured information as well as to attract by its design causes frustration and anger.
User pain points
Navigation
Websites in most cases are cluttered with content. That makes it difficult to navigate and to find the correct answer.
Content
Websites are often overloaded with irrelevant and badly structured content.
Design
Overall look and feel of the websites is overwhelming and depressing. Which should not be the case for a pet shelter.
Persona & problem statement
Persona
Problem statement
Lola is a working mother who needs pet shelter’s website to be well structured, including complete information about pets as well as easy and clear adoption flow because she wants to adopt the right dog stress free.
User journey map
I created a user journey map of Lola’s experience using the website to help identify possible pain points and improvement opportunities.
Starting the design
Sitemap
Challenging website navigation was one of user’s pain points. Having that knowledge I created a sitemap. The goal was to create logical and simple navigation.
Paper wireframes
Moving on, I created paper wireframes, keeping the user pain points about navigation, content, and design in mind. Because potential adopters would access the website on different devices, I prepared sketches for different screen sizes to make sure the site would be fully responsive.
Digital wireframes
Shifting from paper to digital wireframes made it even clearer how to address user pain points and improve the user experience. Clear structure of the content and visual pleasure was my primary goal.
Usability study findings
To perform the usability study I created the low-fidelity prototype. There were 6 participants testing the website during unmoderated usability study. Here are the main findings:
Font size
Font size of the top menu should be scaled down to get more clarity.
Search
Users want to also search by a key word.
Experience
Details of the chosen pet should be pre-populated automatically in the adoption form.
Refining the design
Mockups
Based on the insights from the usability study I polished the mockups. Mockups include different screen sizes. Users access websites from different devices. It is essential to optimize browsing experience for a range of device sizes, such as laptop or mobile so that users have the smoothest experience possible.
Accessibility considerations
Headings
Headings were used with different sized text for clear visual hierarchy.
Landmarks
Landmarks were used to help users navigate the site, including users who rely on assistive technologies
Alt text
Alt text was used on each page for smooth screen reader access.
The final product
Takeaways
Impact:
Users confirmed that the design was intuitive and well structured. Beautiful pictures, colors and clear visual hierarchy made the experience even more enjoyable.
„I wish that every pet shelter has the website providing such a good experience. It is logically structured and beautifully designed.”
Website user
What I learned:
I learned that asking for and listening to feedback is key to success. Even small changes can make a huge difference with experiencing the product. Do not be afraid to ask for feedback!
Next steps
Additional usability testing on the new website.
