2015

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.

WP_hero

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.

WP_img01

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.

WP_img02
WP_img03

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

WP_img04
WP_img05

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

WP_img06
WP_img07
WP_img08
WP_img09

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.

WP_img10
WP_img12
WP_img11
WP_img13

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.

WP_img14
WP_img15

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.

WP_img16

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

WP_img17
WP_img18

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.

WP_img19

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.

WP_img20
WP_img21
WP_img22
WP_img23

Other projects

OpenGammaUI & Brand

CommerzbankOnboarding Portal

LinedataFintech Solution

Transport for LondonResponsive Website

WattpadVisual Language

VodafoneWeb Product