Spotless Dog Wash & Wellness Co.
Background
Spotless Dog Wash & Wellness Co. is a self-serve wash and professional grooming solutions and services company located in Evanston, IL. Their mission is to provide a safe space to create a connected relationship with your dog. The niche approach of using all-natural products to create a real customizable “dog spa” experience is their main company focus.
Objective
Spotless Dog Wash & Wellness Co. could benefit from a responsive website design, and a fresh new logo and branding that is a minimalistic. The overall website should be informative and friendly - as customer experience is a very important part of Spotless.
Project Details
Tools:
Figma
Duration:
5 weeks
20 hours/week
Role:
Solo UX Researcher & Designer
UI Designer
Heuristic Evaluation
I began the project by doing a usability heuristic evaluation of the current website using the principles from Nielsen Norman Group’s “10 Usability Heuristics for User Interface Design”.
Following these principles, the website’s main usability problems were:
1) The Google Maps on the contact page, was a neighboring company and street-view inside a room. This was inconsistent with:
#1 (Visibility of system status)
#4 (Consistency and standards)
#9 (Help users recognize, diagnose, and recover from errors)
2) The home, contact, testimonial and service pages all had the same hero image. This was inconsistent with:
#6 (Recognition rather than recall)
#9 (Help users recognize, diagnose, and recover from errors)
3) The website had a double navigation. This was inconsistent with:
#4 (Consistency and standards)
#7 (Flexibility and efficiency of use)
#9 (Help users recognize, diagnose, and recover from errors)
After this evaluation, it was clear that there were a few usability problems that could be solved with user research and better UI design. I decided to focus the redesign on the layout and UI design, and keep the original information architecture. However, the Test Phase brought about change to some of the original information architecture for clarity.
Phase 1: Research
Research Goals
To determine who uses self-serve dog wash locations
To understand the needs, wants, frustrations and successes of using a self-serve dog wash company
To discover if the use of natural products and wellness are main concerns of dog owners
To learn the typical grooming patterns of dog owners
To learn what influences dog owners to use self-serve
To uncover competitor standards and features
Secondary Research
I performed secondary research before my interviews to understand the benefits, pain points and frustrations to taking your dog to self-serve washes, since I did not have experience taking a dog to this service. I learned that there
Some benefits of using self-serve dog washes are:
Creating a bond with your dog
It’s cheaper than professional grooming
There is less mess at home (including clogging pipes)
Eases dog anxiety (and human anxiety for their dog)
Access to supplies and advice
Ergonomic tubs, safe water temperatures, and dryers meant for dogs
Becoming more aware of your dog’s health
Competitor Research
I also conducted competitor research on direct competitors on well-known dog grooming and self-serve wash companies to learn about the user flow through their websites. I also researched indirect e-commerce competitors with similar sitemap size and organic themes to gain insight on minimalistic website design.
Interviews & Survey
I conducted a survey to obtain quantitative and qualitative data of dog owners to learn grooming patterns, as well as their attitudes towards wellness, all-natural products, and self-serve washing. The survey also screened out participants willing to interview about their experiences with using self-serve dog washes. The top insights from the interviews are below:
Participants
6 interview participants (1 did not take survey)
6 survey participants (1 did not interview)
Ages 25-66 years old
From Texas, California, Illinois & Hong Kong
Survey & Interview Summary
Reasons why participants book a professional groomer:
Hard to groom at home because dog is difficult to handle
Dog needs to look nice for event, and it's done better and faster at groomers
Some services are hard at home (like clipping nails)
Reasons why participants use self-serve washes:
Like the control of washing dog
Dog is less stressed
It’s convenient to wash dog when doing other errands
It is like a "car wash" for dogs, and the dog is clean before coming home
Top frustrations in a grooming/self-serve wash website:
Not having clear information on how to reserve a spot or book an appointment online
Not having clear information about cleanliness of store
No recent testimonials on websites
The lack of variety in dog pictures on websites
Top wants in a grooming/self-serve wash website:
Testimonials of customer experiences
Costs of services
Walk-in availability for self-serve dog washes
Information on how to reserve a spot and book an appointment
Information on cleanliness and supplies offered of self-serve dog washes
Variety in photos of dog breeds
Phase 2: Define
Persona & Story Board
After the discoveries found in the research phase, I took the ideas of wanting clear information and informational structure, testimonials of the customer experience, great with pictures to create my persona and storyboard.
Both the persona an storyboard follow the story of Danielle and her dog Toby. Creating both deliverables helped me to visualize the story of a user, and also guide me through the user flow and determine the sitemap.
The storyboard describes the thought process and actions taken to discover Spotless, reserve a spot, use the self-serve station, and then write a review for the company.
Sitemap & User Flow
After visualizing who the user was and what they want in a dog washing company, I proceeded to create a sitemap and user flow to help understand how the user would flow through the website.
The original sitemap was simple, so I did not want to add too much to make the user flow confusing. Therefore, I only added a few new pages:
I added a Gallery page, which was at the bottom of the Testimonials page before, as another way to highlight customer experiences
I added a footer to add another user path towards the business information
My original concept with the user flow was to incorporate the e-commerce store that the company had. Although it was implemented in the user flow I created, I ended up not creating pages for this flow because I wanted to focus on the main user flow of booking an appointment for grooming or a spot for a self-serve wash station at Spotless.
After defining who the user was through various deliverables of their emotions, needs and wants - I decided that I also needed to re-brand the company in order make it more modern while remaining minimalistic.
Phase 3: Design
Re-Branding
To start with the re-branding, Spotless was in need of a fresh logo and color palette, as well as a more modern design that matched their holistic wellness theme.
I created a logo with the adjectives of “organic”, “minimalistic” and “holistic”. I wanted to keep the cartoon-like dog, but add more interesting visuals
The UI Kit was an iterative process - it was created before the mockups, but was finished after they were complete. With the idea of holistic wellness and water, I kept a neutral color palette and simple icons
Lo-Fi Wireframes
At first, I tried center aligning all of the text paragraphs in my lo-fi wireframes. I found that there were too many sentences to merit center alignment and it became hard to read. In my mockups, I decided to left align the paragraphs for readability and cut out many places where there would have been long text.
I also had a challenge with my logo - since it was a horizontal image. Instead of choosing a center image, I decided to left align the logo as well so it could fit.
Mockups
The challenging part to my mockups was to think about the way the icons and images shrank to fit the screen sizes. I scaled down the images it fit the grid, but for the icons I tried to scale them down from web to tablet, but then kept them a similar size to tablet on mobile. I did not want the icons to become too small. This also was the case for paw print background on the homepage.
Above the navigation, I added in omnipresent CTAs to book because I wanted users to have many opportunities to recall where to make a reservation.
At this point, I also decided to take out the wording below “Benefits to Using Self-Serve” on the Self-Serve page because it seemed like too many words. However, in my usability test this was not the case and a few other design and information architecture changed for revisions.
Phase 4: Test
Usability Test
I conducted a usability test on the hi-fi prototype to find out the successes, joys, pain points, and frustrations of the mockup design.
The main frustrations of the test were lack of clarity of the service descriptions. I had kept the original wording from the website, however, the usability test had shed light on its problems and needed to be fixed.
Other pain points to the design were:
More prominent prices under each service
Less scrolling on service pages
Expectations of an online reservation system from the "Book Now" CTA
Main Revisions
Because Spotless does not already have the online reservation capability, I did not add this feature into the design - as it may be problematic for their current reservation system in the future. However, I took into consideration some other important insights from the usability test to enhance the design.
My revisions included:
Pricing: Making the pricing more prominent in each service page
Drop Down: Adding sub-sections of service pages into a drop down under "Services"
Self-Serve Benefits: Adding more description under "Benefits to self-serve washes"
Grooming Description: Clarifying the description of customizing the grooming experience
Phone Number: Adding the phone number for questions closer to the Grooming descriptions
Assurance Description: Adding assurance that staff is there to help
Computer
Tablet
Mobile
Takeaways
The challenge of the project was keeping the simplicity and minimalism of the website design, while adding in more UI elements and imagery to make it more engaging. From the usability testing, I learned that the information architecture and content of a site is just as important as its UI, and should not be overlooked.
I enjoyed being able to redesign a website for a company in my hometown, and a project that allowed me to endlessly browse cute dog pictures.
Interested in hearing more? See my contact information in the footer below!