How we made a Design System
Role—Discovery and UI/UX Design
Tools—AirTable, Abstract, Sketch
Platforms—iOS, Android, Web
With Wattpad being over a decade old, it’s no surprise that there would be some inconsistency and debt. However, as we onboarded new designers, the inconsistencies and inefficiencies in our design workflow became a lot more obvious (e.g. we were seeing lots of screenshots in sketch files 🙅🏻♀️). This was often due to teams optimizing for speed vs building things forward in a scalable way.
This was an ongoing problem that not only impacted the way our teams worked, but also the product we delivered. Our users trust us to carry on a consistent experience, without it, we continued to break that trust. So after 12 years we decided to try our hand at building out a (much needed) Design System, starting with the old brand (which was the existing brand at the time).
Where we started
Acting as Co-PM on the Design Guild (a team of dedicated designers and engineers), I treated the Design System as a product. I held interviews with both target user groups (designers and engineers) to understand the gaps in efficiency and the problems with how things are built. I facilitated an Audit Workshop to identify 3 large areas to tackle that would have the most impact of change in the product: colour, typography and iconography. This was key in establishing alignment between Design and Engineering.
A few designers and devs workshopped an audit of 3 major design areas of our product: colour, typography, and iconography. It was a very manual process of going screen by screen and looking at all 3 of these areas. We never really knew the extent of the debt damage without taking a closer look.
Reviewing the stylesheets also revealed an insane amount of colours that range from "grey" to "lightishgrey"
From the audit we then distilled our large palette of many colours to a smaller, more manageable palette of few.
Visualizing the Debt
Becoming aware of the inconsistencies we were dealing with was a crucial first step to moving forward. During our first pass at auditing we found that there were plenty of cases where pieces had been implemented similarly but not quite the same. A good example of this would be the many styles of tab bars we saw across the platform. As you you can see below, many pieces were off by just a pixel here and there, and colours were all over the map. Unifying key components like this will make our readers and writers journey through our platform more seamless.
50 Shades of Grey, No Longer
As we dug deeper into colours we realized that they appeared to have been added in an ad hoc fashion. Colours had been added for very specific use cases such as Reading-Grey, rather than being considered at a higher level. In our effort to work towards a design system we narrowed our colour palette down to just the essentials. This took us from 20+ shades of neutral colours — which were mostly greys — to just 5.
In our effort to build a more scalable system, colours are now named and implemented in a way that allows us to change the values later with less effort. For example our version of black is named Neutral-1 which is #222222, but if we want to change the hex value in the future, we can do so without changing its name.
From mapping the colours in design, we ran the same exercise in code and cleaned up hundreds of lines in the process.
Essentially removing all colour-specific naming conventions and distilling them down to the smaller purpose-driven palette we defined.
Creating a Source of Truth
In an effort to prevent us from having to repeat this in the future, we then created a single source of truth for design with Abstract — which is essentially GitHub for design. With it's purpose to serve as a library for design and allow us to spend less time finding colours and more time creating the best possible experience.
Just the beginning
We eventually delivered the first colour mapping exercise of the old brand (was the current brand at the time), which resulted in reducing 50+ colours down to a palette of less than 20, and deleted hundreds of lines of code.
We were looking into iconography and typography since we did an audit of this earlier. However, the scope of this work highlighted that we didn't have enough resources to implement it as smoothly and universally as we wanted to. It required much more thought/work than we anticipated.
At the very least the colour mapping set us up nicely for the impending rebrand we were about to enter.