UX Designer
P2.png

Student Project: Progress Hardware

Product Description here

 

Case Study: Progress Hardware

Building trust in the local neighborhood with an online community

MockUp.png

OVERVIEW

CLIENT

Project for User Experience Design Immersive
at General Assembly San Francisco

duration

2 weeks of 10 week course

my role

Independent project

skills

Affinity Mapping

Card Sorting

User Flows

Paper Prototyping

Usability Testing

TOOLS Optimal Sort, Slick Plan, Draw.io, Sketch3, InVision


Problem

Progress Hardware wanted to create its first website to not only establish its involvement in the community but also offer customers a more convenient way to shop from their store-- online.

 

Challenges

Progress Hardware wants to maintain its brand as a professional but not serious like the corporate big box hardware stores. The challenge is growing the business without losing the personal touch of the neighborhood shop that opened in 1948.

 

Outcome


After two weeks of research, design, and iterations, I designed the wireframes in Sketch to create an improved version of the low-fidelity website draft to get a better understanding of the direction of the layout without needing to progress into coding and development just yet.

The logo is placed in a familiar area at the top left, and the search bar is large and placed at the top for customers who already know exactly what they need to find. I included a login feature for returning customers, saving them time from reentering their billing and shipping information. I also included a shopping cart icon at the top so customers can easily navigate to the list of items they want to purchase and proceed to the checkout process. The navigation bar lists three items: an ‘About’ page for the store’s history and background, as well as any additional content Progress Hardware may want to include, a ‘Shop’ category for all the departments and products in one link, and a ‘Contact’ link to provide the customers another way to reach the store for any reason, including notification of any products not in stock. I included a footer menu at every page to make it easy for users to navigate elsewhere.

View live prototype here.


Paper Prototyping

 
 

Competitive Analysis

evaluating the strengths and weaknesses of other hardware stores

Progress Hardware’s website should be usable, easy to learn for all users. 

I looked at Ace Hardware to the website layout and the features offered. Although the website was structured clearly with plenty of elements and sufficient white space, I felt a little overwhelmed at all the choices available on the page. Unless I knew exactly what product or service I was looking for, it would take me some time to figure out where I would click next. There is plenty of text, images, and buttons.

 

Home Depot’s website has a lot of text, images, a navigation bar and several other groupings, and a lot of content. The search bar at the top has placer text: “What can we help you find today?” bringing to mind an in-store sales associate asking you if you need assistance. Although both websites were pretty content heavy, Home Depot felt slightly less overwhelming because they used more white space and the layout was a little easier on the eye. On the other hand, Progress Hardware emphasized that it is the local neighborhood hardware store and does not want to be like or compete with these big box stores, so I took a look at another local hardware store, Cole Hardware. The website looks much more simple compared to Home Depot and Ace Hardware. However, the website graphics looked a bit outdated and used a slim bold font which made it a little difficult to read. In addition, the navigation bar was a guessing game. There are several categories listed and I had to take time to hover over each category, read the drop down menu, and guess where those links would take me next.

 

 

After looking at the competitors, I visualized a layout similar to Cole Hardware with an updated, modern look that would be accessible on both desktops and mobile devices. The content still felt a little heavy with a lot of features.

 

Comparative Analysis

I looked at Target’s website to look at the layout and draw some inspiration for the eCommerce component. I immediately noticed the large search bar at the top and remembered the targeted users’ needs to be able to quickly and easily locate specific products. The search bar is an essential feature for an eCommerce website. Lisa needs an oil stain product, Thomas needs a gift card, and Andy needs circular saw blades. All three customers stated their need to purchase a product. With the search bar feature, all customers can simply type in the name of the product they are looking for, and the website will then produce a list of search results for the customer to select their desired item.

 

Personas

who are we designing for?

 

Customers want: access to customer support, the ability to find the right items easily, website access via mobile, and low cost.

Affinity Diagram

identifying patterns in user data

 
  • customer support

  • efficiency

  • ability to find the right items

  • mobile access

