From startup to global standard : the evolution of the what3words product design system
by Iannish Posooa, Senior Product Designer at what3words
Across the world confusing addressing systems result in millions lost and livelihoods being affected, sometimes in fatal ways. what3words provides a global addressing standard that aims to solve these issues. This article will focus on why and how to scale a product design system. We’ll cover where we started, how to grow it internally and making it accessible externally.
1. Where we started
Stop designing in isolation!
It’s not a product design system if you’re the only one using it on a single product. Primary dark blue with Light font might seem like an important decision in isolation but starting with styles is an unsustainable approach to a modern design system. It will cause disjointed experiences, especially when your product crosses multiple platforms.
Start with a framework
Choose your sources of inspiration and workflow wisely. This is half the job because it will have a profound impact on the end product.
User-chain
Our initial focus were users suffering from poor addresses but we soon realised that this was only the ‘end user’. To design a better addressing experience we needed to empower the whole ‘User-chain’. From consumers to small and large businesses who provide location for deliveries, pick ups and emergencies.
Ready fire aim workflow
There will never be enough time or money and that’s ok. Limitations have always helped design thinking. This helped us pull in the same direction, focus on our core product offering and overall brand mission.
Sustainable Principles
As our brand mission became clearer we noticed 3 key principles that helped ground our product design thinking and guide us through prioritising user problems. Precision, Localisation and Accessibility were more sustainable. Eg: the accessibility of a what3words input field in a third party checkout flow is much more important and flexible than “Primary dark blue, light font”.
2. Growing internally
Finding your principles
These are not always obvious and often slowly reveal themselves over time. There are many ways to establish these but usually the sweet spot is a healthy balance of what your product offers, how you want a user to feel when they are using it and what your brand stands for.
Precision
Every specific 3m x 3m square on the planet has a unique what3words address. There is no grey area of uncertainty. Our product should feel accurate and clear with no jargon.
.
Accessibility
We use 3 words because it’s more accessible than a GPS coordinate. Easier to type, say, scan or even print. No matter how a user wants to input or share a what3words address it should be available to them.
.
Localisation
Addressing is different all over the world and an address should feel like home. One of the strongest connection to home is language. We have chosen to localise each what3words address in 45 different languages (and counting…) because it makes us more accessible and a truly global addressing standard.
.
Choose the right tools to execute
If you’re interested in the ‘Complete painful saga’ of everything we tried, see below. Otherwise jump to the ‘The short story’.
Complete painful saga : A sketch file is not a design system. We started by using sketch but it goes against one of our core principles “accessibility” because it’s only available in a sketch file, on mac, with a decent processor. So like most companies we used Invision’s Craft and it worked well to share prototypes but didn’t detail developer level documentation and more importantly didn’t encourage design collaboration. So we used Notion to add these details which was good for the wider company but wasn’t efficient when it came to maintenance so we tried Invision studio to embed prototypes with detailed notes into notion but very very sadly it’s just too buggy. We also tried principle but it wasn’t responsive and only on mac and yes we flirted with Framer X but again it was too locked into the React.js framework and has a high barrier to entry for any detailed work. In the end we settled on Figma and Axure because … it is the most accessible creating more collaboration and transparency between teams.
The short story: There is no perfect design tool and that’s ok. Your design system should be accessible by everyone and transcend the pixel perfection of Sketch and not be imprisoned in a React.js code base. It’s why our atomic design approach starts with sustainable principles that run through styles, components and patterns no matter the platform, medium or brand.
… Then you may consider styles
Internally, we try to be as simple as possible. Try not to think of styles as individual rules but as mini systems that reenforce your principles. A single style is only as effective as the other styles it’s placed next to. As long as your user journeys follow your core principles you should remain a little flexible in their application, especially in a growing company.
Colour
To establish depth and clarity. 10% red for our call to actions. 30% shades of blue white for secondary information and 60% shades of grey for backgrounds.
.
Typography
We stayed away from decorative fonts with heavy serifs because words are the prime interface of our product and needs to be as clear as possible.
.
Icons
Mostly an extension of typography. Everything is line based and created on a pixel grid to ensure that it works at all sizes. Sometimes we fill icons in particular states.
.
Sound
In the same way that our three slashes ‘///’ are easily replicable we wanted to make our audio mark as accessible with minimum effort. With this in mind we used tones inspired by hand claps to establish this audio identity.
.
Motion
We use motion sparingly to precisely focus the users attention. We use different levels of magnetic tension to transition between states depending on how much focus we want bring to it. No bounces or boings.
Components
Don’t reinvent the wheel. Like any company, we have all the standard components such as buttons, drop-downs, input fields etc. 80% of them are industry standards. Tweak them to make them fit your styles, but everything else is a waste of time especially if you don’t have the resource and it’s not a business focus. We focused on components that added the most value to our users. Here are a few:
what3words address
How to display a what3words address on multiple platforms with maximum accessibility and clarity
what3words Voice
The simplest interface to help a user input a what3words address through voice using the what3words voice API
what3words Scan
The clearest way to help a user scan a what3words address through an augmented reality interface using the what3words OCR SDK.
Patterns
Again, don’t reinvent the wheel. In most cases patterns will use more than one component, often in different ways, based on the context. Our focus was to perfect the experience of inputting and discovering what3words addresses. We focused on:
AutoSuggest
All about precision. To give users the simplest and most reliable way of inputing a what3words address we give them three suggestions based on a set of parameters such as their current location and/or confining the search area. The AutoSuggest parameters can be tweaked based on context.
Map Grid
When used correctly, it can be the most effective way of on-boarding users into what3words addressing system. When used incorrectly it can create a massive amount of confusion around what a what3words address is.
3. Making it accessible externally
Be humble when opening up your design thinking to the world so that anyone can use your principles to integrate the best possible experience. This should be the most accessible part of your system where anyone can understand it. In the future they should even be able to add to it. Don’t force your styles on others and don’t be afraid of pragmatic change. A good design system is never finished, it only ever evolves incrementally.
For our guidelines, we started with how to display what3words address and industry based UX guidelines. This is because we know that the only way to create a global standard is if third parties can provide a genuinely better experience of addressing that feels native to their users. Here are a couple of examples:
Ride Hailing User Flows
Allow your users to enter what3words addresses directly into your pick-up and drop-off fields.
E-commerce User Flows
The most native way of integrating what3words in a checkout flow is as the last line of the address.
Conclusion
A modern design system empowers and inspires internally and externally by maintaining sustainable design principles. It doesn’t force you to choose between products. Rather it seamlessly guides you on how to use the best part of your products principles to enrich other products.
Massive shout out to the team at what3words who made this possible.
