E-Commerce Website Design
2 weeks | Solo Project | General Assembly
Progress Hardware is a small hardware store in need of a website that encompasses their large inventory, and represents their "friendly neighborhood hardware store" brand.
Overview
The problem my design is meant to solve for is accessibility--to the brand, customer service experience, and products. The scope of the project was to create the "happy path" for 3 given personas. The path includes a home page, product page(s), shopping cart, and a complete check out experience. Artifacts I provided include a site map, user flows, competitive analysis, wireframes, & clickable prototype.
How to Measure Success
The website design needed to achieve the following objectives: Represent the feel of the “friendly neighborhood hardware store” online, Emulate a successful in store experience (i.e. friendly service, ease of finding products), Gain access to the Progress Hardware Experience from home or on the go, Account for growth (operations, inventory, & key customers)
Research
[Competitive Analysis, Personas of Key Customers]
I went into the design process keeping a few things in mind….
1. I am building a site for the “biggest little hardware store” --a staple in the neighborhood and sf local business environment.
NOT a department store that warrants an excessive amount of categories for tools, NOT any other small hardware store with crowded websites.
2. I need to design for the key customers
Lisa: The customer who wants specialty items to fulfill her crafting needs.
Thomas: A non-tool guy who needs a quick way to buy a gift for a DIY enthusiast.
Andy: Who has tool needs on a regular basis; the repeat customer.
The three personas provided: Lisa, Thomas & Andy.
Information Architecture
{Site Map, User Flow, Card Sorting}
With this small business in particular, there is a lot of information to organize and prioritize. In the case of the hardware store, I needed to figure out how to define the inventory meaning the tools.
Site Map
After a few rounds of card sorting, I created a site map.
The site map highlights the sections address the personas paths & the business needs: general shop, "services" and "about" that build community, "DIY", and "Sales."
Card Sort
The card sorting exercise helped to define the main nav, plus how to define the individual tool categories.
User Flow
For Lisa, I designed easy navigation to search, find, or browse unique products.
For Thomas, I eliminated the need to have an account before checkout as well as added ready made “project kits” for purchase.
For Andy, I implemented the ability to re-order past orders, as well as an easy navigation to add new items for purchase.
Designs
Given the capacity of the Progress Hardware team, its in-store experience and values, while accounting for the specific personas presented as the target customers, I designed the wireframes and clickable prototype below. I eventually landed on a one page design, which can be optimized for mobile in lieu of an app.
Wireframes
Home page:
Progress Hardware is not a department store--so I eliminated "departments" from the top nav and went with "shop."
The main page highlights ads + social media which is the only form of marketing this small business gets. "Sales" is on the top nav to encourage loyal customers.
By adding "DIY" to the top nav, 2 of the 3 key customers have a quick path to what they need.
Products page:
Top nav and bottom footer stay on throughout navigation
10 products per page
bread crumbs at the top
Customers can filter by Brand, Price, and/or type of tool.
Customers can "sort by" ratings
Product page:
Customers can zoom in on product and can view multiple pictures of the product.
Customers can "add to cart" or save item for later
Each product page features a short description, a rating, and an option to save