Resume

Happy Paws Pet Resort

UX Design

Case Study

Project Summary

Objective

Happy Paws Pet Resort started as a small business with only one grooming van, but over the last 9 years has grown to 3 pet resorts and 24 mobile pet grooming vans. When they started, the Happy Paws team made all the reservations by phone but that is no longer sustainable as their business has grown. Shekeb and Emily, the owners of Happy Paws Pet Resort, have reached out to do a partial redesign of their current website to make it more functional for their clients. 

Note: Happy Paws Pet Resort Project was a course long project for my Interaction Design, Planning, and Implementation course at ASU. All information about the owners, their story, and user research was provided as part of the prompt for this project. The goal of this project was to use the information provided to develop user personas, empathy maps, customer journey maps, information architecture and wireframes.

Role

UX Designer

Methods

  • Personas
  • Empathy Mapping
  • Customer Journey Map
  • Navigation Summary
  • Site Plan
  • Wireframes

Software

  • Balsamiq Wireframes
  • Adobe Photoshop
  • Adobe Illustrator

Deliverables

  • Personas
  • Empathy Maps
  • Customer Journey Map
  • Wireframes
  • Stakeholder Documentation
  • Developer Documentation

Outcomes

I designed 19 wireframes (mobile and desktop versions) that addressed all the additional functions the stakeholders requested and the pain points that were identified during the user research process. If implemented, the designs should decrease the stress of Happy Paws staff and improve the clients user experience when attempting to book grooming or make a reservation to board their pet. 

Empathize

What We Know About the Stakeholders

During the empathize stage of design thinking, it is important to get an understanding of your stakeholders because it helps you align with their business goals and establish a foundation for open communication for the rest of the project. For this project, we were provided with all the information about Happy Paws Pet Resort and the owners, Shekeb and Emily. In the real world, I would gather this data through stakeholder interviews and completing a stakeholder analysis.

About Happy Paws Pet Resort

Shekeb founded Happy Paws Pet Resort in 2013 when he worked as a self-employed groomer with just one mobile grooming van. A year later, Emily and Shekeb met and they decided to work on expanding Happy Paws. Currently, they own three pet resort locations and twenty-four mobile grooming vans where they care for dogs and cats. Both Shekeb and Emily are huge animal lovers and have a passion for providing excellent service and care for their clients. 

What We Know About the Users

Much like the information provided about Happy Paws Pet Resort, I also received information in the prompt about who the users of this website were. This project did not focus on performing user research but instead focused on interaction design, planning, and implementation of interaction design. I included this information under the empathize stage because in a real-world situation this data would be gathered through user surveys and interviews during user research during the empathize stage.

80%

New Customers Come from Social Media

75%

Customers are Repeat Customers

78%

Access the Website via Mobile

90%

Resort Appointments are Dogs

74%

Grooming Appointments are Dogs

Things Overheard at Happy Paws Pet Resort

"I have literally never had a doggie dad show up with their dog. Only the dog moms. "

"Do you think the Sun Devil bumper sticks on all the vans keep us from getting customers from U of A?"

"I can't believe how much money people spend on dog toys."

Personas & Empathy Maps

Using the data provided from the prompts, I curated personas and empathy maps for three potential users of the Happy Paws Pet Resort website. Personas are created to help build empathy for users and are a great tool to share with stakeholders to help keep the focus on the user. Empathy Maps are used as a visualization tool that helps to articulate what our users would say, think, do or feel as they interact with the website.

Personas

Empathy Maps

Define

Identifying the Problem

What Works on the Original Website

Happy Paws Pet Resort has the same website that it did back when it opened in 2013. Shekeb and Emily want to keep the following aspects of their current website:

  • Home page with a hero image carousel with pet photos and a section that features the three resort locations with contact information
  • Blog with twenty-five posts about pet care
  • About Us with a picture of Shekeb, Emily, and their rescue dogs along with a couple of paragraphs of copy

The stakeholders are okay with additional features being added to these pages, but they must meet the above minimum requirements.

Additional Functions Needed

Until now, Happy Paws has scheduled all grooming and resort reservations 100% by phone. The business has grown so much that it is no longer sustainable to continue to schedule only by phone because it is affecting both their clients experience and overwhelming their employees. For this reason, Shekeb and Emily are requesting to add the following features to their website:

User Accounts

  • Create an account ability when booking an appointment
  • Sign-In function to access reservation information

Grooming Appointments

  • Book grooming appointments with a calendar feature that shows availability in two hour increments Tuesday through Sunday
  • Pay for grooming appointments after selecting a date and time
  • On screen confirmation of a scheduled appointment
  • Payment types are credit card, PayPal, and Apple Pay

Resort Reservations

  • Book a time at a specific resort location in full day increments
  • Users pay a 50% deposit at scheduling
  • On screen confirmation of resort reservation and deposit paid
  • Payment types are credit card, PayPal, and Apple Pay

User Accounts

  • Create an account ability when booking an appointment
  • Sign-In function to access reservation information

