Home > Projects > Blog update for the Met Office

Blog update for the

Met Office

Screenshot of blog page for the Met office
Screenshot of blog page for the Met office
Screenshot of blog page for the Met office
Screenshot of blog page for the Met office

Client:
Met Office

When:
Feb 2024

The Meteorological Office, abbreviated as the Met Office, is the United Kingdom's national weather service.

Summary: a content audit to understand the areas to improve on the Met Office ‘About us’ blog area and build a unified content strategy.

Outcomes: content strategy, high-fidelity mock ups, reusable components. 70% of users tested with, prefer the updated blog design and are ‘highly likely’ to use the blog as a reliable source for meteorological news.

“Thanks so much for all of your awesome work on the Met Office - particularly your calm, levelheadedness. You've been awesome.”

Feedback from D.H. - Head of capability

Problems:

Originally, the blog was designed for long-form news on a third-party website. However, for years, the Met Office has been speaking about bringing the blog to the main website.

The remit of the blog has evolved to be for direct public comms and more personal content, e.g. comms from named individuals. One use case example is someone travelling to the rainforest for work and writing a report.

Background:

Among the lack of cohesion and uniformity of the website, there were some content issues we focused on for this project:

  • no design system

  • truncated headings

  • lack of component H2 heading or restrictive H2 heading

  • inappropriate CTA (“Explore”)

  • lack of flexibility in usage, leading to delivery of unrelated content and inability to guide users to the next stage of common journeys

The team worked with a content expert to create a content strategy.
Then, I created a set of visuals illustrating more effective styling and flexible usage of three existing components on the Met Office site:

  • 3 card - navigation items (“Explore”)

  • 3 card - featured items (“Read more”)

  • native video component

I created reusable components on Figma to illustrate a more effective way to display suggested articles on the blog and a component for native video. This visual cue was used with stakeholders and customised in the mockups.

I also created a set of visuals illustrating how the MO official news blog might look if migrated from the current Wordpress set up into the main site: a Blog post page and a Blog posts listings page.

UCD solution:

Mission patch by me as a way to acknowledge and celebrate the team milestones in the project.