E-Commerce Site Redesign for a Legacy Hardware Brand
Role: UX/UI Designer & Project Lead Timeline: 3 months (2021)
I led the redesign of a long-standing e-commerce site that sold stainless steel and aluminum railing systems. The site hadn’t been updated since 2004, and due to a hosting platform migration, we had the opportunity to completely rethink the experience for two very different users: contractors who knew exactly what they needed, and homeowners who didn’t know where to start.
The redesign focused on modernizing the brand, improving usability, retaining strong SEO rankings, and supporting the sales team with a more intuitive, conversion-friendly interface.
The Challenge
The original website was visually outdated and functionally complex. Navigation was bloated, product discovery was difficult, and critical assets like CAD drawings and spec sheets were buried.
User surveys, heatmaps, and session recordings showed that:
Homeowners often bounced around the site, unsure of where to begin
Contractors needed a faster path to key parts and documentation
The gallery (one of the most used features) was hard to find
Navigation and product page layout caused friction and confusion
At the same time, internal stakeholders had their own goals: highlight as many links as possible above the fold and retain SEO authority built over a decade.
The challenge was balancing user needs with business goals—while coordinating a distributed design and development team across time zones.
Research
Heatmap Analysis
We used the information from the heatmap to understand how users were interacting with the options presented to them on the current site. The shopping categories and the carousel mid page were the most active areas used. This allowed us to make decisions on how we could simplify the information architecture and get users to the content they were looking for.
Analyzing the UI
The layout of the site followed a common pattern for early 2000’s sites but is overwhelming for users nowadays. The area above the fold held a lot of information but how that information was being presented was overwheming users.
The Starting Point
This image carousel was the highest clicked component on the site when the business wanted the site to generate leads. We know that people liked getting inspired but this image was below a block of text so we kept this in mind when designing the new interface.
Process
I started with interviewing internal sales teams and reviewing existing customer feedback. I also looked into Hotjar recordings and used on-site surveys to uncover usability issues and patterns of user behavior.
Key actions:
Created two primary personas: the DIY Homeowner and the Contractor/Builder
Restructured the site’s IA, simplifying navigation while preserving SEO value
Elevated the gallery, which data showed was the most-used feature
Modernized the visual design, including a refreshed color palette and more approachable branding
Refined product pages to surface critical specs and calls to action earlier
Prototyped and tested multiple iterations to validate layout and feature hierarchy
I worked closely with our international dev and design teams, coordinating weekly through comments, mockups, and asynchronous feedback loops.
Impact
To evaluate the effectiveness of the redesign, I relied on Hotjar heatmaps, session recordings, and feedback from the internal sales team.
Key outcomes included:
Improved access to product specifications and technical documents for contractors
Increased engagement with gallery content by homeowners and first-time visitors
Reduced navigation-related questions reported by the sales team
Streamlined experience for both browsing and lead generation
A scalable foundation for future improvements, including a homepage refresh and continued SEO optimization
This project helped align user needs with business goals and positioned UX as a more strategic part of the organization moving forward.