ONLINE STORE REDESIGN
Update their site and streamline their e-commerce platform to reflect modern web best-practices.
UX Designer and Researcher. Project timeline was 2 weeks.
The Client and their Challenges
Cole is a local business that is valued by the community, and offers a unique presence. They must compete with bigger retailers who effectively leverage online commerce and compete with their market share. They want to update their site and streamline their e-commerce platform to reflect more modern web best practices.
We were given 3 user personas to choose from. I chose Lisa, a DIY enthusiast and creative professional.
Lisa reflects a customer base that would fulfill a few needs of our business:
- Being a hobbyist, she would be a repeat customer
- Being a young professional, and social media savvy, she would also be likely to share her projects with friends and tell others about how Cole Hardware is a reliable place for tools and supplies for their projects
Lisa’s primary needs:
DIY-oriented resources including videos, reviews, and advice from other customers on projects and products.
Easy-to-find items by brand name, with full product descriptions and reviews, and the ability to order online with home delivery. In particular, she has a bookshelf staining project set for this weekend.
Key Findings - Business + User
There are some direct points of intersection between the client’s needs and Lisa’s needs:
- Improved search and navigation
- Ability to shop by brand and related/popular items
- Online shopping cart
- Detailed product pages with descriptions
- Member reviews
The areas where there may be a difference for our client regarding the goals or needs of Lisa include:
- DIY resources pages, with videos and other content
- Free, or cheaper home shipping options
Hypothesis for design and testing:
- Creating a DIY section with member-reviewed content, easy-to plan and buy project packages will satisfy Lisa's needs, and drive more community involvement to the site and business
R+D (research and discovery)
I did a competitive analysis of hardware stores' sites, with attention to site navigation, information architecture, visual design, and unique offerings to visitors.
We need to consider the following:
- Establish credibility for our users by improving navigation and usability
- Sleeker styling and "ultra-modern” visual web design doesn’t fit with the client’s brand
- Making it easy to find and purchase products will increase online sales, and satisfy the needs of customers
User reviews: Cole Hardware has great reviews online, and community members seem to celebrate and value it as a local institution.
In-store Interview and Contextual Inquiry - with manager and customers
The interview with the manager validated that the site has many issues. A customer asked if an in-store product was available online, and the manager said "no". She replied by saying she'd just buy it on Amazon.
Hypothesis to validate:
- Using larger scale e-commerce website practices, and ACE Hardware in particular, as a reference for our redesign will fit our user's mental model of site structure and make the site easier to use, improving sales
Things that informed my process
- Studying competitive sites and sketching their architecture was helpful in learning best practices for e-commerce
- Card sorting and site mapping helped me understand what I was seeing in other sites
- I used ACE Hardware and other sites as a basis for my process moving into site mapping, user flows and wireframes
Discoveries from Competitive Analysis - Summary
- Big stores: OSH, ACE, Home Depot, Best Buy have similar solutions for product pages, checkout process, department categories and navigation.
- Function over form will fit our client’s brand.
Ready to design and test
Crafting a User Flow
My strategy at this stage was to focus on the user flow for my primary persona, Lisa. Her needs included having DIY resources and home shipping, so I worked towards crafting a simple checkout process for her visiting the site with the goal of purchasing products for a specific project.
- I designed an interactive prototype, to validate or invalidate design through user testing.
- Five subjects were selected for user testing.
- I was able to iterate and apply feedback from the first round of testing, and validate these design choices in the second round.
Above: Wireframes built for usability testing
What did I learn?
- During user testing, I realized that different people have varying mental models regarding how to "get at" information within a site, and we must design with this in mind
- Craft wireframes to accommodate multiple mental models for our user flow
- Individual Item pages
- Member rewards section
- Contact Forms
Was there a solution?
- Providing a list of items "by project", with options for customization received positive feedback
- Check-out flow and form design was smooth and predictable, while providing reassurances that met our users' needs
- How would the rewards section look and work?
- What user feedback would there be at higher fidelity?
Live site viewable at: colehardware.com