For their initial venture, the Post Office decided to focus on travel currency and insurance. Directly from the app, customers could order and top up their travel money card with different currencies, buy travel insurance and locate local cash points.
While the product was well received by customers, a lack of clearly defined guidelines resulted in a fragmented user interface. The visual inconsistencies instilled a disjointed experience across the product, with design debt accumulating at a rapid rate.
With desire from the business to expand into a suite of digital products, it became increasingly important to maintain a consistent style and visual language across the product constellation – a design system that could serve as the single source of truth and reference to expand from.
Design systems play a huge part in the success of any major project, providing a scalable structure made up of reusable components and patterns, as well as the guidelines which regulates their use.
Depending on the maturity of the product, the creation of a design system can be a mammoth undertaking. I was extremely fortunate that the Post Office’s foray into the digital realms was still early enough to make the implementation of a system manageable, which meant I was able to work on it while simultaneously supporting the efforts of the product team.
I began my task by gathering all the components and patterns that had been designed thus far, grouping them into the relevant categories. This helped identify the many discrepancies that existed.
After removing any outdated, duplicated or unsuitable components, the inventory was whittled down until there was only one design per component. From this I was able to strip bare the key elements that made up the designs, which I used to form the building blocks of the system.
From these atomic parts – made up of foundational elements like defined text styles and colour palettes – I could start rebuilding an extensive suite of components, patterns, and eventually templates.
As part of my goal to unify design language, it was important that the logic and principles behind it could be quickly understood by onboarding designers. This ensures a consistent experience, not only across Post Office Travel, but throughout the range of digital products Post Office intended to launch.
I developed a set of design guidelines which documented core brand elements such as typography, icons and colour; the usage of interface components; as well as reusable design patterns.
Working with established patterns and components allowed me more time to focus on building meaningful features and products.
I was particularly invested in identifying opportunities to delight the customer. Because the service offerings of travel insurance and currency exchange can be dry subject matter, there was a risk it would be off-putting to users. I wanted to transport users away from the boring, and ignite within them excitement for their upcoming travels. I illustrated popular travel destinations, which we rotated according to the seasons. The illustrations were used for backgrounds, promotional material and communication devices.
Moments of delight
Where applicable, I also incorporated animations to add a touch of humour to the illustrations. These interactions enriched the experience, helping bring personality to the product.
The Design System has been deployed and is currently in-use across the Post Office. Use of the Design System has greatly improving efficiency and has helped to guide the structure of other digital products across the extended business ecosystem. This as ultimately led to a more cohesive, higher-quality user experience.
Externally Post Office Travel has been well received by users, with a rating of 4.7 on the App Store.