Currency Pulse Uncovered

Wired’s coveted monthly dataviz spread has been a source of inspiration for many up and coming information designers. We’ve had the honour a fair few times over the years. A trip back through the archives reveals Set Reset spreads visualising everything from submarine cables and satellite weaponry, to COVID capitalists and Dogecoin debates.

Wired are a great match for us. They provide fascinating datasets paired with the creative freedom that few clients are able to extend. Our latest collaboration with them leads us into the financial sector for their limited edition publication.

Designing for print is a challenge in itself. Two physical IRL paper pages to fit thousands of rows of data, with no buttons, hovers, taps, swipes, or zooms like those in the digital world that help tell the story. A classic dataviz project. Here’s how we did it…

Read the brief, assess the data.The brief: visualise five years worth of global currency transactions, bringing to life any key stories or insights that we uncovered along the way. Sounds simple enough, but our dataset was over 71,000 rows long. A complex story waiting to be unravelled.

The spreadsheet included country codes for the debit currency (location of where the client account is held), origin currency (location of the original currency country) and destination currency (location of where the client

is sending the transactions); along with their regions, the total number of each transaction, the notional value

of each transaction and the business month.

We had the data, next we went searching for stories. We sanitised the sheet, restructured sections,

calculated additional data, identified outliers, located any broken bits and then fixed or bypassed them.

Currency Pulse dataset within Google Sheets

We created some narrative hypotheses to test:

●

Show the highest value per transactions per country or month of the year

●

Visualise how COVID-19 affected the number of cross-border transactions

●

Identify which currency pairings had the biggest increases over the last 5 years

●

Uncover if events in crypto had any effect on fiat payments

And some questions about the magazine and how our visualisation would sit alongside other content:

●

Who is the audience for the magazine? What region are they from? What industries are they in

aside from financial? What do they care about? What might we assume they know already?●

What are the themes of the surrounding content? Are there any threads from other articles that

would make an interesting connection?

●

What do the adjacent pages look like? How can we integrate some of the existing design styles so it

doesn’t feel stand-alone?

●

What are the print specs? Which colour profile? True black or rich black? What type of paper? What

is the tolerance for fine lines and small type?

●

Will the magazine be viewed digitally as well as print? If so, in what format? Where will it be hosted?

We interrogate the brief and aim to understand external factors like these long before we begin ideation.

This information gathering is crucial to understand requirements, uncover any limitations and set objectives

for the project at the outset.

See the data, find the story.

Google Sheets graphs

T o test our hypotheses, we created a visual prototype. We used the chart builder tool in Google Sheets,

which allowed us to see the shape of the data, identifying patterns, outliers and points of interest.

For example, the green spikes in the screenshot above immediately highlighted a pattern of abnormal

transactional increases within the Chinese Yuan in 2020 and 2021. An unusual finding considering the

historic years. Our hypothesis before visualising the data was that all currencies would decrease within the

COVID-19 years, however together with the Wired insights team we were able to uncover the reason.These particular peaks were due to an increase in product development from China as consumers were

actually buying more during lockdowns.

It’s exciting exploring outliers like these. You’re taken on a journey that takes you deep into the data to

unravel the meaning behind them. As we delved deeper, we uncovered many patterns and trends that were

revealed through our chart prototypes. Some of these included:

●

Mexican Peso (MXN) and Indian Rupee (INR) became increasingly popular currency exchange

destinations

●

Transactions in Mexican Peso (MXN) were the least affected by Covid

●

A quarter of the total transactions were exchanged into Euros (EUR) without much fluctuation

Remove technology, sketch ideas.

Initial sketches for Currency PulseAnother tried-and-tested rapid prototyping method that we used was an analogue classic. Pen and paper.

Sketching out ideas creates a discovery space that’s not restricted by technology. It allows us to experiment

with potential layouts, while helping to find the most interesting narrative.

An initial idea was to use a bump chart to visualise the top 10 cross border currencies over 5 years (left page

in sketch) but when mocked up with real data, the small variation of bumps per year provided an

uninspirational and uninteresting spread. It looked boring. One type of chart clearly wasn’t enough to show

the nuances of the data. So we divided the spread into three distinct sections, each drilling into further detail

from the section prior.

1. All currency origins that flowed into the top 5 currency destinations

2. Those 5 currency destinations visualised to show volume and transaction detail

3. A timeline showing the year on year change for each other those top 5 currencies

Dividing the spread resulted in a more compelling narrative and from a data perspective, and allowed us to

include increasing levels of information density, from a high level overview to a deep dive within two pages.

We tested some chart types and found three that fit the data stories we were trying to convey:

●

Sankey diagram: to show the flow of currency transactions from their origins to their destinations

●

Area chart: to compare scale for our top five chosen currencies

●

Line graph: to show year on year changes across the desired timeline

Custom scripts, a Set Reset secret

Many Adobe applications have a built-in feature called Scripts. A script is a small code snippet that tells the

application to perform certain tasks. Running a script can be as simple as automating two steps of a process,

or as complex as programming an entirely new feature. It’s a powerful tool that can be used to control and

automate workflow, extending the functionality of the application.

For example:

| ‘select-objects’

- selects objects on the active spread by their object type

| ‘sort-paragraphs’

- sorts the paragraphs in the selection alphabetically

Custom scripts are written in JavaScript and are fantastic for filling specific functional gaps; however they

aren’t easy to manipulate and can only be used within Adobe’s family of applications.Apple’s Script Editor on the other hand, can be used to control similar manipulations while also allowing

multi-application access. Meaning you write a script that takes data directly from Apple Numbers, opens up

Illustrator and uses the data to generate shapes. We often use this method when visualising complex

datasets. It’s a little hacky, and nothing that could not be accomplished with D3, but Illustrator is our go-to

tool for static vector visualisations so we have naturally developed a set of tools for it over time.

In the case of our Wired visualisation, it enabled us to create accurate wireframes which we then build upon.

The scripting set up does take time, but it’s essential when dealing with large datasets that would be a

nightmare to visualise with the standard charting tools or even brute-force manual plotting .

Timelapse of script running (gif)

Remove distractions, wireframe the spread

But we don’t just do one wireframe. We design multiple layouts looking for a solution that is both visually

compelling and intuitive to understand. Design and narrative of each of the three sections were fine-tuned

through iterative wireframing.Wireframes for Currency Pulse

Sankey Diagram: Our original design included the full list of all origin currencies ordered by size, however

because there were so many it proved difficult to read. Not only was the font size getting too small for print,

but this approach required the viewer to know every country’s currency code. T o overcome this challenge,

we sorted the currency codes into regions allowing an easier overview and contextual insight. We also only

visualised currencies with a value of $1billion or more. This decision reduced our list to 39 currency codes,

and from a font size of 4pt to 8pt. Much more appropriate for print.

Bubble chart: In one of our early wireframes (shown in the gif above), we visualised the top 5 currency

values as bubble charts down the centre. It was accurate, but didn’t show enough context to allow

interesting comparisons. We split the bubbles in half and create two half moons - one showing the total

value of currency transactions, and the other showing the total volume. This was interesting as you could

see that although USD provided nearly half of all global total transaction destinations, it was the Euro that

had the top number of transactions.

Timeline: Visualising the percentage growth for the top 5 currency transactions across a timeline was

something we sketched from the early stages. However when adding accurate data, there wasn’t enough

contrast in the data to provide a compelling story. Of course transactions would increase over time - that’s

how the economy works. It also didn’t show anything of interest when COVID-19 hit, something we had

hypothesised in early stages. We experimented and visualised the timeline in a number of ways but due to

the inherent size of America, we kept on coming across problems with scale. The USD dataset was huge in

comparison and completely shrank the other four currencies down, reducing the detail dramatically. T o

overcome this, we calculated the year-on-year growth (%) which when visualised, showed the peaks andtroughs of transactional movement.

Establishing hierarchy with colour

Wireframes complete, we moved into the visual design stage - adding colour and design detail. Colour is one

of the most important elements in any data visualisation. It is a functional tool that can be used to establish

hierarchy, encode data, lead the eye and bring key elements to the forefront of the viewers attention. From

an emotional perspective, colour communicates mood and tone of voice, as well as established cultural

associations to help the reader understand what they’re looking at that little bit quicker. Simply put, colour

will make or break a piece.

Hierarchy is important to any piece of visual design but especially so with data visualisation. Using both

colour and form, we emphasise key narrative points to guide the viewer around the piece, while showing

them what we see in the data. We were focusing on the top 5 forex destinations so exaggerated these labels

to draw readers in. A quick scan gives the viewer an idea of the content, long before they read any copy.

In a visually complex spread like this, it’s important to show the reader where the key points are, but it’s

equally important to layer in additional insights to support the main narrative. Within our sankey diagram on

the left, we added a layer of information by sign-posting the top currency pairings. In terms of visual

presence on the page it’s a small detail, but one that provides additional context for those who want it.Currency Pulse final visualisation

The final spread

The result: an elegant double-page data visualisation that conveys over 71,000 rows of impenetrable

financial data at a glance.

The finished visualisation exhibits a minimal, yet bold styling that clearly communicates the patterns of

multinational payment transactions. As the reader moves from left to right, they are guided through the data

from high-level narrative to more specific details and insights. Structuring the narrative and data this way

allows the skim reader to gain a broad understanding quickly, while providing granular detail for those

wanting a deep dive.About Set Reset

Set Reset is a design studio with data at its core. Based in London, working internationally, we transform

data into compelling stories that fuel growth and create opportunity. Using strategy, design and

cutting-edge technology to reveal the invisible, encode the fantastic and command attention from even the

most distracted and time-starved audience. We’re reimagining how people see, experience and interact with

data.

If you have an interesting story to tell using data (or just want to say hi) get in touch, we’d love to hear from

you.

Set Reset