Kalyani Deshpande
PH cover 5-7.png

E-commerce website

Building an e-commerce website to increase sales

Progress Hardware

PH case study cover.png

Project Details

Timeline: 2 weeks
Team: Solo
My role: Competitive analysis, card sorting, user flows, site maps, wireframes and usability testing
Materials given: Product list of best-selling items, 3 personas with varying knowledge in hardware, 3 use cases.

The Challenge

Building an e-commerce website to increase sales

Progress Hardware is a mom-and-pop hardware store in San Francisco. The owners want to expand their business by entering into e-commerce. I was tasked with redesigning their current website and adding an e-commerce component. Through stakeholder interviews, I learned that three things differentiate the business - outstanding service, expert advice and carefully selected products - and my role as a UX Designer was to translate these qualities into the digital space.

the solution

An online shopping experience that's customer centric, knowledge-based and curated

I built a website that encompasses Progress Hardware's unique value proposition into a successful e-commerce experience. 

PROCESS

What are the key elements of a successful e-commerce website?

Studying competitor websites (Lowe's, Home Depot and Cole Hardware) helped me understand how they organized and categorized products. I also looked at Amazon for their efficient checkout process. I drew inspiration from Michaels for navigation and Seattle Caviar Company for connecting with customers through personal language.

Users' input informed e-commerce store organization

Using the products given, I conducted open sorts with three users who had varied knowledge when it came to shopping at a hardware store. Taking their product groupings, I conducted a closed sort with one user to finalize categories.

Charting the users' journey through the website

With the three different personas and use cases provided, I built out user flows for each to determine what pages to design and optimize the process between product discovery and purchase. 

Sketching, designing and iterating to arrive at the right solution

The process of sketching and designing was iterative. Conducting usability testing helped identify parts of the user flows that worked well and those that needed refinement. Some improvements made were:

  • Making navigation menu labels more intuitive - In version one of the site, the navigation menu labels "learn" and "create" denoted workshops and DIY projects. These were confusing for the user so the labels were changed to "workshops" and "DIY projects".
  • Enabling "Add to Cart" directly from the DIY Projects page - To select products for purchase, the user initially had to switch back and forth between multiple pages which was tedious. I revised the process by enabling the user to view and add products to the cart on the DIY page rather than redirecting them to other pages. 

WIREFRAMES

Below are select wireframes and their features:

  • Home Page - highlights curated product lists and showcases customer projects. Also, the telephone number is prominently featured so users can contact the owners for additional assistance.
  • DIY Project page - contains project instruction and allows users to select and add products to their cart.
  • Product Comparison - allows users to compare product features
  • One-page checkout - makes online shopping easy
  • Purchase confirmation - contains personalized messaging and links to upcoming workshops and blog post to direct the user to other parts of the website after purchase. 

HIGH FIDELITY MOCKUP

next steps

My next task will be to build out the About Us and Services pages. Also, the Workshops page will need to be designed to enable users to register for a workshop and purchase materials ahead of time for those workshops where they'll participate in a group build.

 Cherish / Nextdoor / Progress Hardware / WePlay / Work projects