net

Information download A PDF version of every article can be downloaded either as part of the full report or

as a custom version via the save or filtering functionality

Font choice The type is really key to the design. The bulk of the content is in Work Sans, a clean sans serif

from Google’s web fonts. This is complemented with Komu A and Space Mono to add a personality

How we built

Can you talk us through the site’s main
design features?
JL: We were eager to create a distinctive
aesthetic that felt authoritative and
precise but also enticing and – for want
of a better word – cool. That had to be
balanced with the fact that there was a
huge amount of information that needed
to be presented clearly.
This all translated into a striking blue
as the lead colour coupled with data
type illustrations that allude to precise
measurement and contours and, where
space permitted, bolder use of type as
an image to give it a more distinct and
designed feel. Finally we added little
bits of background animation on the
overview pages and transitions just to
subtly elevate the overall sense of quality
as you move through.

How can users interact with the data?
MA: To help with picking through
the data in the report, users can
filter content based on topics they’re
interested in or save their favourite
articles. Both filtered and saved content
can be downloaded as a customised
PDF. Many of the charts have multiple
datasets, with a drop-down menu to
switch between them and dedicated
download buttons.

Talk us through some of the
technologies running the site
MC: The site consists of two parts - a
headless CMS on the backend and a static
HTML site for the frontend. The backend
is built in Python with Django, Wagtail
CMS and Django REST Framework. The
frontend uses React and Gatsby, pulling
in the CMS data to create a standalone
HTML site. The charts are created with
Highcharts, as well as some shared JS
to build chart previews in the CMS and
the full charts on the frontend. Finally
there is an AWS Lambda function to
create customised PDFs on demand via
the frontend.

What did your testing process involve?
Did it bring up any major issues?
MA: Testing took place throughout
the project, starting with prototyping
key interactions. During the build we

wrote unit tests to ensure important

functionality worked as expected, along

with snapshot tests to catch unexpected

changes on the frontend. From fairly

early on we had an auto-updating

development site that made ad-hoc user

testing possible throughout the project.

All of these steps turned up their own

issues: the user testing in particular

made a big positive impact on how the

site functions.

What sort of response has the site had?

JL: The overall response has been hugely

positive, which we’re obviously thrilled

about. From a client perspective the

top-level goal was to really establish

the credibility and reputation of this

report and, by association, Atomico. The

media appetite, the site traffic (over 80k

visitors in the first two months) and the

general feedback they’ve received all

point towards this site having done that.

What’s perhaps more exciting is that all

that attention does subtly start to shift

the way people feel about European tech.

That’s down to the quality of the report

Atomico has created and the coverage

it’s received but I like to think the design

and build has played a key part too.