Grooming Appointments

  • Book grooming appointments with a calendar feature that shows availability in two hour increments Tuesday through Sunday
  • Pay for grooming appointments after selecting a date and time
  • On screen confirmation of a scheduled appointment
  • Payment types are credit card, PayPal, and Apple Pay

Resort Reservations

  • Book a time at a specific resort location in full day increments
  • Users pay a 50% deposit at scheduling
  • On screen confirmation of resort reservation and deposit paid
  • Payment types are credit card, PayPal, and Apple Pay

Customer Journey Map

During the define stage, I further synthesized the user research data obtained during the empathize stage and the wants and needs of our stakeholders to create a customer journey map for one of the personas. I utilized the data to assist in pinpointing some of the pain points users would have when navigating the Happy Paws Pet Resort website and the how the solutions and added functionalities would assist in relieving pain points.

Ideation

Planning the Structure

The main focus of this course and project was to understand and develop the information architecture of a website to ensure that users were able to easily navigate through the Happy Paws Pet Resort website. During the ideate stage, I used the requirements provided for the project to develop a navigation summary and site plan that I could use to help me create the wireframe prototypes.

Navigation Summary

For this project, I created a navigation summary before I developed the site plan. Doing this allowed me to decide which pages needed to be included on the website and begin organizing them. During this stage of the project, there were multiple things that I tried to consider when deciding what was imperative to the navigation:

  • Where do users expect to see an “account login”?
  • Will users prefer a deep navigation where the secondary menu is long, or a wide navigation with more navigation options at the top of the screen?
  • Are all the pages required for this redesign included in the navigation summary?
  • Do I need to include a search functionality for this website?

Overall, there were many things that I tried to consider as I developed this navigation summary. Deciding what to include on a website and what deserves its own page can be difficult, especially when creating deep interactions such as scheduling appointments.

Site Plan

After I had a clear understanding of what pages I needed to include on the website, I designed a site plan to visualize the hierarchy and relationships between the various pages. The main navigation featured the pages for the traditional navigation menu that would allow users to navigate through the website. I did not include the footer in the site plan because the pages were the same. The secondary navigation site plan is in the upper right corner and features the cart, my account, and social media icons. I chose to remove this from the primary navigation because upon looking at other websites for inspiration it became clear that most users would expect to see this separate from the rest of the navigation.

Prototype

For the prototype stage of the Happy Paws Pet Resort project, I designed medium-fidelity wireframes for most of the pages included in the site plan for both mobile and desktop. For this project, I used Balsamiq to help me design the wireframes. Below are the wireframes for the three main features that the stakeholders had requested be added to the website.

User Accounts

The first feature the stakeholders had requested to add to the website was the ability for users to log in to an account to view their reservations. On the account page, users can add or remove pets from their accounts and change or cancel appointments. Adding the ability to see appointments and make changes will help reduce the call volume that is coming into locations giving the workers improved efficiency.

Mobile

Desktop

Reserving Boarding

The second feature that the stakeholders had requested to add to the Happy Paws Pet Resort website was the ability for users to reserve boarding online. For reserving boarding, it was not necessary to include a calendar for availability. The only requirement was that users would be able to select a location and the dates of their pets stay.

Mobile

Desktop

Mobile

Desktop

Booking Grooming

The third feature was the ability for users to book grooming appointments. It was not necessary to allow the user to select a specific grooming van, but they did want users to be able to see appointment availability on a calendar. I choose to list out the available appointment times with the intention the user would click that specific time to book it.

Mobile

Desktop

Mobile

Desktop

Checkout Process

The final feature that the stakeholders requested was the ability for users to checkout and make payments for their scheduled appointments. In addition, they wanted the screen to confirm the reserved appointment. At the beginning of this process, the user is asked to sign-in or create an account. Below you will see the process to create an account during the checkout process.

Mobile

Desktop

Insights

Outcomes

This project focused on using a design brief provided by stakeholders to develop empathy and understanding for both the users and stakeholders. Utilizing that understanding, I developed personas, empathy maps, and a customer journey map to help visualize and synthesize the data. The design brief provided detailed information on the page requirements and features that were needing to be added to the website and using that information I created a navigation summary and site plan to build the foundation of the website. Once the foundation was developed, I began creating the wireframes that would be presented to the stakeholders.

 

Even though this was a course project, it was focused on the details. It was imperative that I thoroughly read and understand what the stakeholders expected in this redesign. In the real world, details matter. Although there was no direct communication with real stakeholders, I still gained an understanding of the amount of detail I needed to get from a stakeholder to be able to successfully design a website.

Next Steps

At the end of this project, I developed stakeholder and developer documentation. If this were a live project, it is possible it could have gone into development. However, I think that it would have been preferable to do a usability test on the wireframes created. For a usability test for these wireframes, I would focus on the features that were added and create scenarios based on these. Using the scenarios, I could help identify the pain points users are having before it went into development. In design thinking, it is important to iterate your designs. The idea of stopping after just making the wireframes and not iterating may be necessary in some instances, but iteration would ensure a more user-centered product was developed in the long run.