PROJECT TWO — A REDESIGN OF COLE HARDWARE

Yings
Yings
Jun 3, 2016 · 6 min read

SCOPE:

We were assigned our second project at General Assembly and our goals for this project was to practice several methods: competitive analysis, informational architecture, wireframing, clickable prototyping, usability testing. In addition, we had the opportunity to practice with two programs: Sketch and InVision.

DURATION:

13 Days & 1 Presentation Day. Each day ranged from four to six hours of brainstorming and re-designing.

TOOLS:

Sketchbook, Pencil, Pens, Copic Markers, Post-Its, Whiteboard, Microsoft Excel, Sketch 3.0, and InVision.

ROLE:

Researcher & Designer

THE PROBLEM:

Cole Hardware is a local hardware store based primarily in San Francisco, CA. Currently, the store brand has six locations scattered around San Francisco including downtown San Francisco, Mission Street, Polk Street, and so forth. Founded in 1969, Dave Karp developed the motto “There are no strangers here, just friend’s we haven’t met!” and has striven to keep the motto alive.

Currently, Cole Hardware’s in store experience is wonderful, with staff catering to customers any time of the day, and as well as staff memorizing regular customers to provide a “community-based” experience. However, even though the in store experience is doing well, Cole’s website doesn’t reflect the same practices.

Cole Hardware’s website is currently very outdated and unclear, making it very inefficient for users to navigate and locate their necessary items. This problem might lead to less visits to their e-commerce stores and eventually lower sales because customers are leaving more frustrated than satisfied.

THE SOLUTION:

A serious re-design of Cole Hardware’s website is needed to address the various issues and complaints and overall create an more engaging shopping experience that is both navigable and user friendly.

FINAL PRODUCT:

https://projects.invisionapp.com/share/8M7C7CP2B

BEGINNING RESEARCH:

PAIN POINTS & USER NEEDS

The first thing I felt that was necessary was to identify the primary pain points and user needs of the website, what’s lacking and what’s needed. Through various interviews and surveys conducted on various users of the Cole Hardware’s website, I listed them in a chart below.

Primary Pain Points: Indistinct product categories, product details unclear, and lengthy checkout processes.
Primary User Needs: More delivery options, clearer layouts, customer reviews, and active customer support.

COMPARING COLE HARDWARE & HOME DEPOT

HEURISTIC EVALUATION:

An heuristic evaluation between the two stores was done comparing the following topics: Visibility of system status, Match between system and real world, User control and freedom, Consistency, Error Prevention, Recognition, Flexibility & Efficiency, Aesthetics, and How it helps an user recognize, discover, and recover. Green means good, yellow means neutral, and red means bad, these color marks were used to rate the two different websites. Statistics is listed below.

Results:

Home Depot’s website was marked with mostly green and yellow marks which meant the overall accessibility of the website was neutral to good. Now taking a look at Cole Hardware’s website, they were marked with mostly yellow to red meaning the overall accessibility could use a decent amount of improvement.

COMPETITIVE ANALYSIS:

My next step was to look at the homepages of each website specifically and doing a competitive analysis on the overall look of how a customer would view the website at a glance. I used the following topics for my homepage competitive analysis: Search Function, cart function, featured items, social links, and overall layout aesthetics. Reviews are listed below.

Results:

There was a clear difference of the homepages between each website. Major differences included were: the search function on Cole Hardware’s homepage wasn’t even a item search function — this was very misleading and this also meant that Cole Hardware didn’t have a accessible search function in the homepage. Another major problem was that the shopping cart function was completely unavailable from the homepage. Other differences can be listed in the chart below.

INFORMATIONAL ARCHITECTURE — CARD SORTING:

To go further in-depth about the website’s structure and layout, I had to disect the “department” section on the Cole Hardware’s website. The original department section had continuous repetitive categories and the layout was a mess overall. I decided to utilize informational architecture to re-organize the categories to provide a optimal way for users to locate their items on the Cole Hardware’s homepage.

Card Sorting testing

I created 7 categories but only 6 was used: Clothing, Tools & hardware, Home renovation, Lawn & garden, Electrical, and Paint.

The 3rd user card sort testing is not shown above but from the two pictured, it can be noted that categorizing certain tools ranged from being common categories to others being hard to categorize.

This process allowed me to have a better understanding of how difficult it can be to sort categories and create a efficient informational structure for an e-commerce website.

PERSONAS: Lisa, Thomas, and Andy

Personas were created to paint a story and to fully understand the user’s pains and needs.

USER FLOWS AND SITE MAPS:

My next stage in the process was to create a sitemap and user flow. This was a crucial step for me because creating sitemaps and user flows allowed me to gain a better understanding of the website structure, allows users to understand the structure, and provided a reference point for me for my wireframes.

SITE MAP

Recreated Cole Hardware’s Site Map

USER FLOW — ALL THREE PERSONAS

Whole User Flow

LISA’S SPECIFIC USER FLOW

Lisa’s specific user flow for wireframe prototype

SKETCHES AND ITERATIONS

INITIAL SKETCHES ON NOTEBOOK

Initial sketches were drawn using a combination of pencil, copic pens, and copic markers.

The homepage and product pages went through several sketched iterations before moving on to wireframe iterations.

WIREFRAME ITERATIONS

first, second, and third iterations before the final iteration

I went through several wireframe iterations after I did several user prototype testing on InVision. Each user test led me to make several changes and I eventually changed the color scheme of the overall layout.

NEXT STEPS:

Some of my next steps that I had in mind was to promote their mobile application, address other issues I didn’t address in this wireframe, and test out different add-ons and features to the website to make it more aesthetically pleasing.

Cole Hardware has a mobile application that is no where advertised on their website but it is, however, advertised in the store. There should be an option for users to find out more about the mobile app from the desktop website.

IN-DEPTH RETROSPECTING:

This project was my first attempt at wireframing and I want to say, with joy, that I really enjoyed it. My layout aesthetics still have a lot of hashing out to do and I want to really explore my creativity with wireframing. I want to do some UI and visual design as my next step to this wireframe if given the chance.

This project also helped me reinforce the tasks of user research and helped me get a general scheme of a project from start to finish. I definitely explored the user research portion of this project, which I believe is very important. I want to continue in honing my research skills in user experience design and refine my project flow for future projects.

Yings

Written by

Yings

UI/UX Product Design & Art Enthusiast. Creating lovely experiences every day. http://helloitsmeyings.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade