Preqin

Preqin provides private equity, private debt, hedge funds, and real estate data.

At Preqin, I contributed to Preqin’s website rebrand by refining its visual identity, redesigning publishing layouts, and building their new Figma design system and pattern library.

Colour in data

Data visualisation is the translation of raw data into visual representations through the use of common graphics such as charts.

The key to successful ‘data vis’ comes from the process of decoding this raw data and selecting an appropriate form of graphic to present it. It should tell a story, getting to the root of a subject in a clear and concise way while preferably being nice to look at. Without it, we would just spend our lives trawling through numbers in spreadsheets.

Not many factors contribute more to presenting strong data vis than colour. The role of colour in data visualisation is often misunderstood. Some people think that the application of colour is arbitrary and that colours could be picked in an arbitrary fashion, but this isn’t the case. Colour helps us make sense of complex information, and its uses are systematic and tied to specific psychological principles.

Users:
Investment analysts, portfolio managers, investors

Usability testing:
A/B testing, we measured engagement rates, time on page and drop off rates

Design principles:
WCAG standards

Brand associations with data

Leading media outlets such as The Economist and Financial Times rely on data visualisation to support news stories and opinion pieces. Their data is presented in a distinctive and recognisable style achieved partly through the colours that have become associated with their brand.

Figure 1. Examples of strong brand identity in data visualisation

Creating Preqin palettes

There are a few factors to consider when building out colour palettes for data. Unfortunately, it’s not quite as simple as picking your favourites. Firstly, we decided to build out both categorical and sequential palettes.

A categorical palette is used when variables in the data have distinct labels and are without inherent ordering. Examples include country, industry, and gender. A sequential palette is used when the variable is numeric or has a meaningful order. An example could be the breakdown of assets under management.

We incorporated the core brand colours, ‘Midnight Blue’ and ‘Fuchsia’, supplied by Pentagram; the design agency behind our rebrand. From these two colours, we selected five more that had a similar level of hue and saturation. It’s no good using a soft pastel colour with a bright bold colour, as when placed side-by-side in a chart, the brighter of the two will always look more important. Similarly, it’s advised to avoid using traffic light colours as they carry inherent associations (positive, warning and negative).

Figure 2. ‘Sequential’ scales expanding on brand colours.

From the resulting six colours, scales were built out by adjusting hue and brightness, providing ten tints for each; ranging from light to dark. These were our sequential palettes — to be used whenever ordered or numeric information is coded. In Figure 2, the red line denotes colours that have enough contrast against a white background to be visible for those with colour blind deficiencies — more on that to come.

At this stage, our sequential palettes were more or less finalised. The good news was that a categorical palette of 14 colours could be cherry-picked from these tints and we now had 70 to choose from. The bad news was that we hadn’t touched the surface in regards to accessibility.

Colour accessibility

Colour blindness is a common trait and affects approximately 1 in 12 men (8%) and 1 in 200 women (0.5%). Around 4.5% of the entire UK population has some sort of colour vision deficiency.

As part of Preqin’s promise to adhere to Web Content Accessibility Guidelines (WCAG), this was a key consideration and we were determined to ensure that colour in our data visualisations held meaning for everyone who views them.

There were three accessibility considerations when selecting our categorical colour palette;

Differentiated: they should have a sufficient visual contrast among themselves (optimised for all colour deficiencies).
Diverse: as a set, they should avoid false associations or correlations due to similarities in brightness or hue.
Sequenced: in order for the palette to be effective in visualisations with as few as 2, and as many as 14 categories, the colours need to be sequenced in such a way that differentiation and diversity are evenly distributed.

We used the online ‘Viz Palette’ tool. created by Elijah Meeks and Suzie Lu, to evaluate the results for colour blind deficiencies. Viz Palette generates colour reports visualising the just-noticeable difference between colours. As you can see from the below examples, there were quite a few issues from our early iterations.

Figure 3. Deuteronomy, Protanomaly, Protanopia, and Deuteranopia are the most common types of colour blindness. The %’s here refer to the percentage of the population with this type of sight deficiency. Colours that are difficult to tell apart are linked with increasingly thick arcs.

Final revisions and application

After plenty of rearranging chairs and a number of iterations, we landed on a solution that required some manual curation and a little flexibility on the rules. It was nigh on impossible to create a palette without any ‘arcs’ generated by the Viz Palette tool (although we got pretty close) so we included a few shades of green towards the end of the sequence.

Our final result is a categorical palette with each colour above 3:1 contrast against a white background and has an average of more than 2:1 contrast between neighbouring colours. By evaluating our selection using the Viz Palette tool, we also ensured the overall effectiveness of our palette, measuring the contrast of all the colours simultaneously.

These examples show schematic ways the chart colours may be applied. They can be used interchangeably alongside one another or separately. Data can be presented through the use of a single colour and tints or in multiple colours from our categorical palette.

The end result is a set of colours that are both accessible and reflect the bold rebranded identity with Preqin as a market leader.

Colours in data

Data visualisations

The challenge

One major challenge we faced was finding high-quality stock images. Most of the options on stock image libraries are subpar and require a lot of time and effort to sift through. Before the rebrand, we used images of city buildings to represent Preqin. While this worked for a while, it didn’t convey the warmth and human connections that are integral to Preqin.

Where is everyone

With the rebrand, I wanted to make sure that Preqin’s warmth and focus on business relationships and human connections came through. To achieve this, I created a people stock library and a set of data visualizations to supplement our creative assets. This helped us better communicate the essence of Preqin to our audience.