Client
Ordnance Survey
Timeline
Under 1 Year
Services
App Design, Consultancy & Design System
View Live App
Ordnance Survey (OS), renowned for its physical mapping since 1791, now targets outdoor enthusiasts and serves key UK public services like HM Coastguard and the Met Police. Their platform lets users overlay elements hiking and biking paths, shapes, and warning zones onto a digital map interface. I was tasked with creating the system and design language used consistently across all their products.
The product lets you create custom maps by layering data and info panels to personalise your mapping experience. Itโs designed for plotting floods, hazard zones, and more functioning like a Figma interface but for mapping.
As shown below, the UI elements overlay the map layer on both web and mobile, using brand colours and consistent system design.
A key feature for Ordnance Survey was the 3D hiking path overlay on their 3D map. All UI elements layered on the map must work seamlessly and harmoniously across the product.
As shown below, you can plot alerts and hazardsโtypical of the Met Officeโs interface for issuing weather warnings. For example, a flood can be marked here to alert the public in real time.
Below is an example of an NHS backend system interface, where health alerts and hazards are monitored to warn the public. You can add pointers that list these hazards for easy tracking.
The design system was built on five key principles that guided the screen designs. Following these methodologies was essential throughout the process.
Challenge
Discovery
Design & Prototyping
Testing, Handover Launch
I designed a custom icon set, defined branded colours from their existing brandbook, and selected a dedicated font to form the component library. This guide was essential for maintaining a consistent brand presence which aligned to their existing branding.
To build the components, I analysed existing ones and thoroughly tested each with users to ensure strong usability. Crucially, I also ensured they met W3 accessibility guidelines, aligned with the brand and worked in harmony on the screens.
Below is a visualization of all components on mobile, demonstrating their harmonious alignment and smooth interaction. I mapped out a typical screen flow below.
Using InVision, I created a prototype and conducted usability testing with seven users who completed hypothetical tasks. Their feedback highlighted issues with element placement and usability, prompting me to iterate and further refine the design.
