Wonder House Supply Inc.

Improving efficiency for 
a local hardware store.


Wh-cover

PROJECT OVERVIEW

Wonder House Supply Inc. is a local hardware store located in Brooklyn, NY. Currently, they have a limited digital presence and would hope to gain more in-store traction. 

ROLE

UX Designer

DURATION

5 Weeks

TOOLS

Figma

PROBLEM

Hardware store visitors want a quick and informed process for product purchases.

Wonder House Supply would need a solution that is easy to use and maintain.

GOALS

Create a simple process for browsing and locating products. 

Build a visual brand that aligns with business values.  

MY APPROACH

Adding a pick-up feature to drive consumers in store. 

Easy to browse categories and filters so that users can locate products quickly. 

EMPATHIZE

Client Interview

I began with an interview with the client to understand what they were hoping to achieve with the website and if there are any limitations. 

About Wonder House Supply:

  • They want to be able to provide a more efficienct process for customers and reduce waiting times.
  • Increase customer base and sales.
  •  Their store carries a variety of products including plumbing supplies, hardware tools, and home improvement related products. Additionally, they provide construction and repair services.
  • For their site, they would like to promote popular products, business information, and ways to contact.
EMPATHIZE

Competitive Analysis

Top and local hardware store sites were evaluated to familiarize myself with industry standards and effective/noneffective solutions. While larger hardware stores may not be direct competitors, it is important to consider common categorization methods and features for ideation.

WH-competitive-analysis
EMPATHIZE

Interviews with Potential Customers

I recruited 5 hardware store visitors to learn about their motivations and experiences with in-store and online visits. 3 were conducted via Zoom and 2 conducted in-person.

Research Goals:

  • What information would be helpful for existing customers?
  • What are hardware store visitors' process through purchasing products?
  • What are some frustrations users might have when navigating through sites with a large inventory?
EMPATHIZE

Uncovering Key Patterns

With my interviews transcribed, I organized each participants’ comments and interactions into common groupings.

wonderhouse-empathymap

5/5 prefer going to local hardware stores

All participants mentioned that they usually visit hardware stores when their is an immediate need for a certain product. They go for repairs that need to be fixed as soon as possible. 

4/5 visit hardware stores to get assistance

Participants want to be able to ask an experienced worker for suggestions on how to use certain products or if they are buying the correct one. 

3/5 do not like waiting at larger hardware stores

Participants wanted a quick and easy checkout process and did not like having to spend a lot of time waiting in lines. 

EMPATHIZE

Customer Journey Mapping

To further convey a better understanding of a potential customers thought processes, I imagined a possible scenario based on interview findings. This journey is based on findings from my interview and the customers interactions given an ideal product. 

wonderhouse-cjm
IDEATE

Brainstorming Site Features

To begin generating some viable solutions for the site, I followed the Crazy 8's method of sketching. I sketched all the possibilities of organizing products and categories with my persona in mind and selected features that seemed most fitting. 

WH-Sketches

IDEATE

Mid-Fi WireFrames

Pulling bits and pieces from my sketches, I created mid-fi wireframes to show the user's process through requesting a pick-up and locating services. I applied a consistent grid throughout the layout to organize the wide assortment of products. 

wonderhouse-mid-fi-2
IDEATE

Designing Responsive Frames

Referencing competitor sites, I built out responsive frames in an effort to maintain consistency with sizing and scaling. Since hardware store visitors are usually in a rush for time, the mobile version of the site should be optimized. 

wonderhouse-responsive-1
VISUAL DESIGN

Creating a Logo

Wonder House Supply has an exisitng type logo, but not a lot of brand design applications. In order to refine their exisiting brand, the logo was redesigned with their brand values in mind: reliable, professional, and friendly. 

Wh-Logo
VISUAL DESIGN

Developing a Style Guide

Wonder House Supply currently has a red color that is used throughout their store and would like to keep this color for their brand. More neutral colors were added to complete the palette. Type, images, and Icons were chosen to create a site that visually appears uncluttered and straightforward.

wonderhouse-Styleguide
VISUAL DESIGN

Adding Color to My Wireframes

While adding visual elements to my wireframes, I found card organization to be quite challenging. There is so much information that would be helpful to include, but ultimately, not enough space to include everything. I decided that having an indicator of product quantity would be useful for users to be aware of the store's inventory and plan accordingly. 

wh-hi-fi-responsive
TEST

Usability Testing

While creating my frames and prototyping, I decided to focus on two main tasks to be tested.

Scenario 1:
You’re at home and as you are closing your door, you realize that your doorknob is broken. You’ve had experience replacing a doorknob before and would like to find a replacement doorknob as quickly as possible.
Task: Find the doorknob and request a pick-up.

Scenario 2:
You have new tenants moving into your house and would like to make a few more copies of your keys. 
Task: Find where you can get more detailed information about copying keys.

TEST

Affinity Mapping

I grouped together similar comments from participants and decided which negative experiences would be high-priority fixes. I made these decisions based on the levels of effort required from a technical perspective and the impact it would provide users. 

wonderhouse-affinity-map

Patterns

4/5 were confused about the “Store” icon.
5/5 thought keys should be a different category.
3/5 wanted more filters for products.
3/5 wanted more information on services.

Insights

The “Store” Icon is not recognizable as cart.
Users expect “Keys” to belong in a different category as an
in-store service.
Users expected to be able to filter the type of door knobs
they would like to see.
Users would like to see more details/rates of services.

Recommendations

Change the “Store” icon to a “Cart.”
Put Keys in a different category/ on the home page.
Add more filtering options.
Add more details on the “Services” page.

ITERATE

Final Hi-Fi Wire Frames

Applying the feedback gained from usability tests, I made final changes to my wireframes and prototype. Key making services are now on the front page included with in-store deals. Services page now included more information on the services provided. 

WH-hi-fis-1
WH-hi-fis-2-1
LEARNINGS

Reflection

Aligning business & user goals
Given that Wonder House Supply is a local hardware store, it became a challenge of identifying what separated a local business vs. a larger business. There could be numerous solutions to improving time efficiency for customers and workers, but they had to be limited to what is technically feasible for a local business. It is important to identify these constraints early on in the process and work collaboratively with the client to ensure that product can actually come to fruition. 

Next Steps

If I had more time I would:

  • Conduct another round of user testing to see if my iterations have solved the initial issues.
  • Refine the services and about pages to provide more detailed information. 
  • Consider what the process would be like after a pick-up is requested and if there would additional areas of confusion. 
mug
let's chat  ฅ՞•ﻌ•՞ฅ
links 

thanks for scrolling! ‧₊˚✩彡