Furthermore
a fresh perspective

The Hub - Design System

  

Creating a new design system for The Hub

A brand new look and feel schematic adaptable for multiple brands and business units


Intro

The first thing we did was to create a structure and a strong design system for The Hub. With a website lacking hierarchy, engaging interactions and a strong visual identity that needed to be adaptable for different brands to be incorporated into, we saw great possibilities. This meant that when we designed and developed the key components, hover states and visual hierarchy we had to keep in mind how the different colours schemes and branding elements were going to work with the core UI elements of the Hub. Our design system had to allow for uniformity across story creation, data analysis and the discovery of new insights.

Our Approach

Throughout this project we worked together with the team from Hall and Partners and also representatives from their key clients to ensure we captured feedback throughout the entire process. 

We started off with a research sprint where we looked at what competitor and marketplace brands, and compiled a large canvas illustrating things that we liked and didn’t like, what we should keep, lose and gain from the existing Hub brands and designs and sketched out ways we could push the visual design system further.

Some pages from The Hub's styleguide that we have create and keep updating and adding to though out the project.

Some pages from The Hub's styleguide that we have create and keep updating and adding to though out the project.

Once we had defined a design system the team was excited by we then set about cross-platform and cross-brand testing.This enabled us to set rules, states, and functions that would help us throughout the project to create functionality in other places. 

The Hub has large amounts of data and content that needs to take centre stage, be easily scanned and allow for efficient deep dives into the detail. We worked to remove unnecessary visual elements and enhanced legibility of data by  giving all information the right appropriate amount of breathing space. 

The Results

We took a cluttered and confusing interface to a more modular, practical, dynamic and adaptable look and feel that allowed for a more streamlined environment for retained internal and external staff to work in that was more easily sellable and has helped Hall & Partners reach their sales and growth targets. We the interface includes “application-like” qualities. 

hall-and-partners-the-hub-insights-news-design.jpg
Data view closed vs. expanded.

Data view closed vs. expanded.

We created a branding system so the Hub could be tailored to all different brands need and visual identity. Above you can see how the Insights News Page looks for three different clients with our new visual design. 

We created a branding system so the Hub could be tailored to all different brands need and visual identity. Above you can see how the Insights News Page looks for three different clients with our new visual design. 


Like this? Read this next:

The Hub - Creating and publishing a story
The creation of a story allows authors to add their own infographics, images, videos as well as pull in statistics and graphs to highlight key data movements.

The Hub - Explore and compare data
Read more about how we allowed users to deep dive into complex data for comparison and investigation.