Generation study

Overview

The aim of Genomics England’s generation study is to identify rare genetic conditions in newborn babies, by sequencing and analysing their genomes. The study could contribute to improved outcomes and quality of life for babies and families.

My role was to create the Generation study website where expectant mothers and families could learn more about the study and if ready, register their interest to join.

What was delivered

Alongside a content designer I journey mapped the Generation study website based on the user insights gathered during the discovery phase and on a series of hypotheses statements (which we would test against). The output from this session was a set of lo-fi wireframes which outlined the hierarchy, navigation, features, and interactions of the website.

Using these wireframes we applied a content narrative to each page. The narrative followed a paddle, swim and dive model, which allowed us to cater for multiple types of users. Those who wanted to quickly understand the study at a glance and perhaps just watch a video overview and then come back later to join. To those who were further along the process and needed more detailed information about the study, such as the conditions tested, before they felt comfortable to register their interest. 

Using these lo-fi wireframes as a guide, I visually designed the site using Figma.

I worked closely with the brand team to create a Generation study design system that incorporated both Genomics England branding alongside bespoke Generation study styling and components. This design system will be used by the development team when they build the website.

In addition, we ran several user testing sessions with prospective parents using both the mobile and desktop prototype versions of the site. The website went through several design iterations based on user testing insights before the final designs were signed off and made ready for development.

Outputs included 

• Responsive website design (inc mobile, tablet and desktop breakpoints)
• Generation study design system (inc colours, typography, interactions, component and navigation)
• Mobile and desktop Figma prototype used for testing