Loading

0

UX design Visual design Front-end Design leadership

UKRI websites consolidation and revamp - Alpha and Beta

Clients

UKRI (UK Research and Innovation)

Employer

dxw

Role in project

Interaction Designer

Activities and tools

Prototyping Interaction design GOV.UK Design System GOV.UK protoyping kit Miro WordPress

Year

2019-2020

Consolidating 10 websites into 1: UK Research and Innovation

We worked with Content Design London to build a new consolidated web presence for UKRI. We converted 10 websites into 1, making the content more accessible for users in the research community.

UKRI screenshots

UKRI screenshots

UKRI councils

UKRI councils

What was the problem?

UK Research and Innovation (UKRI) is made up of 7 research councils, Innovate UK, and Research England. Its main purpose is to invest in and encourage research and innovation across the UK.

To make information for users more accessible and consistent across all the organisations involved, UKRI decided to consolidate their existing web presence. That meant turning 10 websites into 1, and creating one, centralised funding finder where users can find all funding opportunities in one place.

Design goals

We identified the following goals to help shape the development of the service:

  • improve the experience of finding funding
  • provide UKRI teams with the skills, tools, and capacity to transition the legacy council websites onto one website
  • create high value content that meets user needs and is consistent across councils
  • create one web presence for UKRI and the councils
  • successfully transition ukri.org onto the new site
User roadmap

UKRI roadmap

Funding

In alpha, we mapped the user journeys of researchers to understand problems with the current websites. We also identified ways we could improve the experience for those applying for funding. We designed a funding finder prototype based on our user research findings and iterated this during beta to make sure it met user needs. As a designer who are also comfortable in WordPress development, I collaborated with the lead developer of the project and we decided to set up a WordPress site directly for prototyping purpose, mainly because WordPress is the platform / tech choice we agreed with the client for this project.

UKRI prototype - home

UKRI prototype - homepage

UKRI prototype - funding

UKRI prototype - funding listing page

We also worked closely with the UKRI funding service team, who are building a new funding application system, to share our findings and to make sure the experience and metadata mapped between the 2 products.

We then created a new funding opportunity workflow and template. We tested these with both writers of funding opportunities and users so that the right content was presented via the right channel.

Content design and strategy

We teamed up with Content Design London to draft a content strategy. The UKRI web team publishes web content from across the councils, everything from blog posts to funding guidance and policy documents. The team needs a robust content strategy to allow them to both accept and reject new content.

Content Design London held 2 workshops to draft a content proposition. In beta this was iterated and formed the starting point for new content workflows.

In alpha, we created content transition plans, reviewing content by theme and what users needed from the website. From here we made decisions about whether to redesign it, keep it as it is or to archive it.

We used Google Analytics data and user research to make our decisions. In beta, we turned these content transition plans into a backlog of work for the content designers to begin work on, prioritising the high-value content first.

Councils

Our user research in alpha showed us that users of the current sites tend to think in terms of councils. For the new website to work, we needed to make it simple to find both UKRI content and council-specific content.

In alpha, we did card sorting to test our hypotheses about how users group and find content. From here we drafted a version of the information architecture on the website and iterated based on user research in beta.

UKRI card sorting

UKRI card sorting

As our understanding grew, we were able to begin investigating what a council area of the site might look like. We identified what the user needs were and held ‘how might we’ sessions to figure out potential solutions together. These ideas turned into prototypes and eventually features on the new site.

Design iterations

We conducted six sprints during Alpha to explore concepts and twelve sprints during Beta to implement the solution. Since we were building both a public-facing interface for organisations seeking research funding and a publishing tool for internal users, our design iterations were centred around these user groups throughout the project.

As the interaction designer, I was responsible for the layout and WordPress templates for all pages, with a specific focus on:

  • Homepage
  • Funding finder
  • Individual funding page
  • Individual council pages
Visual hierarchies

Visual hierarchies

Our researcher led a user journey mapping workshop at the client’s office to outline the funding search journey with UKRI. I then translated this into wireframes, a front-end prototype, and the final WordPress pages.

User journey mapping workshop

UKRI User journey mapping workshop

Funding finder wireframe

Funding finder wireframe

Funding finder design

Funding finder design

Funding individual page prototype iteration

Funding individual page prototype iteration

Funding individual page final design

Funding individual page final design

Visual design collaboration for the new branding

The most challenging aspect of the project for me was the visual design.

Unlike content and interaction design for key user journeys, applying the updated UKRI branding was solely my responsibility. UKRI had commissioned a third-party branding agency for a complete brand revamp, which focused on the overall UKRI branding rather than the website specifically. Additionally, the agency did not use an agile methodology, adding an extra layer of complexity. Fortunately, I had the opportunity to collaborate with the branding agency for two sprints to resolve all visual design issues, including colour adjustments and webfont implementation, to improve accessibility.

UKRI new colour palette

UKRI new colour palette

UKRI new graphic patterns

UKRI new graphic patterns

UKRI website visual design

UKRI website visual design

Transitioning sites

In alpha, we made a decision to transition content by theme, rather than by council. This meant we could consolidate content from across the councils, and reduce the amount of siloed or duplicated content. However, it also made the job of transitioning and redirecting sites more complex.

We decided to reuse the GOV.UK transition tool to manage the staggered transition of content. This gives UKRI a way of adding redirects maps, as well as using analytics to update or change them.

We also mapped out how users would navigate between the legacy and new website during the transition period. We identified issues and built features to mitigate them. Again, testing these features with users.

The new website is now live, its launch was announced by UKRI who will continue to develop the site following further feedback and testing.


Outcome

We worked with UKRI and Content Design London to build an accessible, responsive website for UKRI and the councils.

Researchers, research managers, and businesses can now find funding opportunities quickly and easily. The content from all the websites has been consolidated so that everything’s in one place, including council-specific information and guidance. Previously funding opportunities and information were spread across the 10 websites and often duplicated.

Publishing processes for web managers at UKRI have been improved by using WordPress and the introduction of new publishing workflows. The UKRI web publishing team can also manage the ongoing transition of the legacy council websites onto the new site through the use of a repurposed GOV.UK transition tool.