Jazzmania Cattery
Redesigning a Responsive Website
ROLE
CLIENT
TOOLS
UX Researcher
Jazzmania
UX | UI Designer
Figma | Miro
Optimal
DATE
2023
March
Summary
Problem
User: Many users are hesitant to adopt from breeders because their websites "look shady."
Client: The owner feels frustrated because she spends a lot of time responding to customers via email and providing them with information that can be found on her website.
How Might We
Users: Make users feel like they are adopting a kitten from a reputable breeder?
Client: Reduce unnecessary emails the owner receives so she could spend more time taking care of the kittens?
Solution
Users: Redesign the website with a modern aesthetic to reassure users that the breeder is trustworthy.
Client: Group content into smaller sections so that users could access the information easier.
Paws and Think
Background
Starting Point
Jazzmania Ragdoll Cattery is owned by Joyce Houser, who is dedicated to breeding beautiful, loving and healthy ragdoll kittens since 1996. As the annual demand for ragdoll kittens continue to remain at a high, Joyce is exhausted and trying her best to keep up with all the email inquiries from prospective adopters.
How does the adoption process work at other establishments? Exploring this question may help us make Joyce's website work more efficiently for her so that she can spend more time monitoring the health and development of newborn kittens.
Competition
To kick things off, I researched a variety of other businesses people could look at when adopting pets. A commonality among all these sites from a functional standpoint was their mobile responsiveness, which is something the current Jazzmania site doesn’t have.
Humane Society
Rolling Creek Ragdoll
Folkvangr Cattery
Petfinder
Tags photos with specials labels (ex. "Forget Me Not" for those who haven't been adopted yet in years)
Allows users to save their searches
Announces prospective M/F cat pairs that'll be expecting litters for the upcoming year
Posts pictures of current litters and informs the public of when reservations start
Large pictures overshadow kitten registration information
Directions within text box vanishes as soon as users fill in the information
Pet listings are not up to date do to lack of maintenance
Adoption instructions are initially unclear
Interviewing the Business Owner
Next, I spoke with Joyce learn about the purpose of her website, how it fits in the adoption process, and her business goals. She wants her customers to learn a little bit about ragdolls, the cattery, and herself. She wants also wants them to see a lot of cat pictures, and learn about the adoption process and fees.
"When people send one liner questions with no information about themselves, no name, no nothing."
"When they answer some of the questions but not all of them and then I have to email them for more information."
"Sometimes people will send me all these questions but won't tell me where they live."
"I'll have people who ask me about information and it's on the website"
Joyce's Frustrations
Ultimately, the time she spends keeping up with replying to customers through email take her time and energy away from caring for the kittens.
When customers send emails without introducing themselves
Sometimes they answer some of the questionnaire that's listed under the "how to adopt" page, but not all
Replying with information that can be found on the website
Spending time replying to customers who don't live locally
Getting the User's Perspective
Through remote and in-person interviews, I spoke with people who were interested in adopting, people who adopted from breeders, and those who adopted from Jazzmania’s cattery.
.png)
Recurring Frustrations
The existing site looked very old and was hard to look at because of the color and design choices.
Large bodies of centered text were very difficult to read. More than half of the users reported that they didn't want to read the information unless they really wanted a ragdoll kitten.
A few users felt frustrated that they had to copy & paste the questionnaire into their email or have multiple windows open so that they could answer them.
Due to the aesthetics at layout of the existing site, 70% of users thought that the Jazzmania site did not look trustworthy.
Target Audience
Learning Opportunity!
Initially, I assumed that users would think that the website looked outdated. While that was true, I learned that because the Jazzmania site didn’t look like websites the users were used to looking at, their prominent thought was that the website looked "shady."
HMW
Make users feel like they are adopting a kitten from a reputable breeder?
HMW
Reduce the amount of emails Joyce receives that omit pertinent information from prospective adopters so she could spend more time tending to the kittens?
Solution
Redesign the website with a modern aesthetic. The new Jazzmania website will have information grouped into smaller chunks so users can access the information easier. It will also include an adoption form and location filter so that Joyce has all the information she needs, and doesn’t need to spend additional time responding to customers who live more than a 2 hour radius away from her business.
Results
The following information were grouped similarly among participants
Organizing the Content
Based on the user interviews, people stated there were too many links in the navigation that were quite wordy. After doing a competitive analysis, I thought I already had a good sense of how information would be organized, but decided to run A/B testing using open card sort and a tree study so I could compare my thoughts with how people organized the content:
Cards to Sort
Adoption Process
Adoption Application
Photos
Videos
Jazzmania History
Our Kittens
Testimonials
Sires & Queens
Ragdoll Breed
Kittens, Sires & Queens
Testimonials & About
Photos & Videos
How to Adopt & Application
Results
A couple users expected testimonials to be under the About section
Some users expected to learn more about the kittens after clicking on photos, and then being able to adopt
88% of participants ended up at the correct destination
Tree Study
Site Map
The results from the open card sort and tree study helped me re-design the site map.
Learn about Adoption Process
For users who are curious to learn how the adoption process works, they would start off at the home page, and click adoption process call to action button in the header
.png)
Applying for a kitten
For users who made up their minds and decided to go through with the adoption, they would follow the same steps as the previous task flow, click on the "kitten application" button, agree to breeders terms and conditions, and then submit their application after filling it out.
.png)
Existing Site
Home Page
How to Adopt
Suggested Designs
Client's Thoughts
After showing Joyce the proposed mockups, she strongly preferred the following changes.
Usability Testing
During user testing, I heard thoughts about the aesthetics between the suggested design and the design my client preferred, and observed their ability to complete the two tasks. Their most notable thoughts were that:
Of usability test participants reported that they could see themselves using the newly designed website. This is a huge improvement from how users felt about the existing site!
All users were able to complete both tasks, but had concerns in the following areas:
Feedback
Site Notification
Kitten Application
CTA Wording
Adoption Process
Aesthetics
Same wording under Step 1 and the page header
Step indicator look like buttons
There's no confirmation for applicants who passed the screening
"Adoption Process" sounded laborious
Entering the duration seemed odd
Eyes are strongly pulled towards the bold purple
Difficult for eyes to adjust between the light and dark text
Client's Response to Findings
After talking with Joyce and discussing the experiences the users were having with the designs she preferred, she understood the users difficulty. However, she wanted to have more purple tones throughout the page without compromising ease of viewability. The following are three variations of the design:
A
B
C
Final Screens
Iterations with Joyce's final choice, along with changes based on the feedback from usability testing.
Home Screen & How to Adopt
Pop Up Screeners
Application & Confirmation Screen
Mobile Screens
Reflection
Given more time I would have liked to explore different a way to present the adoption process summary in a graphical way that didn't look interactable.
I also would have liked to meet with Joyce in person instead of virtually, especially since I learned at the very end of the project that the device she was using has an older graphics card that didn't show an accurate view of the colors. However, the two hour distance between our locations were not feasible. At least I know I'm just within kitten adoption radius ☺️.
more works