Back To Home

Back To Home

A design system library for all Ordnance Survey mapping platforms used for public services.
A design system library for all Ordnance Survey mapping platforms used for public services.
Client
Ordnance Survey
Timeline
Under 1 Year
Services
App Design, Consultancy & Design System
View Live App
Ordnance Survey Platform
Ordnance Survey Platform
App Store
App Store
Google Play
Google Play

See Live Product

See Live Product

See Live Product

See Live Product

Back To Home

Back To Home

OS Mapping Design System
OS Mapping Design System
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.
PROBLEM
The design was inconsistent, with elements functioning differently and lacking cohesion. The platform felt outdated and wasn’t user-friendly.
PROBLEM
The design was inconsistent, with elements functioning differently and lacking cohesion. The platform felt outdated and wasn’t user-friendly.
PROBLEM
The design was inconsistent, with elements functioning differently and lacking cohesion. The platform felt outdated and wasn’t user-friendly.
PROBLEM
The design was inconsistent, with elements functioning differently and lacking cohesion. The platform felt outdated and wasn’t user-friendly.
PROBLEM
The design was inconsistent, with elements functioning differently and lacking cohesion. The platform felt outdated and wasn’t user-friendly.
SOLUTION
A consistent design system with modern patterns, evolving the platform to be more trustworthy and user-friendly.
SOLUTION
A consistent design system with modern patterns, evolving the platform to be more trustworthy and user-friendly.
SOLUTION
A consistent design system with modern patterns, evolving the platform to be more trustworthy and user-friendly.
SOLUTION
A consistent design system with modern patterns, evolving the platform to be more trustworthy and user-friendly.
SOLUTION
A consistent design system with modern patterns, evolving the platform to be more trustworthy and user-friendly.
RESULT
A harmonious, consistent experience across the app, website, and all platforms.
RESULT
A harmonious, consistent experience across the app, website, and all platforms.
RESULT
A harmonious, consistent experience across the app, website, and all platforms.
RESULT
A harmonious, consistent experience across the app, website, and all platforms.
RESULT
A harmonious, consistent experience across the app, website, and all platforms.
Outcome
Outcome
Serving 4.1M+ users
Serving 4.1M+ users
Improved the overall consistency across the application
Improved the overall consistency across the application
Achieved an App score review of 4.5
Achieved an App score review of 4.5
Truspilot Score 4.6, 13k Reviews
Truspilot Score 4.6, 13k Reviews
Bringing the outdated mapping experience to a digital type of experience
Bringing the outdated mapping experience to a digital type of experience
Highlighting Mapping UI ( New Design System )
Highlighting Mapping UI ( New Design System )
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.
Plotting 3D Routes On The Map
Plotting 3D Routes On The Map
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.
Plotting Alerts & Hazards (Met Office)
Plotting Alerts & Hazards (Met Office)
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.
Plotting Emergencies - Met Police & NHS
Plotting Emergencies - Met Police & NHS
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.
Design System Principles
Design System Principles
The design system was built on five key principles that guided the screen designs. Following these methodologies was essential throughout the process.
Delivered the platform end-to-end as a fully functional, user-ready product.
Delivered the platform end-to-end as a fully functional, user-ready product.
Challenge
User interviews, competitive analysis, heuristic audit
User interviews, competitive analysis, heuristic audit
Discovery
Work with stake holders like Met office/police/NHS to improve their usability
Work with stake holders like Met office/police/NHS to improve their usability
Design & Prototyping
Designs using consistent design system, high-fidelity prototypes
Designs using consistent design system, high-fidelity prototypes
Testing, Handover Launch
Weekly design reviews - QA support, working with devs
Weekly design reviews - QA support, working with devs
Style Guidelines
Style Guidelines
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.
Building Components
Building Components
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.
Mobile Native Experience
Mobile Native Experience
Below is a visualization of all components on mobile, demonstrating their harmonious alignment and smooth interaction. I mapped out a typical screen flow below.
Userbility Testing and Prototyping
Userbility Testing and Prototyping
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.
Motion Design Of Web Map
Motion Design Of Web Map
Below, you can see a motion design showcasing the mapping interface in action and how it functions.
Outcome
Outcome
Serving 4.1M+ users
Serving 4.1M+ users
Improved the overall consistency across the application
Improved the overall consistency across the application
Achieved an App score review of 4.5
Achieved an App score review of 4.5
Truspilot Score 4.6, 13k Reviews
Truspilot Score 4.6, 13k Reviews
Bringing the outdated mapping experience to a digital type of experience
Bringing the outdated mapping experience to a digital type of experience
Related Case Studies
Related Case Studies
Fintech - Power of AI Trading
Finatext - Pipster
Fintech - Power of AI Trading
Finatext - Pipster
Fintech - Power of AI Trading
Finatext - Pipster
Fintech - Power of AI Trading
Finatext - Pipster
Fintech - Power of AI Trading
Finatext - Pipster
E-Commerce Leasing Platform
Kinto Mobility
E-Commerce Leasing Platform
Kinto Mobility
E-Commerce Leasing Platform
Kinto Mobility
E-Commerce Leasing Platform
Kinto Mobility
E-Commerce Leasing Platform
Kinto Mobility

See All Projects