Intro
Close Brothers Asset Management provides a range of financial advice, investment management and online investing services, helping clients to secure their financial future.
Challenge
The Close Brothers website last had a rebrand 5 years ago and it was felt that the look and feel was outdated. We were asked to refresh the branding and to improve the UI to make it more modern.
Solution
The website would be refreshed through vigorous research and testing, but due to inconsistencies with the branding a set of new guideline would need to be created to strengthen the brand.
1. Introduction
Close Brothers Group were seeking to create an identity that was uniquely theirs and felt that the look and feel as it stood was very dated. At that point the last rebranding happened 5 years ago and so a refresh was needed to make them more modern.
Although they had a logo, their colour palette and font system were not instantly recognizable as their own. Looking at all the brochures, flyers and collateral that various departments had created it was clear that the pieces looked completely unrelated in design. There were a lot of inconsistencies, like some were using illustrations as the main hero while others had photos. With Illustrations different styles were being used, for example with the air balloons, one had a sketch effect while the other used solid colours. Some brochures had the curve feature, while others were using the lens feature. These inconsistencies were major issues and would likely create confusion with the audience, making it difficult to establish long-term trust.
Overview of all the marketing materials revealed a lot of inconsistencies
After looking at the website the following conclusion was made:
The website looked outdated.
There were no proper call to action on the website. It felt like an informational website.
There were no trust building when the user saw the site for the first time.
There were too much content on the page and it looked too busy.
The brand values of the company were not clearly visible.
Original homepage
2. Competitor Analysis
Competitor companies were profiled including PremFina, Global Asset Finance, NEX Group, Lantern, Virtu Financial and Praedicat
to identify their core service values and to see how they positioned themselves in the market.
Common features that were found across these websites included the use of hero images that covered the top half of the page, the placement of the navigation menu, the use of block content boxes and white space. Coincidently most of these sites were using orange and yellow as their colour palette, which felt distracting.
Competitor homepage screens
3. User Research
For the user interviews 3 participants were picked to get a better understanding of how they interacted with the current website. These participants were long term customers of Close Brothers Group.
Several issues were identified in the data collected and an affinity diagram was created to map these.
Affinity diagram created from user research
Some of the major pain points that were identified included:
Not immediately clear what the company was offering or what they did.
Very busy with a lot of copy to read.
Blocky and not appealing to look at.
Important links like 'Learn more about us' were found at the bottom of the page.
The menu options were very limited for exploration of the site.
4. Design System
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.
The first task was to establish the rules and principles of the design system through its core elements: grid, colour, typography and icons.
The grid
Colour palette
Typography
Icons
5. Information Architecture
After assessing the current system and talking to the users, a summary was created to document the learnings about the information architecture in an easy-to-understand, visual format.
sitemap
The results of the research confirmed that the overall UX of the website could be improved. Users were not happy with the navigation and the overall content structure. In addition, the results indicated that the information architecture flaws were the main source of problem.
One of the main issues discovered during the user testing revealed a lack of transparency about the service and product that were being provided. The menu system had redundant options that didn't help with understanding the service and limited the discovery process.
As it stood, having options like ‘Individual’, ‘Employer’, ‘Professional intermediary’ etc felt like closed options that didn’t add anything useful. Great care needed to be taken to choose the words for the navigation as it would make a huge difference when users decide if the navigation items related to their goals. The menu should be a gateway to express a company’s brand and should have important information available from the beginning like ‘Who we are’, ‘What we do’ and ‘How can we help’.
A little more structure and organization was needed to help with the look of the website. Information in the blocked boxes was simply a repeat of what was being offered in the menu options that didn’t add any value to the user. Essential information needed to be displayed on the homepage. Also, at first glance the site felt overwhelmingly content heavy, which could potentially lead to a cognitive overload for the user.
6. Wireframing
With a bulk of the user research out of the way, it was time to start sketching the wireframes.
Some wireframe sketches
Once the layout had been settled it was time to create the mid-fidelity wireframes. To help with this, the rules and principles of the design system were used, which was identified earlier in the research.
Initial wireframes
Usability testing were conducted with the same 3 participants. Some crucial feedback were collected to help with the decision of what to include in the final user experience before jumping into the next iteration of the design phase.
Overall the users had an easy time using the website, but a few small issues needed to be addressed with the navigation labels and placement of page titles. A few rounds of design iterations were completed based on testing and feedback to ensure the wireframes included everything that was needed. Once the functionality of the design was finalized, we moved on to designing the user interface.
7. Final Design
In order to immediately catch the attention of the users, a hero image section was designed with important links available for easy access. By doing this, it ensured the users would feel confident and have trust in Close Brothers. In addition to this we also:
Changed the menu options, by having selections that were important to the users.
Bulit a clean and streamlined interface.
Used less copy and made it easier to digest information.
Employed plenty of white space to allow content to flow better.
Refined the branding to make the Close Brothers identity more unique and modern.
Final screens
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. Some examples are shown below.
Insights page - before and after
Contact us page - before and after
8. Conclusion
This project was a monumental learning experience in so many ways. Overall the team had accomplished an incredible amount of work over 4 months. A lot was learned about the process, collaboration and about my own skills as a designer.
Two important takeaways were:
1. Collaboration is key
This was a big project with many moving components that required a lot of work. It was important to be aware and open to constructive critique, as well as learn to adapt to other designers’ habits and methods. This project helped me to develop new collaboration skills that would be beneficial for other projects in the future.
2. The importance of research
Compared to previous projects, this was a lot more research heavy. This was seen as an opportunity to strengthen my research skills and to get more involved in the process of learning about the users and their needs.
