The Spaw Website Redesign
The Spaw is a small business located in Tustin, California that serves the greater Orange County community by providing various pet-related services, including grooming, pet-sitting, boarding, and more.
Project Summary
This project was taken up by myself and 5 fellow classmates for the college course 'Project in Human-Computer Interactions,' where the goal of the class was to learn and apply various methods for user research, user interface design and evaluation, and experimental design. Specifically, we were asked to select a business or organization where, after an analysis of the UX of their website, we would provide a redesign in order to improve the usability and make it more visually modernized.
At the time of redesign assessment, The Spaw's website featured information on their various services, an online store, and a blog with posts regarding pet health and nutrition.
Responsibilities
Competitive Analysis
User Research
Usability Tests
Cognitive Walkthrough
Sketching
Wireframing
High-Fidelity Mockups
Heuristic Evaluation
Competitive Analysis
Our group began the process with a competitive analysis of local competitors to The Spaw and their website. The two direct competitors being 'The Bone Adventure' and 'Paw Sweet Paw', and the indirect ones being 'OC Waggin’ Wheels' and 'At a Tail’s Pace', all of which are also businesses local to Orange County.
The Bone Adventure
Direct Competitor
Looking at The Bone Adventure as a direct competitor, we wanted to emphasize The Spaw's inclusion of services for both cats and dogs to help it stand out, since The Bone Adventure catered almost exclusively to dogs. Both businesses had comparable prices and were rated favorably on Yelp, though The Bone Adventure primarily offered boarding + pet playtime services and not grooming.
OC Waggin' Wheels
Indirect Competitor
Like The Spaw, OC Waggin' Wheels provides spa options and grooming packages, and requires that you call the location in order to book an appointment. However, they distinguish themselves from the previously aforementioned businesses by being a mobile business - grooming pets in places where they are more comfortable vs an unfamiliar environment where other pets may be staying.
Paw Sweet Paw
Direct Competitor
Paw Sweet Paw, also located in Orange County, similarly provides grooming and daycare services. Unlike The Spaw, they lack an e-commerce section of the website, do not serve cats, and are not highly rated, but what they lack in these areas they make up for with a well-designed online reservation system for booking appointments, something The Spaw does not offer.
At A Tail's Pace
Indirect Competitor
At A Tail's Pace addresses the need for a pet to be watched and cared for during a temporary period, just as The Spaw does, though theirs is notably differentiated by their shorter-term solutions to pet-care including taking pets for walks or spending an afternoon with them at their home. There business is more niche than The Spaw's, who offer numerous services plus an online store. Nonetheless, both places markedly lack a call-to-action, a running theme at several of the business's websites.
Affinity Diagramming
Our process for the affinity diagramming began with each group member taking key notes and observations from our own interview logs and notes, taking these and writing them on sticky notes. We then iteratively organized the notes into groups based on adjacent sentiments, slowly working out outliers and moving up the level of abstraction to form the ultimate level of our affinity diagram.
Personas
Both the data from the interviews and the surveys provided context for the creation of the user personas. Three were created with the goal of capturing the widely varying needs and demographics we would expect to potentially be clients at The Spaw.
Findings
After reviewing the data collected from the surveys, we analyzed the information and used this to eventually develop the user personas. The main pieces of data we wanted to gather were demographics of participants to account for bias, the relationships people have with their pet and how this affects the types of services they seek out and the purchases they make, the opinions they have on grooming & boarding services, and how people establish trust with a store or service.
In conclusion, though most of the participants were college students or young professionals and could not account for other vital demographics that may visit The Spaw, we found that the additional data from the surveys was useful in helping us to answer certain questions that remained about pet owners and the decisions they make for their pets.
User Research
Objectives
Our main study objectives that we decided on were:
To understand what people do to spend time with their pet & how they care for them
Understand why people seek or don’t seek dog grooming or daycare/boarding services
Understand how people learn about a business and how they can establish a sense of trust
Methods
We conducted the user research utilizing convenience sampling due to the constraints we had as college students, therefore limiting our sample population to peers, class and community members, and people reached out to via social media. Both interviews and surveys were used as our primary forms of research.
The target population was created based on the types of people we assumed would visit The Spaw - those who:
Own a pet,
Are local and/or residents of Orange County,
Are 18 years of age or older,
Have some recurring income, and
Have access to the Internet.
Testing for Usability
Usability Tests
We conducted a total of 6 usability tests that people could participate in to imitate a potential user of The Spaw's website. For each usability test, a participant would be required to perform each of the following four tasks:
Determine how much it would cost to board two dogs
Book an appointment with The Spaw
Find a flea product to address your dog's flea problem
Shop for dog food and treats with a dietary restriction
Our objective with each of these four tasks was to ensure that they were representative of the main types of goals a potential customer of The Spaw might have, including grooming, boarding, and purchasing food and/or nutritional supplements from the online store.
Cognitive Walkthrough
The cognitive walkthrough was performed similarly to the usability tests, with the the tasks including:
Determine price quote to board 2 small dogs for 8 days
Shop for dog food and treats with dietary restrictions
Determine price quote for a haircut with a flea package upgrade
Each of these tasks was broken down into small subtasks (i.e. "click <x>," "select <y>"), for each of which we would answer 5 yes/no questions regarding whether any given task would be objectively straightforward for a user to complete.
Findings
After performing the tests, the group spent time doing analysis on the data in order to identify the various problems that affected users. If more than one user had trouble on a particular task or sub-task, the problem would be framed in terms of the way the design element was confusing or troublesome for the user in some way. After making a list of the various common problem points, a list of common themes was highlighted, leading to the discernment of 5 main usability issues for The Spaw.
Fails to Speak the User’s Language
The user experience of ahhthespaw.com is inhibited by the use of jargon and system-specific language.
Unintuitive Top-level Navigation Titles
In order for top-level navigation to actually be useful, users shouldn’t have to individually click into each tab to understand the contents.
Information Overload
Users are overwhelmed with an abundance of information without any means to process them.
User is not in Control of Shopping Experience
Purchasing products on the online store was a source of much frustration across our usability participants, specifically, because the website did not support any way to filter, sort, or search for specific product types on the products page.
Relevant Information is Not Discoverable
The user is forced to do deep searches for information needed to complete tasks, or even make assumptions when information is unavailable or vague.
Redesign
Process
The process of redesign began first with a group sketching session, and ultimately included both development of wireframes and high-fidelity mockups, using the identified usability issues as the redesign targets.
Sketching
Creating sketches individually and sharing them as a group was the first step in our redesign. Problem points on the website as well as potential not-yet-existing features were the focus of our sketches.
Wireframes
Upon coming to an agreement about the features that needed changes as well as what new features would be added to The Spaw's website, wireframe development began.
High-Fidelity Mockups
Finally, we pushed our redesign to the final phase, developing high-fidelity mockups in Figma with the goal of creating a realistic website that rivaled those of local businesses and created an appealing online spot for customers to shop and seek out service from.
Heuristic Evaluation
Our final step in the project was to evaluate our redesign work via Nielsen's 10 Usability Heuristics, which we did first on an individual basis before convening to discuss and combine our findings. The following section indicates our discoveries and how well we found that our redesign met established usability guidelines.
Visibility of System Status
Our team concluded that our redesign was successful in meeting this heuristic. Specifically, with the addition of the calculator feature, users now had an interactive way to determine the price of a trip to The Spaw, whether for boarding or grooming, which added an element of system status that previously did not exist at all on these pages since they were a static brochure format. Moreover, the shop now provides users with a visible way to see when products are out of stock as the scroll through products without them having to take the extra steps of clicking on each individual item.
Match Between System & Real World
We determined that our redesign was successful within this design heuristic, in two different ways. The change to information presentation on the grooming page, for instance, was altered to include photos of dogs to help fill in the gaps of what The Spaw's terminology for various dog breed/sizes were. Additionally, with the merging of the four original separate e-commerce sections into one combined "Shop" page, allowing users to more intuitively navigate the website and discover products with the goal of making a purchase.
User Control and Freedom
Our group concluded that the choices to include search and filter functionalities in the shop as well as the new calculator led to the redesign appropriately fulfilling the heuristic. Giving users a much stronger sense of control over their shopping experience by providing them with the tools to filter out items they weren't looking for as well as use the search to narrow down to exactly what they wanted illustrates the way in which the redesign provides a much better sense of freedom than previously.
Consistency and Standards
Including the "Book Now" button was a way of implementing what most websites tend to feature in some form - a call-to-action for users to interact with the website or business. Secondly, the new e-commerce section of The Spaw was designed to match the layout and feel of the shopping experiences of websites such as Petsmart.com and Amazon.com in order to match users' expectations of what they normally interact with when online shopping.
Error Prevention
As a group we felt that our redesign mostly met this heuristic via the calculator and out-of-stock feature on the shop page. The calculator feature is not flawless - constraints within certain categories could exist that could create a conflict in the calculator, in which case there is no warning in place to handle this problem, illustrating how this heuristic is only partially met by this feature. On the other hand, the addition of the out-of-stock notices as well as the ability to pre-order these products doubly prevents users from having the expectation that they will be able to purchase an item that is not currently in stock.
Recognition Rather than Recall
This heuristic was concluded to be successfully met through the use of images to complement dog descriptions, more visually engaging headers, and indications for out-of-stock items.
Flexibility and Efficiency of Use
We concluded that the redesign mostly satisfied this heuristic via the search and filter features in the shop as well as the "Book Now" button in the top right corner. We believed it failed slightly in the sense that it did not allow for returning users to save frequent inputs within the calculator, for instance. However, the search and filter function could be said to greatly improve how quickly and efficiently users are able to look up and consider purchasing a given product.
Aesthetic and Minimalist Design
This heuristic was determined to be mostly fulfilled by the redesign: the simple purple of the "Book Now" button was to draw users' attention to this call-to-action and engage them with the interactive portions of the website, and the whole of the navigation bar was redesigned in response to users finding the original difficult unintuitive. Some areas of the website, on the other hand, remained a bit difficult to redesign, since the grooming page, for instance, contained significant portions of information and proved challenging to organize without it ultimately looking cluttered with the white space we used on the rest of the site.
Help Users Recognize, Diagnose, and Recover from Errors
We concluded that our redesign successfully satisfied this heuristic, specifically within the shop's new pre-ordering functionality. Utilizing terms such as 'pre-order' rather than 'add to cart' for out of stock products helps users recognize the error (not being able to add an item to the cart), diagnose the error (the item they want is out of stock), and recover (they are able to pre-order instead).
Help and Documentation
We ultimately decided that the redesign only slightly fulfilled this heuristic via the addition of the question-and-answer descriptions at the top of the grooming/boarding service pages. We later determined that it would have been beneficial to include a FAQ section in case users had questions regarding various aspects of the website, shop, or physical business location.