• ▽
  • Design
  • Travel
  • About
CASTRO▽
  • ▽
  • Design
  • Travel
  • About

What NHSBT needed

 
"We need a way for all of our sites to be easy to upload new content, quick to make changes to, create an understandable visual language throughout and work on every device."

NHS Blood and Transplant needed a way to:

  • Manage the look of an new content management system (CMS), that was buying applied to their entire web-estate of 12 sites.
  • Update the designs overtime without needing to find every instance of that change; for example, if a button was changed from being red to blue, there needed to be a way to update every instance of that button and not have to find one manually.
  • Create a semantic language and tone through styling; for example, every site would show a news article the same way, but would have the ability to make colour changes so that it it suited the brand it represented.
  • Adapt all items created to every screen-size automatically.
This wasn't a simple task and it took many iterations over months to create something that could, 'Be all and do all for everyone'.

How did we do it?

The first part of the process was to define what each page would need to make a great user experience. To do this I designed a set of templates giving examples of the types of components and content that would be used in each template.
See the templates here

I then worked with some incredible Copy Writers, Front-End and Back-End Developers to perfect the components to fit the CMS system and the content that would populate them.


What did we make?

We created a fast, simple and easy way for NHSBT to upload content. This component library is a fantastic foundation for the company to build upon and will save a lot of time and money.
New-Pods_.png
New-Pods_2.png
New-Pods_3.png
New-Pods_4.png
New-Pods_5.png
New-Pods_6.png
New-Pods_7.png
New-Pods_11.png
New-Pods_13.png
New-Pods_15.png
New-Pods_16.png
New-Pods_19.png
New-Pods_21.png
New-Pods_23.png
New-Pods_27.png
New-Pods_28.png
New-Pods_29.png
New-Pods_31.png

These are a few examples of the components we made.

If you follow the link below you will see the full component library that we put together.
View the full Component Library