John Bright Fencing, a Dorset-based fencing, garden building and furniture supplier, got in touch with us looking to redesign their website that had become outdated and inefficient. Beth Bright (Purchasing Manager) recognised that their current web presence wasn’t in-line with their brand image, and needed modernising to portray a company that is locally well-known, professional and knowledgeable.

Why was the existing site so poor?

One of the major problems with their pre-existing site was that it lacked the custom sales functionality that could help streamline the stores day-to-day operations. Although business was still thriving, the on-line side of things was reaching nowhere near it’s full potential.


The first step for us, after agreeing a new sitemap structure for the site, was to begin producing wireframes for the new site’s key pages. This process allowed us to really focus and concentrate on potential layout options to create the optimum user experience, without yet getting too bogged down in aesthetic decisions.

Homepage Wireframe

Here’s a quick look at the homepage wireframe we initially presented:   jb-homepage With this homepage concept, we wanted to primarily introduce the company as professional and modern, yet approachable. We wanted to show them as leaders in their field, but didn’t want to lose the sense of loyalty and friendliness that comes with the knowledge that they are indeed an established, local, family run business. Fortunately, to help us achieve this vision, John Bright invested in some high quality, professional photography. Our intention was to show this off by guiding users through the page with large full width images but to not stray too far from a traditional e-commerce website structure so as to prevent confusion.

Composite Product Page Wireframe

One of the key reasons for the original overhaul was to extend the purchasing functionality of the original site. Due to complex pricing structures, and a vast amount of variations for each individual product, the original site simply gave an explanation of each product and guided customers to a telephone number to call and enquire about or order a product. While this was fine, we couldn’t accurately predict the impact on sales this lack of functionality had. How many people just gave up when they realised they couldn’t buy online? Also, adding a phone conversation into the equation for each potential sale was simply creating more work for the guys at John Bright, and a less efficient method meant a lower turnover even if it was hard to measure. John Bright wanted to allow customers to call up if necessary (providing a friendly, customer focused service), but it made more sense if all the sales were automated as much as possible via the website. To achieve this would be our greatest challenge as our developer Toby could no doubt tell you. jb-composite-product Effectively our initial wireframe idea hinged on providing a sleek, confusion free way to pick & choose the various options for each product. This would in-turn affect the total price for that product, transparently and dynamically, before allowing the visitor to add it to their basket, review it, modify it if necessary, and finally purchase it.


After we’d gone through the wireframing process with John Bright, we moved onto producing design concepts, showing them our vision for how their new website could look.

Homepage Design Concept

After a few iterations and back-and-forth with the client. Our final design concept for the homepage looked like this: jb-home-design We wanted to do something unique with the header area, having expanding image sections with related text that not only provided helpful links to various areas of the website, but also made use of the fantastic recently commissioned photography. Below this banner would be an area dedicated to new & popular products. Following this would be a section displaying information on the Country Store, as it was important to highlight for first time visitors that this wasn’t just an online store, but an established physical store that was open for people to visit and browse if they fancied popping in. Finally, we included a section for news posts and a section to display the company’s activity on social media. Beth was already actively posting on various social media accounts, creating a buzz around the company so having a central hub for this kind of marketing just made sense. Including functionality for news posts would allow for regularly updated content and help push more people to the site. It would create opportunities to discover new customers and also help the website rank higher in search engines such as Google.

Composite Product Page Design Concept

Our final design concept for the composite product page looked like this: jb-product-comp-design There were some slight changes from the initial wireframe for this page. Some advanced development experimentation into the custom components of this page led us to modify some elements to create a solution that would work quickly and efficiently. As intended though, we think we proposed a design that is sleek and elegant in both its form and function.

Parting words

It was a joy to work with John Bright on their new website, and we’re really excited to see how it performs. It was a challenging project, but we’re very happy with the final outcome. Of course the process doesn’t stop there, we continue to monitor traffic on the website and we have some further ideas we’d like to explore with them for improvements (based around using a tool called HotJar) now we have an idea how visitors are using the current site. These kind of insights will prove extremely valuable for the continued improvement and development of John Bright. We’re also looking to help optimise the site further so it can become the number one supplier of fencing, garden building and furniture in the south-west of England. Please feel free to take a look at the new website. View the website

Let’s create something
great together.

All great things start with a chat. Use the adjacent form or our project planner to get things started.

Project Planner

We’re currently accepting projects
Please enable JavaScript in your browser to complete this form.

Authentic Insights