Bristol WORKS Website: Home Page Case Study

Bristol WORKS needed a new website to replace its previous Squarespace site at bristol.works. The original site lacked a clear and consistent identity. Navigation had become fragmented, the look and feel varied between sections, and there was no strong structure to guide the different types of visitors using the site.

Xelium Ltd was appointed to design, build and host a completely new website for Bristol WORKS at: https://www.bristolesl.com/bristolworks/

As part of the project, Xelium created a new corporate identity for Bristol WORKS and developed a fully custom website designed around the organisation’s key audiences. The website remains hosted, supported and continuously developed by Xelium, with a redesigned version currently in development after 4 years since migration.

The Challenge

---

Bristol WORKS also needed a site that reflected its role as a professional, city-wide initiative connecting schools, employers and young people.

Project Objectives

The aims of the project were to:

• Create a strong and recognisable Bristol WORKS brand identity
• Replace the fragmented Squarespace site with a more coherent design
• Build a homepage that immediately directs visitors to the most relevant content
• Create clear pathways for the four main audience groups
• Encourage employer engagement through a strong “Make a Pledge” call to action
• Showcase the work and impact of Bristol WORKS through testimonials and project content
• Ensure the website was accessible, responsive and easy to use across all devices

Why a Fully Custom Designed Solution Was Recommended

Xelium recommended a fully custom-built solution rather than continuing with a template-based platform. This approach delivered several important advantages:

1. A consistent corporate identity across the whole website
2. Simpler top-level navigation with only five to six main sections
3. A clearer understanding of visitor intent and user journeys
4. Tailored content and calls to action for each audience
5. Improved accessibility nd screen-reader compatibility
6. A responsive design for desktop, tablet and smartphone users
7. Faster page loading and better reliability through dedicated hosting

The result was a website that was more professional, easier to navigate and better suited to the needs of Bristol WORKS.

Home Page Strategy

The homepage was designed to act as a central gateway to the entire Bristol WORKS website. Rather than overwhelming visitors with too much information, the page focuses on helping people immediately identify where they belong and what they should do next. The content and structure were designed around the four key audience groups.

Page Structure and Design

Hero Section

The homepage opens with a large hero image in the top fold. This immediately communicates the purpose of Bristol WORKS and gives the site a more modern and professional appearance.

A strong headline clearly states the aim of Bristol WORKS, supported by a concise tagline explaining how the organisation helps connect young people, schools and employers.

This top section performs several important functions:

• Creates an immediate first impression
• Establishes the Bristol WORKS identity
• Makes the organisation’s purpose instantly clear
• Gives visitors confidence that they are in the right place

The use of a large image also helps add energy and personality to the page, making the site feel more engaging than the previous Squarespace version.

Audience Pathway Panels

Directly beneath the hero section, the homepage features four prominent panels arranged in a row.

---

This is one of the most important design features of the page. Instead of presenting the same content to everyone, the site immediately provides tailored pathways based on who the visitor is.

This structure helps reduce confusion and encourages visitors to move quickly to the most relevant section of the website. The Projects panel also provides a route to showcase the work Bristol WORKS has already delivered, helping reinforce credibility and demonstrate impact.

What We Offer

The “What We Offer” section expands on the role of Bristol WORKS and the services available. This section explains how Bristol WORKS supports:

• Employers wishing to engage with schools and young people
• Education providers looking for partnerships and resources
• Young people exploring future career pathways

By including this information on the homepage, visitors gain a much clearer understanding of the breadth of support available.

The section also helps strengthen the overall message of the site and supports the key calls to action elsewhere on the page.

“Make a Pledge” Call to Action

One of the key goals of the Bristol WORKS website is to encourage employers to make a pledge and support young people through work-related opportunities.

To support this objective, Xelium created a dedicated “Make a Pledge” call-to-action section on the homepage.

This section is positioned prominently and designed to stand out from the surrounding content.

The call to action encourages employers to:

• Offer work experience
• Support careers events
• Provide mentoring or talks
• Help young people develop skills for employment

Placing this section on the homepage increases visibility and gives employers a clear and immediate action to take.

Testimonials

The testimonial section was included to provide social proof and demonstrate the positive impact of Bristol WORKS. Quotes from schools, employers and young people help make the organisation feel more credible and trustworthy. The testimonials also add a human element to the page and reinforce the idea that Bristol WORKS delivers real benefits. From a design perspective, this section helps break up the page visually and adds variety between more functional content blocks.

How We Do It

The homepage finishes with a “How We Do It” section. This area explains the process and approach behind Bristol WORKS.

Including this section at the bottom of the page works well because visitors have already:

• Seen the key audience pathways
• Learned about the services offered
• Read testimonials
• Been encouraged to take action

The final section therefore helps provide reassurance and reinforces confidence in the organisation before visitors continue further into the website.

Design Strengths

The homepage design successfully addressed many of the problems that existed on the previous Squarespace website.

Key strengths include:

• A clear and consistent visual identity
• Strong audience-focused navigation
• A better balance between information and calls to action
• A more professional and modern appearance
• Improved usability across all devices
• Better accessibility and readability
• A homepage structure that supports both new and returning visitors

The four audience panels are particularly effective because they create an intuitive user journey from the moment the page loads. The use of testimonials and strong calls to action also helps make the site feel more persuasive and outcome-focused.

Ongoing Hosting and Development

Since launch, the Bristol WORKS website has continued to be hosted, maintained and developed by Xelium Ltd.

The custom-built approach has allowed the site to evolve over time and adapt to the changing needs of Bristol WORKS.

The website is now undergoing a further redesign, building on the strengths of the current version and introducing new improvements in layout, navigation and user experience.

This original homepage provides a useful benchmark and demonstrates how Xelium transformed a fragmented Squarespace site into a focused, audience-led digital platform.

---

Continue to read about our Audience Pathways for Bristol WORKS in our follow-up case study.