Desktop HD Copy 35.png

Progress Hardware.

Redesign of Progress Hardware E-commerce website - not your average mom-and-pop.



Progress Hardware's website is old and antiqued. It needs a redesign to satisfy customers' increasing need for shopping online.

Progress Hardware is a local mom-and-pop hardware store in San Francisco. Because more customers prefer to purchase online, Progress Hardware needs to upgrade its website. The main challenge is to update while maintaining the local and personal profile of the brand.

Solo Project . Duration | 1 week 


Current website is outdated:



Large stores' websites are cold and impersonal, while local stores' sites lack modern designs. There are potentials in both. 

To understand the competitors, I looked at sites of large hardware stores, like Home Depot and Ace, as well local stores similar to Progress Hardware. While large stores have clean and modern sites, they do not feel personal or warm. For Progress Hardware's site to stand out, it's important to have easy to navigate design yet still have the warmth. 



After interviewing 4 people about their e-commerce shopping experience, I gained some insights: 

  • Users usually have a product in mind when they shop online.
  • Search Bar is frequently used.
  • Sales is only relevant when it’s close to what they are looking for.
  • Reviews are very important.
  • Amazon is favored by many.


Effective product categorization is crucial for e-commerce website. Cardsorting helped inform the categories. 

Cardsorting was used to organize the long list of products. After I wrote down all the products on post-it, I watched 3 people separately arranging the products into different categories. 




Focus on the community aspect to build store loyalty and to distinguish itself from competitors. 

Since Progress Hardware is primarily known as a local neighbored store, I decided to focus on bringing the warm and personal store profile to the website. Instead of only selling products, the redesign adds extra community-building features, such as the DIY project section. 

Users can:



Problems of the 1st version of wireframe reminded me how important yet difficulty it is to be truly empathetic with users. 

The most surprising comment I got for the 1st version was about using "heart" to save. I thought it was a common feature that is suitable for any e-commerce website. However, it was pointed out that my users are mostly tough hardware guys who are unlikely to click on the little heart. Then I realized that I based too much of my design decisions on my own preferences rather than the users'.



After a few more rounds of usability testings, the design is improved to be more efficient, seamless and suitable for the targeted users. 


DIY Projects section builds a community among customers. 

As a mom-and-pop shop, Progress Hardware has a community of loyal and passionate customers. DIY Projects page brings this community element to the digital world. It allows users to share photos and videos of their own projects. Other customers can learn from them and purchase all the necessary materials on the same page. This features invites customers to come back often and builds brand loyalty.


Orange color palette to reinforce the personal and warm feeling.



There is no such things as "one size fits all" in UX design. Every design decision should be tailored for the specific project. 

The biggest lesson I learned was how different users' reactions can be even on a small detail. I thought using a "heart" to save a product is widely accepted. However, because a lot of the users are hardware guys, they are unlikely to save the products with a delicate heart. I need to constantly remind myself to always think and design from the targeted users' point of view.


More works