After creating an affinity map, I found similar things that all three users need: access to customer support, efficiency, ability to find the right items easily, mobile access, and low cost. I lined these user needs up next to the business needs: clear ways of locating specific products, a single page for each product, an efficient means of purchasing one or more products, steering customers towards popular products, establishing the brand and its points of difference, allowing customers to contact the business, rewarding loyalty for San Francisco locals, and emphasizing their involvement in the community. After comparing these two lists, I was able to prioritize what must be included on the website to meet both business and user needs.

I reviewed the personas to try to understand their goals at the Progress Hardware website, what they were looking for and what they need, how and when they would be using the website, and their unique pain points.

 

USER FLOWS

drawing out the steps from start to finish

For each persona, I drew out out the decisions they would make on the website in order to reach their given task. Although Lisa, Thomas, and Andy were all looking for different things, they all ended up with the same task-- to purchase a product. After drawing everything out, it was clear to me that all of the users arrive at selecting the product page, adding it to the cart, selecting to checkout, filling in both billing and shipping information, reviewing the order, and actually placing the order. This highlighted the importance of a smooth, quick, efficient checkout process  for both the business and the users. Not only will Progress Hardware provide this easy and painless way to purchase online for customers, but will also meet their business need of providing an efficient means for customers to purchase multiple items.

 
 

Card Sorting

learning how people categorize things

 

Every customer should be able to find what they are looking for.

After running this card sorting activity, I did it myself and realized that several items could be placed in multiple categories. For example, plastic food storage containers made sense in my opinion to be in "Storage." It also made sense to be in "Home." Wouldn't they be used in an outdoor barbeque situation as well? I used card sorting to create the product categories.

I loaded 195 products into Optimal Sort and set up an open sort. Next time, I will run a closed sort because although the default message stated it would only take 10-15 minutes, the average time out of 40 participants was almost 30 minutes! No wonder only 4 out of 40 participants completed the activity.

 

 
 

Site Map

visually tying all the pages together

 

I wanted to make a navigation bar for Progress Hardware that was more simple, efficient, and easier to understand than Cole Hardware’s navigation bar. I drew out a site map from Cole Hardware’s website to get a better idea of what worked with their navigation bar, as well as any confusing areas that can be improved.

Some of Progress Hardware’s business needs include: business needs: clear ways of locating specific products, establishing the brand and its points of difference, allowing customers to contact the business, rewarding loyalty for San Francisco locals, and emphasizing their involvement in the community. I used Cole Hardware’s example and these business needs to start creating the website navigation bar.

 

Paper Prototyping

instantly testing and validating design ideas

Using all the findings from competitive and comparative analysis, reviewing the user personas, drawing out storyboards and user flows, sitemap and card sorting, I sketched my first paper prototype of the website design I had in mind for Progress Hardware. I designed it to meet all the business needs as well as user needs.

 

Usability Testing

After paper prototyping I learned that I was missing several key steps and screens from having a complete user journey from homepage to order confirmation. In addition, I noticed that none of the users pressed or seemed to notice “Rewards” so I decided to make the navigation even more simple for the shoppers. In the wireframes I grouped the Rewards feature into “About Us.”

 

Wireframing

Homepage

  1. Navigation bar with clear options

  2. Big search bar at the top for locating specific products

  3. Displaying featured items on the front page to increase sales

  4. Shopping cart at the top on every page so customers can checkout at any time

  5. Another way for customers to browse through products

 

Product Detail

  1. Secondary navigation-- another way for customers to find what they're looking for

  2. Product reviews for customers by customers

  3. More product section to show popular items

 

Shipping Information

  1. Loyalty Rewards program login

  2. Progress bar for customers to see where they are in the checkout process

Key Learning

I redesigned this page because several users looked confused. Previously I had squeezed the login info to the side as an attempt to make the checkout process faster and more efficient. However, users felt confused and “didn’t know what to do first.” 

 

Order Review

annotated05-OrderReview-03.png
  1. Summary of items for final review

  2. Displaying the shipping information for final review

Key Learning

In case users need to edit the items in the cart, I can provide an additional edit button on this screen.