Empathy map
Project overview
The product:
Pet adoption is a website that allows you to adopt a pet through our website. The usual user is between the ages of 24 and 38, and the majority of users are in a couple or with family. The goal of pet adoption is to find homes and families for the pets, as well as to help individuals choose the right pet for them based on their personality.
Project duration:
August 2021 to September 2021
The problem:
People want to know more about the pet's history and their story before they were taken into the shelter, as well as their situation and personality. They wish they could find a pet that matches their personality and family through the website.
The goal:
Create a website that allows users to choose a pet based on their personality and match.
My role:
UX designer leading the pet adoption website design
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
User research:
summary
To better understand the target user and their needs, I conducted user interviews, which I then turned into empathy maps. I noticed that many target users want to adopt a pet for themselves or their families to join them, as well as help those pets have a better life. Many adopting websites, on the other hand, are overwhelming and difficult to browse, which frustrates many potential customers. This made a typically pleasurable experience difficult for them, and they couldn't find what they were looking for.
User research : pain points
Persona
Persona
We created a persona after gathering insights from user research and developing a clear image of who our target user would be. A user persona will assist us in making better design decisions that will meet the needs of the user.
Problem statement
Problem statement
I Created a problem statement based on our persona story which is a brief explanation of a problem to be solved or a situation to be improved It identifies the difference between a process's or product's present (problem) and desired (goal) states.
User journey map
User journey map
I created a user journey map of Eli's experience using the site to help identify possible pain points and improvement opportunities.
Sitemap
Sitemap
Difficulty with website navigation was one of the pain points for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper sketch
Paper wireframes
Following that, I drew paper wireframes for each screen in my website, keeping in mind the user's pain points about navigation, browsing, and what they wish to flow.
Paper wireframe screen size variations
Because Pet adoption customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Low-fidelity prototype
I linked all of the screens involved in the core user flow of selecting a pet and filling out the adoption form to build a low-fidelity prototype.
At this point, I had received feedback on my designs about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Mockups
I made changes to the site's Home page and adoption form flow based on the findings of the usability research.
One of the adjustments I did was to include an open dropdown underneath the dog icon so that people could understand it better.
I changed the form application questionary to multiple questionary forms to make it easy for users.
Mockups: Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile so users have the smoothest experience possible.
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.
Take away
Impact
The website gives users the impression that it matches their needs for adopting a pet based on their personality.
One quote from peer feedback:
"It is really beneficial because I can filter all of my needs from the dog and just look for those that are fit for me and my family".
What I learned:
I have to set my opinion about design aside and look for what the user needs and what the greatest solution is for them.
Next step
1
Conduct another round of usability testing to confirm that the users' pain points have been properly handled.
2
Conduct further user research to identify any new areas of need, and create mobile, tablet, and desktop responsive websites
Thank you
Khatereh tabebordbar