top of page
Overview
Gates N' Fences Redesign
As a student in the course HCC 629: Interaction Design, I examined websites with less-than-ideal user experiences and identified ways to improve interactions, enabling users to navigate pages more easily and achieve their goals quickly and efficiently. Gates N Fences is a company that specializes in designing, manufacturing, and installing custom gates, fences, and related products for both residential and commercial properties.
Role
UX Researcher
UX Designer
Tools Used
Figma
Duration
October 2024
Audience
The Gates N Fences website targets homeowners, commercial property owners, and/or contractors seeking customizable gate and fence solutions for residential or commercial properties.
Problem Statement
The Gates N Fences website has several navigation challenges. The navigation menu is too long and disorganized, making it hard for users to quickly find what they need. There are also redundant buttons and links that lead to the same pages, cluttering the site and creating confusion. The cart functionality is inconsistent, with no clear cart icon in the header, making it difficult for users to access their cart from other pages. Additionally, the site lacks clear indicators of the user’s location within the menu, which can lead to confusion and force users to rely on the back button.
Problem Identification
Navigation with the Current Design
.png)
Overwhelming Amount of Text
-
Navigation menu is very long and lacks organization
-
​Not grouped into categories; takes up entire page, overwhelming users
Redundancy of Buttons and Links
-
Many buttons and links lead to the same pages, creating clutter
-
Users spend more time sorting through unnecessary options.
Cart Functionality
-
Cart icon only appears on pages where items are being added
-
No cart indicator in the header; inconsistent with e-commerce standards
Lack of Clear Indicators for User Location
-
No visible trail or breadcrumbs to show users which page they are on
-
Easy to lose track of location after navigating multiple menu levels
Connection to User Experience Concepts
Reference to Lydia Stamato's concept of "Flailing"
-
Users don't know where to go on arriving at a page due to unclear navigation paths.
-
Lack of visible trail or breadcrumbs forces reliance on the back button, disrupting browsing.
Redesign Goals
The new navigation of gatesnfences.com is more effective than the previous design
-
Users can navigate in an intuitive, step-by-step manner
-
Reduces the Gulf of Execution, making it easier for users to understand and achieve their goals
Addressing User Journey
Redesign Features and Benefits
1. Breadcrumbs in the Header
Purpose: Let users know their position in the customization and checkout process.
-
Adds clarity to navigation, especially for users unfamiliar with gate and fencing terminology
-
​Provides a trail showing users how they reached the current page
-
Particularly useful given the detailed nature of the site’s content
2. Addition of Cart and Search Icons
Purpose: Clearly labeled actionable links such as “View Cart” and “Search.”
-
Enhances user confidence in understanding where the icons will lead
-
Simplifies access to key actions like viewing the cart or searching for specific items
3. Horizontal Navigation Menu with Dropdowns
Purpose: Organizes content into overarching themes with nested dropdowns for specific pages.
-
Reduces clutter from the previous design by avoiding an overwhelming number of options
-
Allows users to scan and select relevant options more efficiently
-
Expanding menus make navigation more flexible by showing options in the same window
.png)
4. Simplified Customization Process
Purpose: Replaces lengthy, similar descriptions with a step-by-step process for customizing gemstone gates.
-
Avoids user confusion caused by dense text and minor differences in options
-
Enables incremental decision-making, making customization more straightforward and accessible
5. Pop-Up Prompts for Guidance
Purpose: Pop-up informs users they must move through customization steps sequentially with grayed-out buttons indicate unavailable actions until previous steps are completed.
-
Prevents errors by guiding users through the process in a logical order
-
Ensures users understand why certain options are unavailable, reducing frustration
Conclusion
-
Provides a seamless navigation experience
-
Increases user confidence by making interactions meaningful and predictable
-
Allows users to achieve their goals efficiently with minimal confusion or effort
Overall Benefits of the Redesign
Final Gate N' Fences Design
Detailed Interaction Shown Over 3 Pages
Frame 3 (5)
1/3
More Projects
.jpg)
.png)
bottom of page