Vanity Furs
Responsive Web Design
Introduction
In this case study, we detail the redesign of the Vanity Furs website, a mobile grooming service committed to delivering high-quality pet care directly to clients' doorsteps. This case study outlines the research, design process, and outcomes that transformed Vanity Furs’ online presence.
Details
Role: Product Designer
Tools Used: Figma, Figjam
Duration: 4 weeks
Overview
Problem
The original website fell short in professionalism and mobile responsiveness, limiting user engagement and accessibility. Our objective was to create a polished, user-friendly interface that not only reflects the premium nature of Vanity Furs’ services but also ensures seamless navigation on all devices.
Solution
By emphasizing a modern aesthetic, intuitive design, and enhanced functionality, we aimed to elevate the user experience for pet owners seeking reliable grooming solutions.
01.
Research
Competitor Analysis
All three sites are for pet grooming sites but for three levels of enterprise - corporate (big box), hospital, and local small business. In terms of these two, Vanity Fur resembles The Bark Spa the most as a local small business.
Both Petsmart and Chino Valley Animal Hospital have booking process and visually appealing websites. The Bark Spa doesn’t have much to its website nor does it have a booking process. Petsmart and CVAH rely on repeating customers/patients for the grooming service whereas, The Bark Spa relies on word of mouth.
To be successful, Vanity Fur needs a booking process and a visually appealing website.
User Research
I conducted 5 virtual user interviews with pet owners of different ages and pets
A 41 year-old pharmacist who has one dog
A 30 year-old attorney who has three dogs
A 43 year-old customer solutions specialists who has two dogs
A 25 year-old HR specialist who has two dogs and two cats
A 25 year-old customer service representative who has one cat
The user interviews with five pet owners revealed key insights into their needs and preferences for the Vanity Furs website.
Participants highlighted the importance of a user-friendly interface for easy appointment scheduling and expressed a strong desire for a professional, visually appealing design.
Mobile accessibility was crucial, reflecting their busy lifestyles. Additionally, they valued the inclusion of a gallery showcasing grooming work and customer testimonials to build trust.
These insights will be instrumental in guiding the redesign, ensuring it meets the expectations of pet owners and strengthens their connection to Vanity Furs.
02.
Analysis & Planning
Affinity Map
By categorizing their needs and preferences, we uncovered important priorities, such as the desire for a user-friendly interface, mobile accessibility, and the value of showcasing grooming work and testimonials. This visual representation of data will serve as a foundational tool in guiding our design decisions, ensuring that the redesigned Vanity Furs website effectively addresses the needs of pet owners and enhances their overall experience.
User Personas
POV Statements
I would like to help people who find it stressful to coordinate grooming with their busy work schedule and prefer a solution that offers flexibility and ease of use.
I would like to help people who need a fast and effortless way to book grooming appointments for their pets without interrupting their daily routine.
I would like to help the groomer with juggling multiple appointments and ensuring timely arrivals, as they affect customer satisfaction and business growth.
HMW Statements
HMW provide flexible scheduling options to accommodate different work schedules?
HMW make the booking process seamless and quick for busy pet owners?
HMW improve communication between groomers and their clients to ensure smooth operations?
Problem Statements
03.
Design
User Flows
Booking an appointment
The original Vanity Furs website lacked an appointment booking tool, but user interviews underscored its importance, emphasizing the need for a straightforward and efficient booking process. It starts with a clear selection of services, followed by an intuitive calendar for date and time selection. Users can quickly enter their pet's details and specific grooming requests before confirming the appointment. This streamlined approach reduces unnecessary steps and accommodates the busy lifestyles of pet owners, ensuring a smooth and enjoyable booking experience.
Low Fidelity Wire Frames
The low-fidelity wireframes for the redesigned Vanity Furs website provide a foundational layout focused on user experience. These sketches outline key pages, including the homepage, services, and appointment booking flow. By emphasizing functionality, the wireframes illustrate user navigation from selecting services to confirming appointments, enabling early testing and refinement of interactions to ensure a streamlined experience that meets the needs identified during user interviews.
Iterate
#1
Playing around with the placement of content on the home page to provide a better balance of images to text for the eyes.
The design wasn’t made until later in the high-fidelity wireframe where the images and color background were added.
#2
From the user interviews, some mentioned that the service page was very messy.
Therefore, I stripped it back and made it more linear and sans-serif.
High Fidelity Wire Frames
By conducting further user testing on these wireframes, we gathered valuable feedback to make final adjustments, ensuring the website not only looks appealing but also provides an intuitive and seamless experience for pet owners. The high-fidelity wireframes for the redesigned Vanity Furs website bring our vision to life with detailed visuals and interactive elements. These wireframes incorporate the refined design elements, including color schemes, typography, and imagery, to closely resemble the final product. Key features, such as the appointment booking process and service descriptions, are fully represented, allowing for realistic user interactions.
Mobile Layout
At a Glance
Make a good first impression
Without losing the Vanity Fur personality, I kept the colors but cleaned it up a bit. I made the logo simple and clean but used a elegant font to play with the “vanity.”
Menu is simplified at the top to max four links and the BOOK NOW feature was made a button as that would be reason why the majority of customers will come to the site.
Newsletter section was added as that will help with marketing retention.
From the existing website
Make a good first impression
Having a page of the groomers adds a trusting and personality factor for the customers.
At a glance
From the research, the participants mentioned that they would like to be able to see the list of services and prices at a glance before booking.
It eliminates unnecessary booking starts and provides an additional factor of trust.
Reward Loyalty
By adding the ability to create an account, the likelihood of having a return customer increases. Saving pet and user profiles will reduce friction for next time.
Make it a date
Vanity Furs services multiple cities in the Inland Empire and by picking the city, they can send the right groomer that is nearby to save time.
The scheduler makes it easy for clients to choose the right date and time for their schedule.
Peek a boo
I made the menu a collapsible hamburger menu to hide the clutter when not in use.
Condensed
The information is scaled down to the mobile format for easy viewing while mobile.
04.
Testing
User Testing
User testing involved gathering feedback on the low-fidelity wireframes from a diverse group of participants, focusing on their interactions with the appointment booking process.
Objectives
The goal is to assess how users navigate the website and find the information that they need to find and to access the success of booking an appointment for their pets
Scenario
Testers are presented with a scenario where they are to make a booking for grooming and to find services
Results
Successes
All users found the booking process straightforward, with clear steps for selecting services and confirming appointments.
All the participants found the navigation generally intuitive, easily finding main sections like "Services" and the booking feature
All participants were satisfied with the ease of use, especially the booking process.
All participants thought that the services were straightforward to understand
One of the participants suggested adding a “Favorites” feature to quickly rebook their preferred grooming services.
The prototype of the redesigned Vanity Furs website successfully demonstrates an intuitive user experience focused on the appointment booking process. User testing revealed a high level of satisfaction with the layout and design, while also highlighting areas for minor improvements, such as navigation clarity. Overall, the prototype effectively reflects user needs and preferences, providing a solid foundation for the final implementation that aims to enhance engagement and drive bookings for Vanity Furs.
Prototype
Lessons Learned
The redesign of the Vanity Furs website has successfully transformed the user experience by prioritizing mobile-friendliness and integrating a seamless booking appointment tool. Through user feedback and iterative design, we created an accessible and engaging platform that meets the needs of pet owners, ultimately enhancing customer satisfaction and driving service bookings. These insights will guide future design endeavors, ensuring continued focus on user-centered practices.
Mobile Optimization is Key: Ensuring the website is fully responsive significantly enhances user experience, as pet owners often access services on their phones.
Booking Tool Essentials: Integrating a straightforward appointment booking tool streamlined the user journey, making it easier for pet owners to schedule grooming services.
User Feedback is Invaluable: Gathering insights through user interviews and testing helped identify critical needs, leading to design choices that directly address user pain points.