Duration & Project Type: 2 weeks working individually, student project

Tools:  Invision, Sketch, Optimal Sort, Pen, Paper, Markers



Progress Hardware wishes to grow its business online while maintaining its brand as the biggest little retail store.


To accommodate with growing demands for online shopping, Progress Hardware wants to create an E-commerce website. Creating an E-commerce site would help Progress Hardware generate revenue while promoting its brand and business on the internet.



Figuring out how to design an eCommerce website that will optimize best web practices and allow customers to efficiently navigate through the site while reflecting Progress Hardware’s values.


Progress Hardware is establishing an online presence to remain competitive with the growing trends in online shopping. Progress Hardware wants to encourage customers to go into its physical store but it also understands that some shoppers only shop online. 

Requirements for eCommerce Site:

  1. Clear Way of Locating Specific Products
  2. An Efficient Method to Purchase One or More Products
  3. Direct Customers Towards Popular Products
  4. Allow Customers to Contact the Business
  5. Promote Loyalty Program
  6. Emphasize Community Involvement
  7. Prioritizing Face-to-Face Contact



Conducting Competitive and Comparative Analysis


Ace Hardware   Shop for Hardware  Home Improvement  and Tools. Buy Online   Pickup Today..png

Key Findings from Competitive Analysis

Community Involvement

The most prominent picture on Cole Hardware’s website was an advertisement for a community event.

Option to Contact the Store

By featuring this option on the homepage, it shows shoppers that the businesses are very customer-oriented.

Product Details, Reviews and Specifications

By analyzing Home Depot, Ace Hardware and True Value, I found that these websites provided customers with more product details than the local competitors. Both websites provided shoppers with product reviews and product specifications which would aid shoppers in picking a product. 

Rewards Program

The national stores established rewards programs, which is a way for businesses to show its appreciation for its customers.


Key Findings from Comparative Analysis

Favoriting Items

This allows the customers to easily save an item for later purchasing or to easily compare items. 

Frequently Bought with This Item

Customers will be reminded of complimentary items and this could encourage additional purchasing.

New Items

Frequent visitors can quickly see what the new items are without having to browse through the entire website.

Buy It Again

Being able to easily locate a frequently purchased item will streamline the checkout process.

Product 2 Presentations   Google Drive.png

Using Card Sorting to Build the Navigation

Progress Hardware provided me of an extensive list of products to be included on the website. Since everyone has a different mental model, people sort items differently. To sort the products into distinct categories and to make the site navigable to its users, I conducted a card sort. By utilizing a program called Optimal Sort, I had users sort the items provided my Progress Hardware into different categories. After the users sorted the items, I analyzed the data for common trends and was able to sort the products into distinct categories to include on the website.


Designing with the User in Mind

To build a product for the customers, it is essential that I understand their motivations and pain points. Progress Hardware provided me with several personas to incorporate into my design. The three personas describe the different types of shoppers: the occasional browser, the one-time shopper and the frequent shopper.

Lisa is the occasional browser. She is an DIY enthusiast who loves the convenience of online shopping. She wants to have access to a quick range of options and to know what is new on repeat visits. She also wants support when she has questions.

Thomas is shopping for his brother's birthday present. He does not know much about hardware and needs to be able to navigate through the website. He needs suggestions, reviews and support to help him pick out a present.

Andy is a tradesman who often has products shipped to his site. He would benefit from an efficient checkout process and a loyalty rewards program.

THOMAS 1 -2-17.png




Understanding the User's Journey

To understand a user and how different users would navigate through a site based on their objectives, I created user flows for the three personas provided by Progress Hardware. By understanding what task a user is trying to accomplish, I was able to figure out the various paths a user can take to accomplish their end goal. By understanding user paths, I can anticipate how to make their journey smooth and efficient.

Andy is our primary persona due to his frequency on the website. His journey is outlined on the left.


Conducting Usability Testing to See How People Interact with the Product

After extensive research, I had to figure out how to design my product with the user and business in mind. I began with paper prototyping to get my ideas out. Paper prototyping is a cost-efficient and quick method of getting ideas out. After sketching my designs, I tested the product on users to receive feedback which I used to reiterate my original designs. After rounds of usability testing on the paper prototypes, I created interactive prototypes on Invision. I conducted two rounds with four people for the usability testing.

Progress Hardware Paper Prototypes.png

             Paper Prototypes and Wireframes


Design Solution

  1. In-store Only Specials on Home Page 
  2. Community Involvement
  3. Search Items by Brand
  4. View Popular Items
  5. New Items on Navigation Bar
  6. Ask an Expert
  7. About Us Page to Learn about Progress Hardware
  8. Gift Card Purchase

To entice customers into going into the store, the in-store specials is prominent on the home page. Progress Hardware also wants its customers to be aware of its community involvement, which is an essential component of its brand. The navigation bar allows customers (such as Lisa and Andy) to search by brand. Some shoppers want to be reassured by the brand name when shopping. Customers (such as Thomas) who are not as familiar with hardware are able to search for items by popularity. Customers (such as Lisa) can also see what is new on repeat visits. This helps customers save time by allowing them to instantly see the new items. Customers who have questions can ask an expert. This allows Progress Hardware to show its commitment to its customer service. In addition, customers who have questions about DIY (such as Lisa) or about gift ideas (such as Thomas) can ask for assistance. The About Us page is an opportunity for Progress Hardware to emphasize its brand and help customers feel connected to the store. There is also an option to purchase a gift card on the website. This allows customers (such as Thomas) to easily purchase gifts.

  1. Product Specification, Reviews and Q&A
  2. Favoriting Items and Purchase it Again
  3. Frequently Bought with This Item

Lisa and Andy can use the product specifications to identify the right products for their projects. Shoppers are also able to read reviews on products to help them compare products. Through usability testing, I found that users often relied on reviews to facilitate their purchases. In addition, shoppers are able to read about common questions and answers about products. Favoriting an item allows a customer (such as Andy) buy an item again. This streamlines the checkout process since the shopper doesn't have to search for the product again. Displaying products that are frequently bought with an item can remind shoppers of items they may also need. For example, Lisa is purchasing paint but she may also need to purchase a paint brush.


Key Insights and Iterations from Usability Testing

Adding Filters for Efficient Navigation

One of the key learnings from conducting usability tests was that users were still overwhelmed by the number of products even after I sorted items based on the card sorting results. To help shoppers navigate through the site and find their product, I reiterated my design to include filters and a method for sorting items by rating and price.





Majority of Shoppers Checkout as Guests Instead of Creating an Account

After a shopper proceeds to checkout, they are given the option to sign out as guest or sign up for the loyalty program. Through usability testing, I found that the majority of shoppers chose to proceed as a guest. The main reason the shoppers did not want to sign up for an account was because they did not know what the loyalty program entailed. In my iteration, I decided to include a brief description of the benefits of the loyalty program on the checkout page to entice shoppers to sign up.


Progress Bar on Checkout Process

After the customer checkouts, the user will be prompted to fill out their shipping address, payment information and shipping information. Through usability testing, I found that most shoppers were frustrated when they didn't know how long a process will take. Adding a progress bar indicates how far they are in the checkout process. If a user signs up for an account, their information would be pre-populated for an efficient checkout process.



Iterate Based on Feedback

The next steps is to reiterate my design based on feedback from the customer. 

Create Subcategories Through Card Sorting

If Progress Hardware decides to incorporate more products on their website, I will work on another card sort to create subcategories to make the site navigable to its shoppers. If shoppers are overwhelmed by the product choices, they may decide to leave the website.