PET ADOPTION FLOW
The product:
Pet adoption flow is a website for people who are willing to adopt an animal from a shelter. P.A.Flow main goal is to make pet adoption and donation to shelters easier and clearer.
Project duration:
April 2022 to May 2022(It is a fictitious project for Google UX Design Certificate studies)
The problem:
There is no such a platform in Lithuania, where you can browse shelters, animals, make donations and begin adoption process in one place.
The goal:
Design P. A. Flow website to be user friendly, easy to understand and go through different user flows (like donating, browsing, adopting).
My role:
UX designer leading the whole website design.
Responsibilities:
Conducting interviews, paper and digital wireframing, prototyping (both low and high fidelity), conducting usability studies, making mockups, accounting for accessibility, iterating on design and responsive design.
UNDERSTANDING THE USER
User research. Affinity diagram. Empathy maps. Personas. Problem statements. User journey maps
User research: summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that people would love to have an opportunity to browse shelters and animals in one place and also plan and begin adoption flow on the website and there is no such a platform in our market.
Working with user research answers: Affinity diagraming
Pain point #1
Pain point #2
Pain point #3
There is no such a website in our market where people can browse all shelters and animals in one place.
There is no website where people can plan meetings with selected animals and go through pet adoption flow.
Separate shelters’ websites are often outdated and not easy to use.
Personas
User journey map
User journey map of Barbora’s experience using the site to help identify possible pain points and improvement opportunities.
Empathy Maps
User research: pain points
STARTING THE DESIGN
Sitemap. Paper wireframes. Digital wireframes. Low-fidelity prototype. Usability studies
Sitemap
In the beggining I made a sitemap focusing on user flow. My goal here was to create strategic user information architecture to make a website clear and simple. Note: Final website came out a bit different from this site map.
Paper Wireframes
Sketched some paper wireframes keeping in mind user pain points that I polished into one final wireframe.
Paper wireframe screen size variations
Sketched some wireframes for additional screen sizes to make sure the website would be fully responsive.
Digital wireframes
Prioritized essential parts of the website like animals, shelters and donating and made them to be reached in different ways.
Digital wireframe screen size variations
Here are comparison of mobile and web homepage wireframes.
Usability study: parameters
Usability study: findings
These were the main findings of the usability study I conducted on my low-fidelity prototypes:
Finding #1
Users think there should be adoption button on home page (not only on animal page).
Finding #2
Users need bigger and clearer buttons like submit, filter etc.
Finding #3
Users missed step by step instructions (rules) how to adopt animal before they begin process.
REFINING THE DESIGN
Mockups. High-fidelity prototype. Accessibility
Based on the insights from usability study I made changes to website. One of the changes was to put “Adopt” button on top bar menu:
Mockups
Before usability study, there were no rules/instructions about the steps that are needed to be done when adopting an animal:
Some mockups of desktop screen size:
Some mockups of mobile screen size:
High fidelity prototype
A link to high fidelity prototype: https://xd.adobe.com/view/29ac75b9-a6a3-4e4e-8530-ea5086c1d1d9-7cff/?fullscreen
Accessibility considerations
#1
I used headings with different sized text for clear visual hierarchy.
#2
I used high contrast colors to help people with visual impairments.
#3
I used landmarks to help users navigate the website, including users who rely on assistive technologies.
GOING FORWARD
Takeaways
Impact: My target users shared that the design was intuitive to navigate through and demonstrated clear visual hierarchy.
What I learned: I learned that users wants to reach main site functions in different ways so my website got matrix model view. Even small changes could led to huge usability improvement and I should always keep in my my potential users needs and possible pain points.
zbliujute@gmail.com
