eCommerce UX Strategy – Cat & Mouse Games

The Physical Store Location

Cat & Mouse Games™ is a family-owned, locally-operated game store in Chicago. They opened their first store in the Bucktown neighborhood back in 2008, they've since opened a store in West Loop. The owners pride themselves on carrying a wide range of game styles, for all ages and interests. They also carry puzzles and toys geared towards learning.

The Store Culture

When visiting Cat & Mouse, you get the immediate impression that the center of activity is a large wooden table where there are often a number of people sitting and playing games. The ownership sees it as mission critical, to offer this kind of atmosphere where people can try before they buy. Asking questions is rewarded with an enthusiastic and knowledgeable answer. These people love games, and they're eager to give you recommendations, to help you find the perfect game.

The store interior is trimmed with wood, and the color palette is warm. You are surrounded on all sides with shelves, stacked with a large, orderly inventory. This is like nerd heaven for the game fanatic, for those who aren't obsessed with games, it is still a compelling environment that encourages exploration.

Previous Landing Page

Looking at this page, the store's enthusiasm for games might not be immediately apparent. The store logo is especially large and forces much of the navigation and content further down the page. The largest area of screen real estate is a banner advertising an in-store Pokemon event, but unless you notice the subhead, you could think that this is simply an ad for Pokemon.

The column along the right margin lists upcoming events, the column on the left margin includes store hours, social media links and button that takes you to the store blog. These are all good things to put on a home page, but the sequence and density of options may negatively impact the click through.

One apparent difference between the store experience and this page is the lack of human representation. As you might note when reading the next section, in one form or another all of the personas indicated that assistance in making a selection is important to them. Adding some visual cues to the page could help give the user a better notion for where to click next.

Looking at the Personas

While it's important to address the individual concerns of the personas, it can be beneficial to consider everything at once. What types of solutions could solve multiple challenges? What types of concerns am I hearing again and again?

I began to compose an affinity board, trying out different groupings, to see if I could establish some broad patterns and notice common themes among the users' concerns.

One thought was that many, if not all of the customers concerns could be readily addressed with the assistance of a store associate. When people need people, nothing beats a person.

I examined the ways a user could navigate this site, with each of the three personas in mind. I thought about what these "hypothetical people" valued most in a store experience, and then tried to create the nearest equivalent in a website.

Problem Statement

The ecommerce site doesn't support or stimulate customer purchases like the store does

Design Direction

The website will build loyal customer relationships with personal service and store events

In-Store Event Emphasis

Because Cat & Mouse already hosts game play events, capturing them with photography can provide viable content for a hero image on the landing page. This informs new customers of upcoming events, and by leading-off with local content it also shifts the tone of the landing page from sales, to store culture.

Visually establishing this up-front demonstrates that customer service is central to the store's values. It gives the user the impression that there will be a knowledgeable person present, who can answer their questions should they decide to contact the store. People don't identify with interfaces, they identify with other people and imagery of this sort will likely hold the interest of a user for longer than banners with game branding alone.

User Journey - Faceted Navigation

I thought of a number of ways to organize the navigation, in the end I chose to suggest faceted navigation. The persona named Edda will need to establish where she might find a game her niece mentioned (but she couldn't remember the name). This is a way of organizing the content that permits the user to find the appropriate product quickly :

New Landing Page

As previously mentioned, the landing page needs more of a personal emphasis. See the above feature "In Store Event Emphasis" to understand why the idea of featuring in-store game play on the landing page is a good idea for Cat & Mouse. Not only does this approach address what is important to the ownership of the store, it gives the people who have demonstrated a loyalty to the store an online place to visit.

Midway down the page, below the hero image is a short introduction to current events at the store, as well as an explanation of the staff picks. The product images in this section are large and square, each spanning two columns. The section begins above the fold on a laptop, to prompt scrolling.

Product Category Page

The product pictures on the category pages are as large as they are in the staff picks section. Pictured here is the children's games section. There are eight additional product category pages, not pictured. On each page you have the option to filter the featured products by age and price range.

In the lower-right corner you'll see a chat window that permits customers to ask a question directly to store staff. This window is nested in this position and by-default open, until the user clicks the X to collapse the window. This window is always present alongside the products, creating a parallel to the usefulness of a store clerk.

That the chat window partially violates the scrolling area of the product pictures helps insure that it doesn't escape notice. Once REPLY is clicked, the text in the chat area is erased and a flashing cursor appears in the upper-left corner of the text area and the reply button changes to display SEND.

Product Depiction Page

On the product pages there is a large, four column width product image, with four thumbnails below for additional viewing angles. There is a column of text to the right of the images that describes the product in detail. There is a large Add to Cart button below the description.

Midway down the page, above the fold is the Customer Reviews section. This is where the store's most loyal customers can describe their experience with the product. It was with the persona named Dexter in mind that an emphasis on reviews is given. Remember, Dexter wanted to have better writing, more description and a place to record his experience.

Here again we also see the store chat window, nested in the lower-right corner of the screen. This affords the user a chance to ask a question that isn't satisfied by the product description or customer reviews.