Evolution of the Digital Catapult Website
Building a home for the UK’s leading digital innovation centre
Building a website for a digital innovation centre isn’t easy. When someone asks “What does an innovation centre actually do?” what’s the best way to respond? How can we best express the sum of our achievements? It’s not hard to list emerging technologies: “We work with deep learning, blockchain, 5G, future networks, virtual reality, cyber security…”
But what do we actually do? At Digital Catapult we have a lot of expertise in many areas of advanced technology, we work on lots of unique projects within industry and academia, we engage with hundreds of startups and scale-ups in order to help them succeed across a bunch of different industries.
Our website needs to paint a clear picture of how we’re advancing the adoption of new technology and helping the UK economy.
Digital Catapult’s website needs to bring all of our work into one place to paint a clear picture of how we’re advancing the adoption of new technology and helping the UK economy. Trying to create such a diverse showcase which is fun and engaging for many different audiences poses some real challenges.
The Team
To face these challenges head-on we’d need to enlist the best! We put together a top cross-functional team, pulling members of our marketing, design and development teams together and putting them in a room until the coffee ran out and a plan emerged.
Information Design
Content is key. Before we write a single line of code, we must first design the information structure for our content. A good structure will be relevant much longer than any one design. Maybe in the future we’ll want to design a version of our site for smartwatch, or for Alexa, or for VR, or on blockchain 🤔. Future designs should not require the information structure to change if we design it properly.
Before we write a single line of code, we must first design the information structure for our content.
What sort of content is a part of our information structure? Our people run projects to accelerate new tech and to boost the UK economy, we write articles about our different technologies, we collect case studies from companies about how we helped them grow, we host events to engage with companies and individuals.
All of the information links together in fundamental ways. Projects have a project lead and blog posts have an author — if we create a Person type (with a name and a role and an avatar) this person can always be recognised as a single entity within the system. If this person ever changes their name, we just need to change it in one place and the whole model remains up to date.
This is called a graph model and it’s the way Facebook keeps its huge body of data together.
It’s really powerful. Structuring all of our content in a way that means we can surface the information required for any task. Like this, we set out to graph the entire Digital Catapult universe.
We set out to graph the entire Digital Catapult universe.
We looked at a number of graph-based content management systems and decided on Contentful. It’s robust, it’s secure and it makes it super easy to load and edit content. The support team there have been great 🤗.
We modelled the entire company’s work in a single place such that it’s completely independent of any one design. Thanks to our superstar content and marketing team, our graph is growing bigger and more powerful every day 💪.
Experience Design
With the graph complete, our crack team of designers could be sure that whatever vision they set out to create, we had easy access to the content to make it a reality.
We have ways of grouping the work we do here at Digital Catapult. We work within specific Industries and we work across specific Technologies but we wanted a more engaging way to greet the visitor than explaining all of this at the start. A way of describing what we are actually doing right now in the clearest most succinct way possible. We wanted to show rather than tell.
We wanted to show rather than tell.
When a visitor first lands on the site we give them a guided tour through some of the Projects and Activities we are currently working on. We always think in terms of our broader strategy but these projects are our heart and soul; the work we’re sweating over every single day. These are the things we are doing to help real people and boost the UK economy. When a visitor first arrives, we show them a beautiful snapshot into the projects and activities we’re currently promoting using simple inspirational imagery.
We keep this showcase regularly updated. It always remains a bright, engaging snapshot into the world of Digital Catapult on any given day.
The project showcase is a bright, engaging snapshot into the world of Digital Catapult.
When you first land on the Digital Catapult website and start scrolling down, the screen moves to the left 🤯. We did lots of user-testing to reassure ourselves that this bold design wasn’t too jarring or confusing. When we started to build this horizontal showcase, we were careful to do so in a way that respected accessibility, for example, if you press the up and down keys on the keyboard the page will behave as usual.
After taking the visitor on a tour through the showcase, the homepage goes on to explain our mission and the technologies we explore. Each technology has a dedicated landing page highlighting relevant events, projects and articles.
We designed similar landing pages for our target industries and pages for many of the items in our information graph; blog pages, team members, events, regional partners. We are extremely proud of the work we do here, and we want to make sure the entirety of this effort is communicated in a way that’s clear, transparent and easy to navigate.
Visual language
This project to build the website was a great opportunity to create a new visual language. We created a set of colours and styles, hierarchies and relationships, ideas about form and function that can apply to our current and future design work. We’ve built new projects and an entire suite of brand guidelines from this language. If you ever see a talk from a member of our team at one of the many events or meetups we host or attend, you’ll recognise this new language in the slide-decks, leaflets and business cards that you see. Visually speaking, Digital Catapult is a unified whole and the website design reinforces this.
Development
So, we had our information graph stored in Contentful, we had a stunning new visual design language completed as a set of responsive storyboards and styleguides, we just needed the developers to pull the content and the design together. For each page required by the design, the developers needed to reach into the graph, pull out the required information and set it onto the page using the latest frameworks and libraries.
Our backend is our information graph and we used GraphQL to dive in and fetch the content. GraphQL is an incredible technology developed by Facebook and we were one of the first teams to use it in production with Contentful. Anthony and I had a great time giving a presentation about our experiences with GraphQL at the Contentful London Developer meetup to help out anybody in the community considering doing the same thing.
I mentioned that the information graph would be used for more than just the website. We also used it to build a separate feed that our friends over at Innovate UK use to load our content into the stream of Catapult Programme news and events.
The Future
We published our website early In development and have been iterating on bugs and features in the weeks and months since. We use data — usability metrics and traffic analytics — to inform the direction of development (we love LEAN development here at Digital Catapult). We constantly work to speed up the site, make it more accessible and make it work across more platforms and browsers. We will continue to do so.
In the background we keep adding and extending our information graph; we recently undertook a project to make a comprehensive list of every company working on 5G in the UK. All of these companies were added to the graph.
The development process was fun and fast paced, our code is clean and well structured and the design system that emerged is being applied in all areas of the company. We are really pleased with the effort. Thanks to everyone who brought this website to life and helped to build Digital Catapult a digital home. ❤️
