Smartphone with UK map and weather warnings on screen
Met Office logo

Designing an ambitious new app and digital language for the Met Office

We helped to define a new creative strategy for the Met Office’s consumer channels.

As part of our Digital Channel Partnership with the Met Office, we helped to define a new creative strategy for its consumer channels.


Alongside extending and updating its existing web app, we also created a modern, responsive website to replace its desktop and mobile websites, and provided GDS consultancy all the way through from Discovery to live Beta.


But more than just creating and building exciting designs, we delivered a new language that unified the Met Office’s various digital properties. This was partnered with an experience framework that transcended the nuts and bolts of putting a new page together. By combining design components with UX guidance, templates and a code repository, we made it easier for developers to efficiently create high-impact webpages without sacrificing either aesthetics or functionality.

To date, the app has achieved:
• Over 9 million downloads
• More than 2 million active users
• An approval rating of 4.5 on the App store and 4.4 on Google play.

Meanwhile, our website redesigns have driven:
• 41.48% increase of new users, reaching over 3,439,500
• Organic search acquisition increased by 6.5%
• Page views increased by 26.71% from 21,015,240 to 26,628,090
• Website sessions shot up by 33.66%
• 38.94% increase in users from 3,764,538 to 5,230,633.

In addition to this, in December 2020, we were delighted to hear that the Met Office Weather Forecast app won two awards in the World Meteorological Organisation (WMO) International Weather App Awards 2020: Public weather forecasts and information (award for information content – usefulness, reliability, quantity and quality of information) and Weather warnings (specialised apps award category).


Two smartphones showing the Met Office App on screens

Beginning with a technical app Discovery

We began with a Discovery comprised of code reviews and integration, UX testing and understanding their existing work. We quickly mobilised a multidiscipline team, consisting of UX designers, specialist IOS and Android developers, scrum managers, QA testers and ITIL service management teams. We seamlessly transitioned from the previous supplier and began optimising the app based on their existing roadmap and backlog.

We interrogated and improved in-app navigation, and surfaced relevant information through the use of native components. While we have the internal expertise to develop non-native and hybrid architectural components, we stuck with their native app approach as it saved money and effort in the long run. This also saved money and time, and provided ample space for future growth and changes to the app.

We began with guerrilla testing, but our efforts were disrupted by COVID-19. To counteract these challenges, we created two live Beta versions of the app – Beta on Android and Alpha on Apple – and added a survey request to test out features. We received more than 40,000 sign ups in a week, but had to limit it to 10,000 for efficiency’s sake.

We regularly set up these surveys to act as check in points with our users. They revealed crucial and specific demographic and regional requirements in amongst a broader range of responses. But mostly, they’ve helped us to understand how our relationship to the weather is always changing, so the designs we create need to be dynamic and flexible, too.


Understanding almost every kind of user

Unlike some of the more specialised products and services we design and deliver, everyone is affected by the weather in some way. Creating an app that would cater to such a wide range of users while serving those occupying more niche interest areas was a challenge. So, in addition to our surveys, we also spoke to enthusiasts who wanted to delve deeper into weather data.

We found they wanted a global weather data map tool. We began designing and testing conceptual prototypes for the map tool with users and stakeholders. These were coupled with internal workshops and training to capture feedback and help shape the tool going forward. We then combined design with code functionality and the data APIs to ensure the whole tool was buildable for the MVP/proof of concept deadline of April 2020.

We also created innovative personas that focused on behaviour patterns rather than demographics. These shifted depending on context and worked alongside user stories/epics, technical considerations and accessibility guidelines to aid in decision making. Meanwhile, our journey map plotted out personas, and turned pain points and barriers to accessing weather information into user stories. Forming the project backlog, these user requirements shaped all development work.

Smartphone showing Met Office app with amber weather warning on screen

Empowering decisions through data and push notifications

We also sought to find new and creative ways to capitalise on its mountain of data (of which just 1% was used). It had a lot of inaccessible weather information and wanted to explore who it would be most helpful for, and the format would make it more understandable and meaningful to users. Our research uncovered a range of user wins, like the development of the aforementioned global weather data map tool, and an improved and personalised push notification strategy.

However, the most interesting development in our push notification strategy was our health-specific messaging. We found that people whose health was affected by the weather – for example, by changes in UV ratings, pollen count or pollution ratings – were surprisingly passive about it. So, we centralised vulnerable users and promoted information that empowered them to self-diagnose and take control of their allergies. When it’s live, this will include nuances within contextual information – for example, by breaking pollen into its three types, grass, weed and tree.

Our push notifications intended to change this passive attitude by providing personalised, relevant updates to users that would help them make better informed decisions. We did this by combing a strong API blueprinting to its database with a bespoke algorithm that translated weather icons and accompanied visuals with a short, snappy line of content. We applied the same principles to our approach for severe weather warnings, and are currently developing rich notifications that contain extra information, a map and images.


Embedding accessibility and championing inclusivity

As with all our projects, accessibility was considered throughout. We embedded accessibility consultants into our sprint teams for both the app and website builds. We also conducted manual testing to improve user experiences across its responsive web, apps, connected TV and multimodal experiences.

When we embarked on our app redesign for the Met Office, WCAG had not yet released guidelines specifically for apps. So, our Director of Accessibility Alastair Campbell, a chair of WCAG and a key writer of digital inclusivity best practice, crafted bespoke guidance for native IOS and android apps. This guide is still used by the Met Office team today. We are currently exploring how voice and search can factor into our app and website interfaces, and we will continue to examine how we can better deliver relevant updates and national weather warnings to users.


Creating a digital design language

Finally, we also found there was a clear need for the creation of a digital design language that could be rolled out across the Met Office’s Consumer Digital portfolio. This evidence-driven design language used a component-based approach to ensure a consistent approach across its channels. It is tailored to each platform’s specific human interface guidelines, and is guided by usability best practice, interaction patterns and UX guidelines.

Additionally, we have developed principles, living frameworks and a validated set of components in pattern libraries. By combining our development partner’s expertise in data with Nomensa’s proven ability to humanise technology, we have delivered a plethora of innovative digital solutions for their website and app based on validated user needs.

The power of an experience design system is in its scalability. By creating this design language for the Met Office, we were able to free up their team to focus their energies on innovations and exciting new functions. It provided a solid framework to operate from, rather than needing to start from scratch every time a new form needed to be created or button to be added.

Stormy seas causing huge wave to batter the land next to a lighthouse

“You should all be very proud of the work you have done. I want to use you as an example to other Government departments.”
GDS

We go beyond just redesigning high-grossing user journeys and improving specific touch points. We approach each project from a strategic perspective that encompasses the totality of your digital estate, user base and corporate vision. This allows us to improve an entire digital experience, rather than isolated stages within it.

Interested in working with us?

Get in touch

Don't miss our next webinar

Learn how you can deliver inclusive experiences that deliver value to both humans and machines (or how to be good at SEO as well as design) in our next webinar.

Find out more
Man walking outside while it's raining

Humanising the weather

We led a major website redesign and app evolution for the Met Office to help them engage a broader audience and enable greater reach.

Read case study

UX Design

We use UX design to answer challenging problems and find opportunities to go beyond initial thinking.

Find out more