2015

Wattpad

Wattpad is the worlds largest community for readers and writers connecting millions of people through stories. With a successful product growing across multiple platforms, it had reached a point where it was important to re-establish design foundations to help bring it forward.

I joined the team to define the visual language that would ensure consistency across the product.

You can also read a more in depth case study here.

Wattpad

Wattpad is the worlds largest community for readers and writers connecting millions of people through stories. With a successful product growing across multiple platforms, it had reached a point where it was important to re-establish design foundations to help bring it forward.

I joined the team to define the visual language that would ensure consistency across the product.

You can also read a more in depth case study here.

Approach

The structure of the product team assigned designers to individual platform and feature teams. This caused fragmentation in design and therefore unifying the product experience would be difficult.

To establish a common way of thinking, design principles were developed as a team. These principles would serve to guide all design decisions including the visual design. As an ongoing project the new style guide would explore each of the key design foundations.

Typography

As a product built on reading and writing, typography needed to be strong throughout. Fonts were selected based on readability and usability. It was also important that they add to the design aesthetic.

With type featured throughout the product, it was important that clear and thorough guidance be given for weighting, rhythm, size, spacing and context.

A second font was explored for story content. This would help elevate stories from the product and optimise engagement.

Colour

The colours were reworked to reflect the brand values of warmth and friendliness. Tweaks were made across the palette for better balance. Design also considered how and where colour should be applied.

Grid

A new grid system with responsive behaviour was defined for improved structure and layout. Key page templates were developed to help ensure consistency and familiarity.

Iconography

Sharper, more uniform sets of icons were crafted for each platform. Creating bespoke iconography is a long process but adds detail that defines the products visual identity.

Each vector was drawn in alignment with the pixel grid ensuring clarity and scalability.

Logo

The logo was refined with attention given to letter weighting and spacing. The designs alignment was improved so that it remained clear and sharp when scaled.

Style Guides

The newly defined design foundations were brought together to create style guides. These would be ongoing works that would evolve and grow with the product.

hi@willsicat.com