top of page
laptop-mockup-crest_Page_4_edited.png

Crest Hardware

Creating an e-commerce experience for a local hardware store.

Family-owned shop Crest Hardware, based in Williamsburg, Brooklyn, boasts an extensive selection of hardware and home goods, as well as a large selection of indoor and outdoor plants. Because the Covid-19 pandemic has limited in-store shopping and Crest’s website does not host online shopping, I  conducted research, analyzed trends, and built from Crest’s existing branding and web presence to design and implement a seamless e-commerce experience for users.

Case Study: Crest Hardware: Welcome

Project Background

Team

Gabby Coll, User Research & User Experience Design

Sprint

Two weeks; October 2021

Research

I developed a research plan which included user interviews, comparative and competitive analysis, feature inventory, task analysis, affinity mapping, usability testing, and card sorting which informed the design and implementation of the project’s elements.

Design

Research informed the design process to create a persona, problem statement, user flows, information architecture, sketching, wireframes, and prototyping.

Tools

Figma, Photoshop, Miro, Optimal Workshop

Case Study: Crest Hardware: List

RESEARCH: DISCOVER & EMPATHIZE

To start the research phase, I took a look at Crest’s existing website and conducted comparative and competitive analysis with competing brands. Crest’s original website is clean and, for the most part, well-organized. The site features large and colorful photos, an engaging video tour of their physical shop, and streamlined branding with their logo’s signature red. I found some redundancies in some of the content, as well as important content featured on the home page but not in the global navigation (such as the product browsing page).

Case Study: Crest Hardware: Text

First, what the existing website looks like:

Case Study: Crest Hardware: Text
Case Study: Crest Hardware: Pro Gallery

Comparative and Competitive Analysis

Based on what my user interviewees said, the direct competitors of local hardware shops are Home Depot, Amazon, and Ace Hardware. I did some research about their website features and the ease of checkout flows.

Case Study: Crest Hardware: Text
Screen Shot 2021-11-11 at 10.25.29 PM.png
Case Study: Crest Hardware: Image

Task Analysis

How many steps did it take to check out on each competitor's site?

Amazon-Logo-Transparent-PNG.png
Home-Depot-Symbol.png
ace-logo.png

14

Amazon

Happy checkout flow. Information auto-populated for existing Amazon member.

48

Home Depot

Sad checkout flow. Required the creation of an account to checkout.

28

Ace Hardware

Medium checkout flow. Some areas autofilled. Did not require account for checkout.

Case Study: Crest Hardware: Infographics

Human input: Interviews and Affinity Mapping

5 user interviews

Case Study: Crest Hardware: Text

Between the ages of 25 and 35

Frequent shoppers at local hardware stores

Apartment renters or young homeowners in mid-size urban areas

Interviewed about their hardware and online shopping habits

Case Study: Crest Hardware: List

Key interview takeaways:

  • All users shop for hardware store goods almost exclusively in person (online orders only for in-store pickup).

  • Most users prefer local hardware stores to support local businesses and because the customer service is much better.

  • Moral qualms are also a factor across the board: users don’t like supporting big box stores (Home Depot, Amazon, etc.) but will resort to them when items aren’t available at their local stores.

  • Online shopping habits vary, but universally users expect free and fast shipping and an easy checkout flow.

Case Study: Crest Hardware: Text
Affinity Mapping Trends.jpg
Case Study: Crest Hardware: Image

DEFINE: PERSONAS

With the information gathered from user interviews, I created a user persona to represent our target audience. Later, this user persona will guide the creation of user flows to represent their usage of the newly designed e-commerce experience.

Case Study: Crest Hardware: Text
Case Study: Crest Hardware: Pro Gallery

Problem & Solution Statements

Problem Statement

Crest Hardware needs an online store to increase revenue and build and maintain customer loyalty.

How Might We?

How might we create a seamless e-commerce experience for existing shoppers at Crest Hardware to shop online as well as in-person?

Solution

Using insights from user and market research, we will design and prototype a seamless and user-centered e-commerce experience for online customers of Crest Hardware.

Case Study: Crest Hardware: List

Card Sorting

KEY TAKEAWAYS: 

  • Almost everyone categorizes hardware store items differently

  • Analyzed main categories and then divided by subcategories to create e-commerce menu

10 users

Open sort

Blind tested

Case Study: Crest Hardware: List

Object sample in Optimal Workshop

Case Study: Crest Hardware: Video

IDEATE AND DESIGN

All of the information gathered from research - user behaviors, challenges, comparative and competitive analysis, card sorting, and affinity mapping - informed the ideation process to create user flows and wireframes.

Case Study: Crest Hardware: Text
Case Study: Crest Hardware: Pro Gallery

PROTOTYPE & TEST

After creating a first prototype, I conducted 3 usability tests moderated and recorded via Zoom. These were the goals while testing:

TASKS:

  • Search for and find a birdhouse product page

  • Purchase a Dewalt Circular Saw for pickup in-store

  • Enter a query in the Contact Us form on the website

TESTING GOALS:

  1. Users will be able to complete the checkout flow in under 3 minutes

  2. Users will be able to find and submit a contact form with 0 or 1 errors.

  3. Users will be able to purchase a circular saw in under 3 minutes

Case Study: Crest Hardware: Text

TESTING RESULTS

Overall flows were straightforward
The biggest challenge for users was that users didn’t click the search function for flow 2 - product discovery.

TESTING GOAL RESULTS: 

  • Average time to complete product discovery task: 57 seconds

  • Average time to complete product purchase: 2 minutes, 8 seconds

  • All users were able to submit contact forms with zero errors

  • 2/3 users were able to purchase a circular saw in under 3 minutes​

Case Study: Crest Hardware: Text
crest-computer-mockup-tall.png

Final Mid-Fidelity Prototype

Follow these three flows:

  1. Product discovery: finding a bird feeder product page 

  2. Submit a contact form

  3. Purchase a Dewalt brand circular saw 

Case Study: Crest Hardware: Image

FINAL TAKEAWAYS

Because of the limited scope of this project, I was only able to implement one round of user testing iterations. From this feedback I made these main changes to my designs:

  1. The plus and minus signs to open the collapsible sections in the checkout flow were hard to click; i made the whole area of each section clickable​

  2. The “add to cart” plus sign button popped up the checkout  flow which was confusing​

  3. Next steps: prototype and design the menu dropdown flow for the product discovery. 

Case Study: Crest Hardware: Text
bottom of page