vintage photo of scientists in a lab examining a test tube
Project

CCDC

CCDC Publications page from website on a tablet, white modern web design on a strict grid

About this project

We leant on a strict grid and pared back branding to create a modern website that appeals to a scientific audience. To ensure scalability we utilised a headless architecture, linking a Wordpress backend to a React based front-end.

Services Showcased

UX

Branding

User research

Design Systems

The Superstar software page of the CCDC website, modern white web design with left and right sidebars
A full page screenshot of the CSD-Discover page from the CCDC website highlighting the grid with green and pink grid lines overlaid

Scientific Concept

We conducted user interviews, speaking to the team at CCDC and their users, which includes scientists, researchers and pharmaceutical companies from around the world. We observed that scientists typically rely on methodical approaches grounded in rules and structure, which informed our decision to create a design system with strict parameters and a simple grid. Rows are in 1, 2, 3 or 4 columns with the grid being visually identifiable on most modules.

With almost all elements locked to column widths the inherent structure that props up many modern websites is foregrounded as a design feature.

This satisfies their users expectation for rules and structure but also echoes the website's purpose. It stands to reason that a global leader in structural chemistry data would show users the structures that hold it together.

A webpage on a laptop showing software documentation, filters, pagination and different document types

CCDC offer a range of solutions that allow users to interact with their library of over a million chemical structures. Our job was to create an interface that allows users to find the correct solution for them in a sea of overlapping use cases and fields.

Extracted UI elements that show how the CCDC filter their products

We spoke with stakeholders that represent many of their unique target personas to understand how users were already interacting with the site and to identify opportunities for improvement.

This is one of my favourite stages of discovery. You start a project with a client like CCDC and understanding what they actually do can feel like a mountain to overcome. If the agency and the client fully engage with discovery, by the end everyone understands each other more. With CCDC it was a joy to learn about software that I would never otherwise know about. I came away from discovery feeling like I’d pieced together the puzzle that is the Cambridge Crystallographic Data Centre and could be confident that I understand the software they offer and the people that would be using it. CCDC bought into the process and committed to getting the most out of it.

The CCDC software suites page mocked up on an iPhone
CCDC homepage showing a strict grid and hero elements breaking out of the grid for impact
A screenshot of the whitepapers and case study carousels from the CCDC homepage
Projects

Next up...