Webpage
Design Challenge
The Challenge:
The Home Depot UI team challenged me to revise a product page featuring any one of their tools on the current website. Solving a problem space is not the primary intent of this exercise. The team is more interested in how I would attempt to make improvements to the site and my process.
Requirements and Restrictions:
A sample product page was provided for content and structure. Context or research insights were not available. The challenge was to be finished in four days followed by a presentation of the designs, conversation and feedback.
RESEARCH PROCESS | Content Audit
A content audit was done to evaluate the product page for hierarchy, Feature values , and eye-flow. Some of this evaluation is based on “Heuristic Evaluation” methods, and industry best practices.
Click images to see evaluation pages enlarged.
PRODUCT PAGE REDESIGN | 1- UI Revisions to navigation, layout, typography and assets (complete redesign show lower in this study).
PRODUCT PAGE REDESIGN | 2- Re-design of product detail banner which hovers while scrolling below the product details hero-section as seen above right. Also 2 potential Parcel Details options as seen above after the add to card CTA button.
KEY INSIGHT HIGHLIGHTS
1- Clarify navigation and banner features.
There is more than one navigation section and a lot of content above the main-hero section. Consider adding more breathing room and some visual separation for minimal eye load.
2- Improve the product content details. This could include page product breadcrumbs, heading and body type sizing, and add negative space to the content layout.
Simplify the layout of the product page to be less content heavy and easier to digest:
Revising the details chart.
Improving alternate product feature cards and their relevant section headings.
Revising the rest of the layout body-copy to be easier to digest.
COMPLETE WEBSITE EXPLORATION REDESIGN | Navigation, product details, specifications, and review layouts.
OUTCOMES
Client appreciated the added negative space to the navigation and content layout for easier eye-flow.
Client agreed that the re-organization to the product details made for a better understanding of the information. This was noted especially when discussing the shipping detail columns. Also the new card layouts for alternate cards were more functional and insightful.
I was also able to make better sense of the detail specs along with some errors in their current website which was a big eye-opener for them.
A snapshot of the before and after Product details.