UX Design · web/mobile · e-commerce

Improving product choice and conversion with a UX-focused eCommerce page redesign

Improving product choice and conversion with a UX-focused eCommerce page redesign

Role

Sole UX Designer

Category

E-commerce

Scope

Research, UX Audit, Cognitive Walkthrough, Benchmarking Competitors, Affinity Mapping, Prioritization, Wireframes, Redesign

Company

Overview

Company Overview

DecksDirect is an eCommerce website that specializes in selling deck-building materials and accessories. The site provides products like railings, stairs, and related hardware for customers looking to upgrade their outdoor spaces.

The image featured at the top of the about us page #1
The image featured at the top of the about us page #1
The image featured at the top of the about us page #1
The image featured at the top of the about us page #2
The image featured at the top of the about us page #2
The image featured at the top of the about us page #2

Problems

01

01

Confusing navigation

Confusing navigation

Menu feel crowded, and it's hard to tell what’s clickable

02

02

No guidance on complementary products

No guidance on complementary products

No recommendations for related items that are needed to complete the setup

04

04

Hard-to-find guides & tips

Hard-to-find guides & tips

Helpful resources like installation guides or customer support aren’t easy to access

03

03

Lack of visual inspiration

Lack of visual inspiration

There’s no content to help users picture how the railing will look in their outdoor space

Target Audience

Homeowners and professionals upgrading or building outdoor spaces

Homeowners and professionals upgrading or building outdoor spaces

Solutions

The 3 primary areas of focus for solutions

The 3 primary areas of focus for solutions

Trust & Understanding
Education & Guidance
Inspiration

Trust & Understanding
Education & Guidance
Inspiration

Usability issues

Current site analysis - cognitive walkthrough to uncover UX issues across web and mobile

Current site analysis - cognitive walkthrough to uncover UX issues across web and mobile

Research

See my research!
Check out FigJam

See my research!

See my research!

Benchmarking Competitors

Looked at similar e-commerce sites to see how they solve the same UX problems

Looked at similar e-commerce sites to see how they solve the same UX problems

Conclusion

Competitors reduce purchase friction by keeping actions visible, simplifying choices, and supporting users at every step

Competitors reduce purchase friction by keeping actions visible, simplifying choices, and supporting users at every step

Goals

01

01

Guide, support & build trust

Guide, support & build trust

Guide users in understanding what products they need to complete their purchase

02

02

Educate

Educate

Make educational content, instructions, and support easy to find

03

03

Inspire

Inspire

Inspire users with content that helps them imagine the railing in their outdoor space

Common

Design Pattern

- Redesign

Common Design Pattern

Common

Design Pattern

- Redesign

01

01

Product Page

Product Page

The layout was optimized to keep the CTA "Add to cart" always visible and make left-side content easier to navigate

The layout was optimized to keep the CTA "Add to cart" always visible and make left-side content easier to navigate

The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page

Redesign

02

02

Purchase panel

Purchase panel

Optimized the purchase panel to simplify actions, surface key options, and keep focus on buying decisions

Optimized the purchase panel to simplify actions, surface key options, and keep focus on buying decisions

The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page

Redesign

03

03

Navigation

Navigation

Optimized navigation flow by adding clear sections, actionable icons, and accessibility features to enhance the overall browsing experience

Optimized navigation flow by adding clear sections, actionable icons, and accessibility features to enhance the overall browsing experience

The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page

Redesign

04

04

Inspo & Guides

Inspo & Guides

Improved product discovery and confidence with interactive visuals, tutorials, and recommendations

Improved product discovery and confidence with interactive visuals, tutorials, and recommendations

The image featured at the bottom of the about us page
The image featured at the bottom of the about us page
The image featured at the bottom of the about us page

Concept project created as part of a recruitment task. All screenshots and assets were sourced from the publicly available DecksDirect website and are used here for educational, non-commercial purposes only.

Concept project created as part of a recruitment task. All screenshots and assets were sourced from the publicly available DecksDirect website and are used here for educational, non-commercial purposes only.