Contents

＋

#Overview 1Introduction 2Competitor Analysis

3User Research 4Brand Guidelines 5Wireframing

6Final Design 7Branded Marketing Assets 8Conclusion

Intro
Close Brothers Asset Management provided financial advice, investment management, and online investing services to help clients secure their financial future.

Challenge
The website had not undergone a rebrand in over five years and appeared outdated. A refresh was required to modernise the visual identity and enhance the user interface.

Solution
The website was redesigned following extensive research and testing. Due to inconsistencies in branding, a new set of guidelines was created for a more unified and recognisable brand presence.

1. Introduction

Close Brothers Group sought to modernise their online presence by refreshing their website branding, which had remained unchanged for over five years. The existing site was perceived as outdated, with a visual identity that lacked consistency across departments and marketing collateral. Inconsistencies in fonts, colour palettes, photography, illustrations weakened the overall brand recognition.

A review of brochures, flyers, and collateral produced by various departments revealed an inconsistent design style. Some used illustrations as the main focus, while others used photos. Styles varied with illustrations, for example one air balloon had a sketch effect, while another was filled with solid colours. Some brochures used a curved design feature, while others used a lens effect. These mixed styles caused confusion and made it difficult for the audience to connect with and trust as a brand.

Inconsistent Marketing Materials

A detailed review of the company website further revealed significant brand inconsistencies and several key issues that negatively impacted both user experience and visual perception:

Outdated Design

The site felt old-fashioned and didn’t reflect a modern, forward-thinking financial service.

Lack of Clear Calls to Action

Pages were mostly informational, offering little direction or encouragement for user interaction.

Low Trust on First Impression

The visual design and layout didn’t inspire confidence or convey credibility at a glance.

Content Overload

Pages appeared cluttered, making it hard for users to focus or find what they needed quickly.

Unclear Brand Values

Core messages and value proposition were not evident through the design or content.

Inconsistent Visual Identity

Elements such as colours, fonts and imagery lacked consistency, weakening the brand.

Scroll Here

Original Homepage

2. Competitor Analysis

A range of competitor companies were reviewed, including PremFina, Global Asset Finance, NEX Group, Lantern, Virtu Financial, and Praedicat, to understand their core service values and how they positioned themselves in the market.

Competitor Homepage Screens

Common design patterns emerged across these sites:

Hero Image Dominance

Most websites had large hero images on the top of the homepage, creating a strong impression.

Top-Level Navigation

Navigation menus were consistently placed at the top, ensuring easy access to key sections.

Block-Based Layouts

Content was arranged in clearly defined blocks, helping structure information for easier reading.

Generous White Space

Ample spacing between elements was used to reduce clutter and improve clarity.

Overuse of Bold Colours

Many used orange and yellow, which lacked a sense of trust associated with financial services.

Minimal Brand Personality

Many sites lacked distinctive visuals or tone of voice that reflected a strong, unique brand.

3. User Research

Affinity Diagram Created from User Research

To better understand how users interacted with the current website, interviews were conducted with three long-term customers of Close Brothers Group. These participants were selected based on their familiarity with the business and their regular use of the website’s services.

The interviews aimed to uncover how users navigated the site, what challenges they faced, and how well the platform communicated its services and brand values. Each session focused on first impressions, task completion, and overall usability.

Insights from these sessions were grouped and organised using an affinity diagram, created on a whiteboard with post-it notes. This visual process helped highlight recurring themes and major usability concerns across all participants.

Several key issues were identified in the data collected:

Unclear Purpose

Users struggled to understand what the company offered.

Content Overload

Pages felt text-heavy and tiring to read.

Visually Unappealing

The design felt blocky and lacked visual interest.

Poor Link Placement

Important links like "Learn more about us" were hard to find.

Limited Navigation

Menu options were too few, restricting site exploration.

Lacked Personal Relevance

Content felt generic and didn’t speak directly to user needs.

4. Brand Guidelines

As identified earlier the company had visual inconsistencies with their brand. It was important to create a classification of components to help the company to develop a superior user experiences and to strengthen their brand.

