Philina Fan | Product Designer
Philina Fan | Product Designer

E-Commerce Website: Progress Hardware


Re-designing Progress Hardware's Website: Bringing Community to an E-commerce Store




Progress Hardware is a neighborhood hardware store that prides itself on its core values of: 1) providing expert advice 2) hand-picking and curating selected products 3) maintaining personal touch in customer service. They want to create an e-commerce store that reflects these values, while balancing business goals with user needs.

User Research


Card sorting

  • Card sorting with five users using the top 200 items on Progress Hardware's inventory
  • Comparative and competitive analysis of e-commerce sites of other hardware stores and service-focused small businesses
  • Understanding user goals based on three given personas.


1) Differentiate Progress Hardware's website from big brands like Home Depot and Lowe's

2) Translate the "neighborhood feel" from in-store to e-commerce website

3) Incentivize customer loyalty through education

4) Navigate the e-commerce process in an intuitive manner

User Flows

I created user flows for each of the 3 persona to figure out the differences and similarities in user goals for the website. I wanted to make sure that my design solution would cater to all three diverse needs. 

Thomas's user flow helped me realize that the design needed an easy access to purchasing a gift card and the ability to search quickly. 


Andy's user flow helped design a loyal customer's check-out process.


Lisa's user flow made me work out the education and exploration portion of the website. 


System Map and Information Architecture


I created a system map to scope out the information architecture of the entire website and honed in on three big features that satisfy the users' needs.


Sketching Initial Concepts


I did quick sketches to work out the flow of the website and more importantly, to get an overview of how the website would work for each of the three personas.




Overview of wireframes in Sketch


A selection of wireframes that show key features


Next Steps


1) Develop the "My Community" flow further

2) Develop the "Classes & Workshop" flow further

3) Work out the maximum changes and workload the clients can handle

4) Improve customer loyalty incentives: saved order history