Gates N Fences


Website for a gates and fencing business


2022 - Term assessment for WEB503 class


Sole researcher & designer


Gates N Fences- A company that sells manufactured and bespoke gates and fences to both commercial and residential clients.


For this project, I was required to research the customer's journey, from before product discovery to completing an installation. Using my findings I was to design a website for the client.

The problem / opportunity

The client currently has an outdated and overcrowded website.
By not keeping up with current website guidelines, they are loosing the faith of their customers when they visit their website. Poor design can negatively affect your user's experience and ability to draw in new customers, SEO ranking, and ultimately result in financial loss.

For the purpose of this assessment, the geographical location was changed to within Nelson, NZ. This was done to make the research phase more accessible and relevant to students.
The business and website example used is in the USA.

GatesNFences current website:

At a glance
Gates N Fences has a comprehensive range of gates and fencing options.They are a well established, family run business, with highly skilled craftsman. A true wealth of knowledge in the field.

  • Diverse product range and knowledge - producing commercial off-the-shelf options as well as bespoke wrought iron designs.
  • Med-large scale production, locally.
  • Great craftsmanship on bespoke wrought iron products.
  • Pride themselves on delivering timeless, elegant, and quality products.

By mapping the customers journey, discovering their pain points, and designing with a customer-centric, solution focused mindset, a competitive and user friendly website was delivered.

gates n fences website


Project Scope document

A 33 page document was created to outline the project scope.

This includes: Project goals, objectives, deliverables, tasks, assumptions and constraints.

It also identifies:

Out of scope, Milestones, acceptance criteria, risks, and estimates.

Project brief

Provide a website product that increases traffic to and customer inquiries from the website, increase user experience satisfaction - Reduce customer stress, click off rate, and product confusion.

Stage 1 - empathise

To gain an empathetic understanding of the problem, I conducted a series of user-centric research methods. This helped me to put aside assumptions I may have had about the problem and gain insight in to the user and their needs.

user observaton

‍To understand how people are currently interacting with the website, I conducted 2 types of observatio

Observation Type

2- Remote / recorded observation

1 - In person observation

For some of my participants I sent them the link to the website along with a task. I asked them to record their screen. This meant I could observe their interaction with the website without my presence influencing their actions.

For my other participants I gave them a task and asked them to complete the task and to vocalise their thoughts and feelings as they went.


I was able to see how they interacted with the menu items and what logic path the users followed to navigate the website.
I could also see when the user:
- Paused
- Clicked off
- How often they navigated between pages    attempting to complete their task.
- How long it took them to decide on the    product to select.

This allowed me to observe both body language and record their thought and emotions in real time.
I was also able to ask follow on questions directly after the observation task when the experience was fresh in their mind, helping to obtain candid opinions.

Actionable Insights:

The insights gathered during these observations will be used later in the research process to form pain points and goals.


I also gave each participant a short questionnaire via Google forms with questions to gather their opinions on their experience. These questions

I extracted some common themes, obstacles, and emotions and combined with the information gathered during the experience map, I compiled a list of paint points that I will later turn in to goals.

Experience Map

Using information gathered during the user observations, I looked at a typical GatesNFences user's path from discovery to evaluation to purchasing.
Each stage of the process was evaluated and documented against the users actions, motivations, questions, and tech limits.
Using red stickers to highlight pain points and blue to highlight positive exeriences.

painpoints & goals

From the user observations, and experience map I was able to compile a list of pain points. These were then turned into goals.

Pain points and goals help to break down the larger problem and can help create features.
These goals will act as guidelines during the ideation phase.


To gain a better understanding of who I am designing for, I created personas for each of my prospective user groups. Each type of customer has different wants and needs, so personas give insight, and help keep the ideation and development stage user focused.

user stories

After mapping the background, identifying the thinking process, demographics, and lifestyle of each of my potential users, I was able to create user stories that have context and become more accurate.

User stories were created as a way to take a closer look at the different user types for GatesNFences.

This offered a more granular look at what the users wants and needs may be when using the GatesNFecnes website.

Stage 2 - define

Site Map

A site map was created to understand what pages, and sub pages,  will be in the website. This helped to visualise the hierarchy of information and act as a road map when wire-framing.

mood board

I opted for a minimal theme and color palette for the website to avoid competition with the content. The primary color is white, providing a clean canvas, complemented by grey tones representing materials like aluminum, iron, and steel, and natural tones inspired by outdoor surroundings, blues and greens.

Mood boards were used to facilitate early discussions and decision-making, quickly conveying design concepts and direction before detailed mock-ups or coding.

Stage 3 - ideate



Stage 4 - prototype


Tools used: