Progress Hardware: Website Redesign

Translating in-store experiences for the web

Project synopsis

For this project, I was tasked with redesigning a website for a local hardware store in two weeks. The store in question is Progress Hardware and is located in San Francisco. The stakeholders provided a brief which specified certain requirements, goals, personas, and a list of products that would be sold.


The problem

Progress Hardware currently has an outdated website that serves little to no purpose. They want a new website that will encourage customers to go in the store, but also want to provide an e-commerce component.


The solution

The reason why Progress Hardware wants customers to go to their store boils down to the in-store experience. As a local hardware store, Progress Hardware provides intimate and personal shopping experiences as well as expert advice on projects. They are also very involved in the community and work on projects with them from time to time. These qualities contribute to their brand as a brick and mortar store, and makes them unique when compared to big-time retailers like Home Depot or Lowes. The e-commerce component was requested to provide a convenient place to shop for those who are just too busy.

My solution is to ultimately develop a website prototype that not only has an e-commerce component, but shows off the unique local/homey brand of Progress Hardware.


Research and analyses

The first thing I did was analyze the competition. I looked at 3 potential competitors: Cole Hardware, South City Lumber, and Standard 5 & 10, and compared them. I followed the brief and compared all the features/functions that Progress Hardware must have, should have, could have, and won’t have.

Competitive analysis of features from the Progress Hardware’s brief

I didn’t compare this to the original Progress Hardware website, but I should do that for future projects. Here I was able to see exactly what features that Progress Hardware needed and didn’t need (aside from those in the “must have” section). Then I did a comparative analysis for features that will help make up the experience of the site.

A quick comparative analysis on softer features. Legend on the right applies to competitive analysis as well.

Since Progress Hardware wanted their brand to show through on the website, I compared features that are directly tied to customer engagement.


Developing Information Architecture

Before jumping into sketches and mockups, I created a card sorting exercise to come up with major product categories. The goal of doing this was to see how users categorize products and how to sort them in a manner that was intuitive to them. Since customers will be the ones who interact with the website the most, it’s important to make this easy for them to use.

Adding cards to Optimal Sort
I used Optimal Sort to build an open card sort. I then asked users to perform the open card sort. Most of them complained that the card sort was extremely boring, so maybe something can be done in the future to improve upon this.

After seeing the results, I concluded that there should be 9 categories.

  1. Tools
  2. Storage Containers
  3. Home/Decor
  4. Outdoor/Garden
  5. Painting Supplies
  6. Cleaning Supplies
  7. Seasonal

Sketching by hand

Just some fast sketching to get some ideas down.

Sketching whatever came to mind

System Maps and User Flows

I stopped sketching because there was just too many screens to consider. So I created a high level system map that will give me a look at all the essential site pages as well as some user flows to narrow down exactly which screens I needed to work on. I created user flows by following the persona descriptions in the brief.

Extremely messy system map
A bunch of user flows
My final flow for the persona, Lisa

Sketching Again

Now that I had that these maps and flows I went back to sketching the site. I had some back and forth sketching here which I will explain in more details when we get to wireframes.

Obligatory cool sketch progress photo
Home page. I added a map to the footer so subtly encourage people to go to the store. I thought that making the store information easy to access can help facilitate this.
Global navigation interaction with mega menus. Better footer with map on the bottom.
Product category list
Product detail
Product detail iteration
Shopping cart
Shopping cart iteration
Checkout process
Checkout process iteration

Wireframes

I took my sketches and translated them into wireframes with the help of Sketch. I’m pretty happy with how they turned out. I went back and forth between making wireframes and sketching. I got realized I was missing some things or got new ideas so there was a lot of sketching, even at this stage.

Wireframe overview

Here are some close ups.

Home wireframe
Product list wireframe
Product detail wireframe

Prototyping

Arguably the easiest part of the entire design process so far. I used InVision and all I had to do was upload my Sketch file. Any small modifications I made to my Sketch file was reflected almost immediately on InVision in real time. This was thanks to the ability to sync the file through Dropbox. The prototype is basically my wireframes linked together. I drew clickable hotspots to make the wireframes interactive. Link to prototype: https://invis.io/RU6VQ2M8G


Usability Testing/Walkthorughs

I put this after the prototyping stage but a lot of it actually happened before the prototype was done. I gave high level explanations of some goals and walked through the site to a few of my peers. I got good feedback on things that were unclear, and went back to sketching, and then wireframing. Some of the changes happened while I was doing the walkthrough if they were small or easy enough to do. The tests I conducted after the prototype was finished was purely done on usability. I gave the high level explanation/goal again, but this time I let the user have free roam on the site and observed. One thing I noticed that was distinctly different than the walkthrough was that users had a hard time finding the product I wanted them to find. It turns out that this was due to a lack of details for the test. I was careful in my wireframes to leave out any visual design, which in turn made the site generic and stale. Adding a reasonable level of detail for the sole purpose of testing can solve this problem.


Delivery

I created a slide deck and presented my design process and prototype to the stakeholders. Since this was meant to be a status update, I also explained how the design could be improved based on feedback, and what some next steps are.


Self Reflection

My experiences while working on this project

What went well?

If I had to pick one aspect of the project that went well, I would say that I hit the mark on the goals of the business as well as its customers. I think I’m doing very well in identifying the needs of both businesses and their customers.


What didn’t go so well?

I had a terrible experience with the card sorting. None of the information was verifiable simply because the sample size was too small. However, I went with it anyway due to time constraints. I’m interested in how my IA will change if given more time and participants.

Sketch was also being buggy and undoing things I didn’t want it to undo. I reached out to them, and they said they’re working on a fix, but this definitely slowed me down during the wireframing stage.


What have I learned?

I learned lots of hard skills. These include:

  1. Card sorting
  2. Usability testing and user walkthroughs
  3. Sketch (creating wireframes)
  4. Prototyping through InVision

I also learned first hand how messy the design process can be. There were so many chicken and egg problems I couldn’t keep count! I knew I had to sketch up some pages, but I needed to have a user flow before I did that. But to know how my user flow was going to be like, I needed to sketch some pages. So even though the design process sounds linear, it most definitely was not.


Where can I improve?

At this point, I can say that I can improve at everything I did. Some noticeable areas would be to document my design inspirations as many stakeholders were curious as to where I got my ideas from.


Next steps/recommendations

If I were to continue with this project, I would…

  1. Conduct more cardsorting to get better results
  2. Fix existing IA based on card sorting results
  3. Fix existing designs based on usability testing
  4. Create wireframes and prototypes for more personas
  5. Call for another meeting with stakeholders to verify direction
Like what you read? Give Darrin Lin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.