CREATIVE STUDIO

PROGRESS HARDWARE

 
 

PROGRESS HARDWARE

UI UX DESIGN 

 

Progress Hardware is a local storefront in San Francisco in need of an e-commerce experience that parallels the high level of service and community involvement they have established as a brick and mortar shop in the Sunset.   

 

DESIGN CHALLENGE

My design challenge was to create a streamlined e-commerce shopping experience that would cater to the needs of three customer types : 

 

PROFESSIONALS & CONTRACTORS

 

DIY HOBBYISTS

 

FIRST TIME & SINGLE TIME CUSTOMERS

 GOALS


 
 
  • REWARD RETURN + FREQUENT USERS

  • ENCOURAGE COMMUNITY PARTICIPATION

  •     ALLOW USERS TO CUSTOMIZE THEIR SHOPPING EXPERIENCE 

  • STRENGTHEN THE STORES BRAND IDENTITY AS A RELIABLE LOCAL HARDWARE STORE

 

PROCESS

 
 
 

 
 

SCOPE

PROJECT   |  GA Design Challenge

TYPE   | Ecommerce for Web 

Solo Design Project

TIMELINE  |  Two Week Sprint

 

 

 

METHODS

Competitive Analysis

User & Site Flows

Card Sorting

Information Architecture

Wireframes

Usability Testing

Visual Design  

 
 

IDENTIFY USERS

 

THOMAS  |  SINGLE TIME VISITOR  |  FIRST TIME USER 

SCENARIO : LOOKING FOR GIFT FOR A HOBBYIST

 

LISA  |   DIY HOBBYIST  |  FREQUENT USER

SCENARIO : PLACES FREQUENT NEW ORDERS FOR HER OWN PROJECTS

 

ANDY  |   PROFESSIONAL |   SUPER USER 

SCENARIO : PLACES FREQUENT RE-ORDERS AT HIGH VOLUMES TO MULTIPLE ADDRESSES

 

COMPETITIVE ANALYSIS


 

I analyzed competitive platforms for hardware stores as well as local shops who have successfully transferred specialized storefront experiences to the web. 

Using my findings, I developed a list of features and methods to employ within my design.  

 
 

CARD SORTING


 
 

 

I conducted multiple card sorts with a variety of user types to create a strategy for categorizing store items.  

My insights lead me to prioritize a cross-hatch approach to categorizing items so that items could be found through multiple routes.  I applied the different logical approaches that I observed in my various user tests to solve for multiple search approaches.  

 
 

USER FLOWS

 

I developed these user flows as my first step in designing the site architecture. 


For each user,  I envisioned a path through a typical shopping experience as mapped above.  


This process greatly informed the design of my wireframes.


 

WIREFRAMES


This prototype is the result of multiple iterations that reflect changes I made as a result of user testing feedback.


Users were asked to take paths to navigate this platform, following the flows above, while approaching the online shopping experience with different goals and mindsets in addition to their own habits and expectations. 

 

LAUNCH PROTOTYPE > 

 


USABILITY RESULTS

USER REQUESTS


  • create incentives to post projects
  • clearer calls to action in ordering process
  • create incentives to review items
  • clearer access to customer service
 

USER DELIGHTS


  • social hiring
  • clean interface
  • Streamlined checkout
  • community contribution
 
 

ITERATION STRATEGY


 

Elevate community involvement by thoroughly integrating social interactions in the shopping experience. 

Incentivize participation in the social aspect of the site by emphasizing successful projects

Reduce information fatigue by nesting all product information behind subject titles + expand icons. 

Visualize progress for checkout screens and for social posts.

Clarify calls to action through visual design.

 

 

ONWARD

 

This design goes beyond the traditional e-commerce experience by creating new support for the community while simultaneously creating accessibility to items andinformation within an online store. 

Products are seamlessly endorsed by members of the community through a new social channel, building in new voices to guide shoppers to reliable products. 

Customers are encouraged and rewarded for sharing and advertising their skills, which increases opportunities for growth of individual businesses and delightful exchanges. 

In the future, optimizing this platform for mobile use would be an important step forward as a means of reaching users on the go and creating further convenience for professionals.

Hosting events in-store would further support the social network and combine the online experience with hands on, in-person interactions within the storefront itself.