It became clear that the company’s branding lacked visual consistency. Different departments were using different colours, fonts, and layouts, which weakened brand recognition and impacted the user experience. A design system was needed to fix these issues and create a more unified and professional online presence.

The first step was to define a clear set of rules and visual standards. This involved building out the core foundations of the system, including:

Grid System

A flexible layout structure was created to keep content aligned and consistent across all screen sizes.

Colour Palette

A refined set of brand colours was introduced, designed to reflect the company’s personality while maintaining accessibility and contrast.

Typography

A consistent type hierarchy was developed, with selected fonts and weights used to create clarity and improve readability.

Iconography

A standardised icon set was crated to replace mismatched symbols. This ensured all icons felt part of the same family and supported a cleaner interface.

The brand guidelines established a consistent visual identity that strengthened the overall brand presence and enabled teams across the business to work more efficiently by following a unified set of guidelines.

The Grid

Colour Palette

Typography

Iconography

5. Wireframing

After completing the majority of the user research, the focus shifted to sketching initial wireframes. Early layout concepts were explored through rough sketches to establish the overall structure and flow.

Once the basic layout was agreed upon, mid-fidelity wireframes were created, guided by the design system’s established rules and principles. These wireframes provided a clearer, more detailed representation of the site’s structure and key elements.

Some Sketches and Wireframes

Usability testing was then conducted with the same three participants. Valuable feedback was gathered, highlighting areas for improvement such as navigation labels and the placement of page titles. Overall, users found the site easy to use, but small adjustments were needed to enhance clarity and ease of navigation.

Several design iterations followed, incorporating user feedback to refine the wireframes and ensure all necessary features were included. Once the wireframes’ functionality was confirmed, the process moved forward to the visual design phase.

6. Final Design

To immediately capture users’ attention, a bold hero image section was designed featuring key links for easy and quick access. This approach aimed to build user confidence and trust in Close Brothers from the beginning.

Scroll Here

New Homepage

In addition, several other important improvements were made to enhance the overall experience:

Simplified Navigation

Menu options focused on what users needed most, making it faster and easier to find key info.

Clean, Streamlined Interface

Clutter was removed to create a smooth browsing experience that guided users easily.

Concise, Clear Copy

Text was shortened and simplified for quick understanding without overwhelming readers.

Effective Use of White Space

Generous spacing improved readability and gave the site a fresh, open feel.

Refined Brand Identity

Colours, fonts, and icons were polished for a modern, unified brand look.

Intuitive Interaction Design

Interactive elements and buttons were optimised for clarity and ease of use.

Together, these changes created a more engaging, user-friendly website that strengthened the Close Brothers brand while delivering a seamless and confident user experience.

Once the testing had been completed and the final refinements had been made to the design, a rollout was proposed to migrate all the old pages to the new design template. Below are examples of the new design, shown alongside the original pages for comparison.

Homepage

Insights Page

7. Branded Marketing Assets

Following the success of the website redesign and the launch of the new brand guidelines, the Financial Wellbeing 2019 campaign served as a valuable testing ground to apply and refine these visual guides. A brochure and infographic were developed with a more engaging and creative design approach, helping to unify communications across departments and showcase the refreshed brand identity in action.

These assets made use of consistent typography, colour schemes, iconography, and layout structures established in the design system. Key messaging was visually simplified, making complex information easier to digest for both internal and external audiences. The refreshed materials helped reinforce the Close Brothers brand across print and digital channels, enhancing recognition and maintaining a professional, consistent visual presence.

Brochure

Scroll Here

Infographic

8. Conclusion

This project was a valuable journey that brought many lessons and achievements. Over five months, a comprehensive redesign was completed, strengthening both the visual identity and user experience of Close Brothers Group’s online presence. The process highlighted the crucial role of collaboration, as working closely with different teams and adapting to various perspectives helped shape a consistent and effective solution.

Equally important was the emphasis on research, which grounded design decisions in real user needs and uncovered key pain points to address. This research-driven approach ensured that the final product was not only visually appealing but also highly functional and user-friendly. Overall, the project reinforced the importance of balancing creative vision with practical insights to deliver meaningful results that build trust and engagement.