sjc

OVERVIEW

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).

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. 

From the audit we then distilled our large palette of many colours to a smaller, more manageable palette of few. 

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. 

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.