Stainless Cable and Railing Website Remodel
Summary: Stainless Cable and Railing is an ecommerce site that sells aluminum and stainless steel cable railing systems along with hardware. The site was last updated in 2004, due to Yahoo being sold the site needed to move to Wordpress. I completed all User Research as well as acted as project coordinator.
Tools: Adobe XD, Figma, Hotjar, Outlook, Google Sheets
Overview
Roles & Responsibilities
I acted as the project manager and in house UX Specialist.
I conducted the visual design, audit of the old site, user research, user interviews, usability tests and presenting to stakeholders.
Audience
The main users are homeowners, contractors, architects, builders, and designers looking to purchase cable railing.
Problem
Stainless cable and Railing has been rocking the same website design since 2004. The design offered two ways to navigate through the site that needed to be simplified, the colors were dull and the site overall needed a facelift.
Solution
The solution was an updated site that reflected the user flow of existing railing sites, an easy to use navigation, an updated photo gallery and product pages that directed users to where the company wanted them to go. Leaving users less confused and allowing the business to make more money.
Discovery & Research
The old site …
The old site although it looked outdated had a decent structure that managed to keep the business running and growing for almost 10 years. The SEO strategy that had been implemented for over 6 years made for valuable URLS and pages that we wanted to conserve. The nav was robust however and we needed to restructure the IA. The site acts as primarily for lead gen but also as an ecommerce site. We had to keep both ways of using the site in mind when conducting the redesign. Alongside the site redesign, I was conducting a rebranding due to high search volume for this product and a new post pandemic narrative involving indoor outdoor spaces. We reflected a more upbeat ton across the board with colors, photos and verbiage.
Who is buying directly through the site?
Railing systems aren’t simple. It takes someone who has either done it before or has a good understanding of hardware, power tools and building codes to purchase this product without help from a sales person. These people need access to documents like specs, material quality and cad drawings in order to decide on their purchase.
Who is just looking and how to do we design the site to make the sale?
When homeowners or DIYers visit the site they almost all go directly to the gallery widget and start clicking through photos. Once people start looking for individual parts, we loose them unless they call and are on the phone with a sales person who can walk them through what they need. We looked into Hotjar data to see how people were using the site and if we could design it so that when they do call or fill out the form the sales people have less questions to ask and can use the site as a tool to make the sale.
Scope and Constraints
This project was set to be completed within 3 months. We were also moving to the Eglass site at the same time so we had to split our time between the two. We were also in the process of developing an estimation software with a team of designers on the East Coast. The design team I was working with team was located in Cape Town, the Ukraine and in different parts of the US. Our communication was limited to comments on the project, weekly meetings and email back and forth.
Process and what I did
Prior to starting the site design we listed out a list of desired features which I put together using input from sales teams, previous customers, watching recordings on hotjar, viewing site heatmaps and conducting onsite user surveys.
Understanding why initial design decisions were made
I started with talking to the in-house team who had limited experience with the design process so I was limited in the tools and time I was able to commit to initial research. I sent a list with new features I knew we needed to improve, which were the gallery filters, simplifying the IA, and modernizing the branding. I sent branding guidelines, a suggested IA for the gallery filters and worked with my inhouse team as well as the Thrive team to create an IA that maintained SEO ranking while also meeting user needs.
What goes above the fold?!
The old site layout allowed many important links to exist above the fold. The owner of the company wanted as much as possible to take up this space. From a design perspective this was challenging because sometimes having too many options leaves the user feeling confused about where to go.
User Research
The old site layout allowed many important links to exist above the fold. The owner of the company wanted as much as possible to take up this space. From a design perspective this was challenging because sometimes having too many options leaves the user feeling confused about where to go.
Deciding what matters to the user and what matters to the business owner proved to be a challenging process so I suggested we implement a heat map to the site so we can use user interactions to gather data to figure out parts of the design we need to a/b test, what users are telling us through the interactions and more.
I watched screen recording to discover patterns of usability issues that users were experiencing on the existing site. Key behaviors like clicking empty space, text that wasn’t actually a link, attempting to zoom on photos, landing page behavior and exit page behaviors were all areas I paid close attention to when making design changes.
I added surveys on landing pages, exit pages, conversion pages and product pages to see how satisfied customers were with the experience. Due to the site being hosted on Yahoo! The hotjar extension made loading times slow so I was limited on the time frame I could have the surveys up so I only had a week of data to work with.
Competitive Analysis
User Personas
Homeowner
Thinking about someone who is window shopping and may not know things like what a facia bracket is or what style of top rail to consider were important people to consider when designing the site. This type of person needs the difference between products made clear, they will need lots of help figuring out what to buy and will need photos to learn what look meets their vision.
Contractor/ Builder
Many homeowners will hire contractors who need things shipped fast or have many different vendors offering them discounts. This type of customer might want to just buy parts, get an order shipped as fast as possible and may not need access to as many photos. Through the surveys we discovered that many builders/contractors will visit the site on behalf of their clients and will wait for client approval on the choice.
Brand Development
I used the existing branding and added in new complimentary colors to diversify the new site. We went for lighter, brighter colors as the site foundations to keep it feeling light, approachable and inviting.
Mockup 1
On to the next iteration …
The initial mockups were a great improvement from the old site. However the nav on desktop was hidden in a hamburger menu. The demographic for top purchasers are people in their late 50s-60s so we felt that this design approach wasn’t the best choice for our users. The heatmap data showed us that the most used function on the existing site was the gallery widget and this was buried on the new site so we decided to take a different approach.
Product Pages
Before
After
Conclusion
We are in the process of redesigning the homepage to better reflect the data gathered from the Hotjar study we conducted as well as meet the desires of the business owner. The homepage redesign will be added later on. Overall, regarding the product pages and subpages the site’s usability and overall look is updated. The interactions to assist in making important decisions better reflect what is common in modern websites. The site has maintained a structure that will conserve the SEO rankings in the best way possible. The site makes for a better user experience for homeowners, builders, contractors and salespeople that will help the company increase overall revenue.