A design partnership for continuous improvement

This is the story of how we're working with Anglia Ruskin University in a continuous series of small engagements as their design partner, refining and polishing the design language as we go.

Client
Anglia Ruskin University
Sector
Education
Duration
Ongoing
What we did
Interface design
User research
Product design
A shallow focus photo of the ARU course page design on a computer screen. Only the top part of the page is shown. The image is shot from a quirky angle and abstract brand elements can be seen in the background.

Anglia Ruskin University want their website to match the excellence of their in-person experience. But a big redesign project isn't realistic at the moment. Instead we're working together on a series of smaller engagements to incrementally improve the site experience piece by piece and realign to the brand's original direction.

With each engagement, the improvements are gaining in speed and confidence. And while we're making these iterative improvements, Anglia Ruskin University is also building and refining a design language that can be shared across the organisation.

Together, we're on a roll!

Clearleft have established themselves as a trusted design and research partner. In every project, they bring a refreshing focus, ask the tough questions, and drive quick but informed decisions. Their deep thinking and clear stakeholder communication keep us moving forward at pace.
Leon Paternoster Web Manager at Anglia Ruskin University

The Results

Speed

We're quickly designing and shipping features together.

Clarity

We're removing repetition and streamlining shared components across the organisation.

Confidence

Thanks to a shared design language, internal communication is faster and more effective.

The Full Story

When does a series of small engagements make sense?

At Clearleft, we usually work on a project for a few months. During that time, the team is focused on delivering the maximum value for the client.

But sometimes it's just not feasible for a client to hire us for one long stretch. It can be a bit of a daunting prospect for them. And while a single scoped project is perfect for something like a website redesign, it's less well suited to making smaller tactical changes.

We had already worked with Anglia Ruskin University on a research project. We were all keen to work together again, but there was no one big project that needed doing. Instead, there are lots of different parts of the current website that need improving.

A collage of components showing a variety of colour combinations using ARU’s dark blue and bright yellow brand colours, as well as crisp white. The headings within each component stand out in ARU’s unusual brand font, Raisonne. The font features a mixture of circular shapes and long, straight lines.
ARU use a striking colour palette and confident typography. Dialling the colour contrast and type size up and down between components helps to direct attention to specific messages on pages throughout the website.

We’ve got a really good cadence going. After running research to better understand user needs, together we do a short sharp design dive into one specific area of the website. Once that design phase is done, the Clearleft team disperses to other projects while the Anglia Ruskin team rolls out the changes. Then when we come back together, we bring everything learned during the previous project into the next. As long as the gap isn’t too long between engagements, this is a really effective way of working together.

A Figma screenshot showing a course page design for a large and a small screen. Notes have been added to the side, describing possible improvements to the design. The background has a strong red colour, to draw attention to the updates in Figma.
New components and page designs are fed into ARU’s user research and suggestions are captured in the shared Figma file.

Clearleft acts like a catalyst, enabling Anglia Ruskin University to move quickly, to test a hypothesis, to try making a testable prototype and to throw that prototype away if it’s not working. 

What’s really nice for Anglia Ruskin University is that there’s no big risk. Each engagement has an achievable short-term goal with immediate benefit.

What’s really nice for Clearleft is that we’re building up a great working relationship without working full-time with a single client.

Best of all, every piece of work we do with Anglia Ruskin University builds on the work we’ve already done together, creating a snowball effect.

What even is a design system anyway?

Most people consider a design system to be a library of components, whether that’s in Figma or in code. Anglia Ruskin University doesn't currently have that. But what really matters is how a systematic approach to design unlocks a team’s potential.

On the left, a screenshot from the Utopia website’s fluid type scale calculator. This shows a responsive typographic scale generated from six values. On the right, a Figma frame shows HTML text elements styled using the Utopian type scale. These include headings, lead text, and list styles. An arrow points from the screenshot to the Figma frame.
Utopia is our systematic approach to fluid responsive type and space. With a handful of values we generate smart tokens to control these foundations across an entire website.

Every time we work with Anglia Ruskin University we use it as an opportunity to ruthlessly examine the components we’re working with, paring them down to their core essence so that they can be used anywhere on the website. For each one, we create a "component bio” that answers these questions:

  1. What is this component called?
  2. What is the purpose of this component?
  3. When should you use this component?
  4. When should you not use this component?
An example component bio. Styled like a deck slide for easy sharing, the left side lists the component name, purpose, use cases, and variants. The right side shows labelled visual examples of the component and its variants.
To help the wider ARU team to make sense of the new components we’ve introduced a component bio format, like this “Boxout” bio. These single-page explainers describe the name, purpose, use cases, and variants of each component.

Clarifying the components in this way has great benefits across the organisation. Everyone has a shared understanding of which components are best for which task, and crucially, everyone's using the same language to describe the same components.

That might not technically be a design system, but it brings some of the main benefits: alignment, understanding, and consistency.

For more of our thoughts on design systems, have a listen to this episode of the Clearleft podcast.

What works for you?

Sometimes you want to take a big swing. A complete redesign. New branding. A technical migration. In those cases, it makes sense to bring Clearleft on board to help you with your chunky project.

But sometimes you just need to finesse things. You don’t want a new brand, you just want your existing brand to work better online. You don’t want a complete redesign, you just want to tweak your existing design in places.

The cumulative effect of repeating those smaller, less risky pieces of work can be just as impactful as a complete overhaul.

Whichever approach is the right one for you, Clearleft can be your strategic design partner.

More work