The Gargoyle Store

E-commerce website redesign

Solo project, 2 weeks

Methods

User research

• Affinity mapping
• Persona development
• Problem statement
• User flow

Competitive & comparative analysis

• Feature inventory
• Task analysis

Information architecture

• Card sorting
• Site mapping

Wireframing

• Low-fidelity
• Mid-fidelity

Prototyping

• Low-fidelity
• Mid-fidelity

Usability testing

Tools

Figma

Miro

Company

Founded in 1995, The Gargoyle Store is a gargoyle statue and oddities shop based near historic downtown Campbell, CA.

Home page for The Gargoyle Store. The original site was launched in 1996.

Problem

The Gargoyle Store is almost exclusively an online retailer, with their brick and mortar location functioning as an office and studio space rather than a storefront. However, most of their users prefer to shop in person, so they feel some discomfort in buying these products online.

Solution

Create a familiar online shopping experience for the user so that they will feel comfortable enough to make a purchase.

User Research

I recruited users from The Gargoyle Store’s Facebook page to interview and test the current website with the objective of learning what information they need before they buy and where they expect to find it.

Users reported that they prefer to shop in person rather than online for two main reasons:

1. They feel more confident that they are purchasing a quality product from a reliable retailer if they can see it in person
2. They enjoy the experience of stumbling upon an item they didn’t know they wanted

This presented my first design challenge:

How might we bring the “treasure hunt” experience of shopping in person to an online store?

When asked to find a specific product and continue through the checkout process, all of the users were able to complete the task, but experienced some confusion along the way.

A summary of first round usability findings on the current site.

It was not always clear to users what they would find on a particular page, which was fun for some users, but frustrating for others. Because of this, I modified my original “how might we…” statement:

How might we bring the “treasure hunt” experience of shopping in person to an online store while still letting users know what to expect?

Although every user successfully completed the given task, 5/6 users encountered a situation where they either couldn’t find their cart or get back to the home page. This was universally frustrating and even instilled a sense of distrust in the company, with one user stating, “I’d be a little worried that this wasn’t a real store.”

Competitive & Comparative Analysis

Based on user research findings, I conducted a competitive & comparative analysis of similar retailers to find out which design patterns make users feel most comfortable.

The most compelling of these competitors was Etsy, which was familiar to each of the users I interviewed. When given the same task for finding a specific product and going through the checkout process, the features that users found most valuable were:

1. Image carousels with multiple product angles
2. The “highlights” section of the product description
3. Ratings & reviews
4. The “message” feature to contact the seller

All of these features made users feel more confident in assessing the quality of the product.

One of the biggest challenges I encountered was whether to include a search bar in my final design. When asked to find a specific product on Etsy, 4/6 users clicked the search bar first, while the other two users used one of the site’s primary navigation options.

However, based on the user research, it’s less likely that a user would be searching for a specific product and more likely that they would browse the site until they discovered an interesting product. As a result, I decided that a search bar would not significantly improve the user’s experience.

Information Architecture

The decision to exclude a search bar from the redesigned site was validated by a cart sort exercise in which users were asked to sort products into categories however they saw fit and to name those categories. There was little consistency across users in how the products were sorted, meaning that users would likely search for different key phrases to find a specific products. This makes coding a search bar difficult for developers, so I denoted the search bar as a “nice to have” feature. Instead, I focused redesigning the site’s information architecture.

The strongest trend that emerged from the card sort exercise was sorting statues by type of creature: gargoyle, dragon, or griffin.

Next, users sorted products according to function, such as hanging shelves and candle holders. This meant that my design would need to allow the store to give products multiple tags (e.g. “gargoyle” and “hanging”) in order to be effective.

Finally, every user created some version of a “miscellaneous” category for products that were unfamiliar or niche.

A summary of card sort results showing a strong trend for “other” categories.

Once I had synthesized my research findings, I set 3 main objectives for the design phase:

1. Follow conventions set by best-in-class competitors like Etsy to align with user’s expectations
2. Allow for multiple ways to find specific products
3. Give users the opportunity to explore and discover products

Sketching & Wireframing

I started by sketching multiple versions of the home, product grid, product details, and cart pages that incorporated the features identified as most helpful during initial usability testing.

Examples of home page sketches.

I asked users to vote on which sketches they found most visually appealing, then created low and medium fidelity wireframes of the winners using Figma.

Row 1: Sketches ; Row 2: Low-fidelity wireframes ; Row 3: Medium fidelity wireframes

Prototyping & Usability Testing

Once the medium fidelity wireframes had been created, I created interactions between the pages to build a clickable prototype, which revealed issues with spacing, sizing, and navigation. For example, users had difficulty finding the options for browsing related products and reading reviews because they were placed too far down on the product details page.

Summary of medium fidelity prototype usability test findings.

Users suggested adding 2 new features to contribute to the “treasure hunt” experience of browsing for products:

1. A featured products slider on the home page to allow users to randomly browse products
2. A “view all” option to show users what is available from the store before browsing major categories

I learned that users found placeholder images in medium fidelity distracting, so I reduced the level of detail in the next iteration of medium fidelity wireframes. This way, I could test where users expect to click without any extraneous information.

Medium fidelity wireframes (2nd iteration)

Next Steps

1. Bring medium fidelity wireframes into high fidelity
2. Create a high-fidelity interactive (clickable) prototype
3. Test for usability and reiterate
4. Test for accessibility
5. Make site responsive on mobile and tablet