Clearleft had the great pleasure of working closely with EngineeringUK on their latest project: Neon:

Bringing STEM to life through real-world engineering

The design is beautiful (and aren’t the hover animations in the navigation just lovely?) but what really stood out on this project was, well, the engineering.

This was a three-way engineering partnership between the team at EngineeringUK, the developers at Clearleft(Cassie and Trys), and our friends at Umbrella. We designed the experience and were responsible for the front end development, Umbrella built the back end, and the team at EngineeringUK were responsible for getting the whole thing live with excellent content.

You could picture Umbrella as the bridge between Clearleft and EngineeringUK. They received front-end code from Clearleft on one side, while getting the content from EngineeringUK on the other. Using both of those inputs they could then put the back-end system together.

Crucially this wasn’t a waterfall process. It was quite fluid and there were course-corrections throughout. On the Clearleft side, we might have an idea for how a particular component could behave and tell Umbrella “It would be great if this kind of data stucture were available.” They could then work on providing that data structure. Or, in the other direction, based on the content from EngineeringUK, Umbrella might say to us “This is how the data will be structured—can you work with that?” and we could adjust our front-end components accordingly.

Often we’ll deliver a library of these components to the client as the output of a project. In this case though, the components weren’t a deliverable—they were a means to an end.

Working in a component-based way ensured that the front-end code would be robust. Each component was like a reduced test case. Best of all, Umbrella provided API endpoints that we could use to populate the components with real data. That really helped to take the guesswork out of the process.

Related thinking

  • Tiny Lesson

Designing with tokens for a flexible multi-brand design system

Read the story

Take a closer look at the patterns in our language.

Read the story