Overview
Project
Designing a booking feature. Pup & Kit is a mobile pet groomer in Charlotte, NC and wants to build their cliental. They are ready to streamline their process and create a better experience for new and current customers.
Role
UX Researcher, UX/UI Designer
Timeline
2019 (80 hrs)
Tools
Pencil & paper, Sketch, and InVision
Challenge
Create a booking feature that meets all of the groomer’s and user’s needs Most importantly, make sure pet owners feel safe and secure when selecting a groomer.
Goal
Design a responsive website that allows user to book and pay for grooming services.
The Process
Research
Secondary Research
1:1 Interviews
Persona
Strategy
User Flow
Wireframes
User Interface Design
Branding
UI Kit
Mockups
Iteration & Implementation
Prototype
Usability Testing
Affinity Map
Research
I always like to begin my research with a competitive analysis to better understand the market and where the brand can improve. Being that Pup&Kit is a mobile groomer I struggled to find other mobile groomers that offered online booking so I added on-site groomers that offered this feature. Though mobile grooming may have its own set of insights my main focus is the booking feature .
Following competitive analysis, I conducted 1:1 interviews with pet parents that use a grooming services, to better understand their needs and pain points when booking appointments. The biggest drivers were convenience, trust and quality styling. To my surprise, almost all participants spoke about their struggle in finding a groomer they can trust.
“I took Roscoe to about 4 groomers before I found the right one.”
- Jennifer H.
Need
Offer images and reviews on groomer’s past work.
Easy visual way of showing style/cut desired.
Able to schedule an appointment in advance.
Ability to create an account and save all pet’s information.
Access to pet’s grooming history and information.
Pain Point
Having to schedule same day.
Not being able to see groomer’s work in advance.
Difficulty in explaining cut/style desired.
Paying only in cash.
With all of the research findings it was clear that the booking process focused on what the groomer needed, not the customer. Pup&Kit’s customers consider their pets family and want to feel that they are being put first. All of these findings lead me to the persona of Alyson Isaac.
Strategy
Throughout my interviews I learned that pet parents struggled finding the right groomer for them, so I wanted to make sure that this pain point was resolved through the booking process. Alyson loves social media and this gave me the idea to create a profile for each groomer so they can give customers some information on themselves, their past experience and a gallery of past work.
Another big factor was figuring out how to break out the booking process so that Alyson would not feel overwhelmed. After writing out all the information needed for the groomer I broke them out into categories. I also gave the Alyson the option to create an account, which would have the majority of their information saved for future bookings Once I had my final categories decided I began working on my user flows.
For the user flow below, Alyson is looking for a groomer for Max’s first appointment.
After completing my user flows I began by sketching out a few different layouts. Though this is a responsive website majority of users would be booking on their phone so for testing I focused on mobile screen size.
For their homepage I decided on showcasing booking, groomers & services on the homepage. All of these pages hold a lot of information so I decided on a very simple & clean layout. Having the booking portion already broken up into categories made the sketching portion pretty easy for me, but once I began wireframing I had to try different variations of font size and padding so that each category did not feel too packed or overwhelming for the user.
User Interface Design
For the branding of Pup& Kit, I looked for inspiration that would express Alyson’s bubbly and fun personality. Between all the content for groomers and booking feature, a pop of color brought the brand to life while maintaining a clean and simplistic design. Below are some images of inspiration and the UI kit.
After adding all of the UI components to the wireframes I made slight iterations to the booking process in terms of padding and font size. Legibility and clear direction is extremely important for this feature.
Iteration & Implementation
After completing my mockups, it was time to do some usability testing to see what users responses to the feature would be. All participants were pet parents and had a groomer. To make sure I was not too focused on note taking during testing, I recorded each testing session. This allowed for me to look back and take detailed notes of each session. View prototype here.
My testing objectives were to:
Test how user navigates to groomers and booking page.
Test if design is easy and clear to navigate.
Observe if there are any moments of confusion through the booking process.
All participants in the end completed all tasks and I received great feedback. To better review my findings I added them to an affinity map. The next steps would be to iterate on the designs based on the first round of feedback and continue to test.
Takeaways
Being a pet parent myself I really enjoyed doing this project. I always find research important and sometimes it confirms what we already know. In this instance I was surprised with an unexpected pain point in my interviews that had a huge role in this project - focusing more on the groomers themselves.
Finding the right flow for the booking form was challenging at times but in the end I was able to meet the users needs while keeping the form as short as possible. If I were to continue on this project I would conducting more testing with groomers themselves to make sure their needs are also being met.