Abbey Cat Adoptions
Presented by Molly McCleary, Ayra Malik & Leslie Amata Teta
Fantastic Felines
our team:
Leslie Amata Teta - Project Manager
- UX/UI Designer
Ayra Malik
- UX/UI Designer
Molly McCleary
- UX/UI Designer
Molly’s contributions
Molly McCleary
- UX/UI Designer
Project overview
Scope: 3 weeks
Research Objective: Explore strategies for optimizing the Abbey Cat Adoptions website to deliver an intuitive and frictionless user experience.
Solution: To increase user engagement and facilitate smoother navigation for visitors by implementing a modern, responsive and visually appealing website design.
User persona
Ben Carter
Name: Ben Carter
Age: 30
Profession: Graphic Designer
Location: Mississauga, ON
Ben works from home and lives by himself which can be lonely so he is looking to adopt a cat for the first time.
He loves all animals but he thinks cats are great companions as they are also low maintenance. Hence, this would make it easy for him to balance having a pet while working from his home office.
Ben is always looking for opportunities to help animals and thinks volunteering with an animal non profit will help prepare him for pet ownership.
While creating the persona I tried to really focus on all aspects of Ben’s life and how that could impact adopting an animal.
Methodology
We started our research by conducting a quantitative User Survey.
1.
Next, we conducted a qualitative Usability Testing for the existing website.
2.
Methodology
For the Quantitative User Survey, participants were randomly selected via social media platform X to collect diverse perspectives from a broad population sample within the Greater Toronto Area.
The Survey data showed that:
1
Methodology
For the Qualitative Usability Testing of the existing website, we randomly selected participants based on:
We asked these users to conduct various tasks in order to gain their feedback regarding:
2.
Organizing Data
We organized the user insights collected from the usability testing by creating an affinity diagram to better evaluate the data.
We further organized the data from the Affinity Diagram to create a prioritization matrix in order to narrow down on the low complexity & high impact solutions.
“The website looks outdated and not reliable hence, would not use the site.”
“It is not mobile friendly & is difficult to navigate”
“Wish for a modern and responsive web design”
Ben, a 30-year-old graphic designer, holds a profound fondness for animals, particularly cats. Driven by his passion for animal welfare, he considers adopting a cat through a nonprofit organization. However, Ben faces significant obstacles due to the outdated and non-responsive Abbeycats website. Its poor aesthetics and navigation impede his ability to efficiently explore available cats and adoption procedures.
To address Ben's frustrations and enhance the user experience, Abbey cats should undergo a comprehensive website redesign. Implementing a modern and responsive design will ensure seamless accessibility across various devices, ultimately facilitating Ben and others like him to navigate the website effortlessly, making the adoption process more accessible and rewarding.
User insight statement
Problem Statement
Abbey Cats, caters to individuals like Ben, passionate about adopting cats through nonprofit organizations. However, the outdated and non-responsive nature of the current platform presents significant obstacles in exploring available cats and adoption procedures efficiently, leading to user frustration.
How might we enhance Abbey Cats website to provide a seamless and user-friendly experience, specifically addressing the poor aesthetics, navigation, and responsiveness, measured through an increase in the average time spent on the website by users like Ben, indicating improved engagement and satisfaction?
User Flow
I developed the user flow based on our site mapping and card sort. I focussed on easing the flow and minimizing the transitions to new pages.
User Scenario
Ben Carter
Working from home and living alone has been increasingly becoming more difficult for Ben and his mental health. He is interested in having an animal companion and starts to research rescues and adoption agencies. Through his research he find Abbey Cats Adoptions. He really enjoys the fact that Abbey Cats has opportunities to volunteer and learn. As a first time pet owner, Ben wants to have all the tools in order to create a happy and healthy environment for his potential cat. Ben finds information on volunteering and the adoption process through Abbey Cats website to better prepare himself and his home.
Realization
01
Research & Discovery
03
Learning & Exploring
02
New beginning
04
Story Board
Ben is working from home and lives alone. He has been becoming increasingly lonely in his living situation and is interested in a solution.
As an animal lover, Ben comes to the conclusion that he would like to adopt a cat . He begins to research online about rescue and adoption agencies.
Ben finds Abbey Cats Adoptions during his research into adopting a cat.
Ben explores Abbey Cats website and learns about the adoption process and volunteering opportunities.
Through his exploration of the website and the content, Ben realizes how much he has to learn about pet ownership. Ben decides to sign up to volunteer in hopes of learning more from the knowledgeable people at Abbey Cats.
Ben volunteers for one of Abbey Cats Adoptions’ events. During his time volunteering he learns about cat ownership from the employees of the organization and the foster families. Ben now feel more confident in his knowledge about cats and pet ownership and decides to fill out an adoption application.
Ben now feels more confident in his knowledge about cats and pet ownership and decides to fill out an adoption application.
User Journey
“ I could use some company.”
“ So many options. I don’t know which one is dependable.”
“Wow there is a shelter near me for cats.”
“ There is so much to learn about pets.”
“Maybe volunteering is a better option for now.”
“I am ready to fill out my application.”
Competitor Analysis
We assessed 2 director competitors and 1 indirect
Commonalities we observed:
Wireframes
My Wireframes
Everyone enjoyed the ideas I had for the available cats page with the hover interaction and carousel so that is what I was put incharge of for the prototype.
Prototype Iteration 1
Prototype: My Pages
I focused on implementing the hover interactions of the profiles so the adoptable search was smooth.
I created the carousel for the adoptable profile to make it easier for users to interact with multiple profiles with minimal clicks.
I had learned about hover interactions from my last project but this was my first attempt at carousels and I am eager to learn more ways to create them and make smoother transitions.
Usability-A/B Testing
“Some the text isn’t aligned the same on different parts of the pages”
“The footer seems to be different on different pages which is confusing.”
“Some of the Icons are hard to see and I can’t tell what they are.”
Prototype Iteration 2
Prototype Iteration 2
Minor colour and font fixes.
1.
Increasing size of icons.
2.
Iterations made
Organizing the footer and making it cohesive on all pages
3.
Style Guide
I created a style guide based on the elements each of us worked on as well as the elements we decided on together.
Prototype Demo
Style Guide Explained
Future Opportunities
Updating the available cats carousel to make the text and images more visible without scrolling while still having an enlarged profile image.
1.
Creating an easy adoption form that is accessible on the website without using google forms.
2.
Future Learnings
After completing this redesign project I have come to learn that collaborating is hard at times but ultimately rewarding. Using many minds together leads to a more evolved product through everyone's insights and strategies coming together. I learned a lot from my collaborators about new elements and interactive components and wish to progress that learning further in the future.
Thank
You
QnA
Session
Appendix