Establishing Wattpad’s Visual Identity

Originally posted in 2015 on www.willsicat.com

Wattpad is a consumer product that aims to enable the future of storytelling through a new experience that creates personal connections through millions of stories. What does that mean exactly? Well it’s a social platform connecting millions of people through words, a place to discover, create and share stories.

Since 2006 Wattpad has steadily grown to be one of the world’s largest communities for reading and writing. A community of 50 million users (20 million monthly active users) who love to read, share and connect through stories. Popular with teens, users have access to the product’s endless amount of free, long form content.

I joined the Toronto based startup as a Visual Designer, tasked with elevating the look and feel of the product’s applications, website and online brand. In this case study I’ll be looking at the design challenges of establishing a visual identity in a fast growing startup.

Design Challenges

Without a clear visual system in place, design would reference past releases, modify patterns or create new elements when needed. With so much design to keep up with and no way of regulating design, the product experience had become disjointed and the design approach inefficient.

Old website and Android app

It would be my responsibility to anchor the visual direction and establish some clear foundations to help designers gauge design decisions. With Product designers assigned to a platform or feature team my role as the only Visual designer meant I would mostly be working in isolation. I would also be needed at various times in a supporting role, providing visual guidance and design assets for individual tasks.

The main challenges in establishing the visual identity were:

  • Unifying the product experience — With few constraints, designers working on different projects come up with differing solutions and styles. This leads to diverging experiences and a fragmented product. To bring this together it is important that everyone has a common understanding of how to approach design problems.
  • Platform vs Brand — When designing for multiple platforms it becomes difficult for designers to decide if a platform-orientated or brand-oriented approach should be taken. It is important that brand and user experience are well balanced and consistent across all platforms.
  • Working in parallel — By focusing on the visual language while designers work on product releases, communication is key. All designers need to be working from the most up to date style guides, pattern libraries and toolkits.
  • Inconsistencies — Accumulated ‘design debt’ is difficult to keep up with. Problems are often repeated and so by auditing design first, problems can be tackled more efficiently.
  • Look more appealing — Design should focus on users but the aesthetic should also allow the brand to express itself. Product designers wear many hats so the visual language should take authority in defining the look and feel.

Design Direction

The visual identity would be defined and communicated through a series of style guides, component libraries and toolkits for iOS, Android and Web. With a lot of ground to cover the following design direction was outlined first:

  • Celebrate content — Content should have a higher level of engagement from the product. There should be a focus on strong typography and readability.
  • Unassuming — The design should aim to reduce chrome and keep details subtle. Unnecessary clutter should be removed in favour of content.
  • Friendly and encouraging — There should be a playful and human feel brought to life through more than the UI but also tone of voice, imagery, illustrations and micro interactions.
  • Relaxed — With so much content users should have the ability to move through at their own pace. There should be a clear sense of space and easy to use navigation.

Design foundations should be more than just a collection of UI elements and components, There should be more in the toolkit that informs designers of how design patterns should be applied to the product. From the start design needs to take into account the company vision and brand as a whole. Before starting the more hands-on design work I set out on defining some design principles.

Product Design Principles

These would be our Product Design Principles (PDP) and the starting point for all design, underpinning our approach. The were written as calls to action in short memorable sentences that would be used to measure all decisions against. They articulated the fundamental goals and would help keep the pieces of the project moving toward an integrated whole.

PDPs are the guiding light for the product and the starting point of all design. They define and communicate the key characteristics of the product to a wide variety of stakeholders.

Getting Hands-on

Using a mix of recently updated pages and current pages I audited design by printing out as much as possible. By getting an overview of pages and flows side by side I could get a better idea of where experiences were becoming disjointed. I could then prioritise what needed most attention and slowly bring the biggest commonalities together.

This would be a clean up task where I could focus on typography, grid structure, colour, iconography and basic UI elements. Once identified I then created the first version of the styleguide and released it to the product team.

First version of styleguide created in Photoshop

From this starting point I could then explore each element in detail. It would mean a lot of going back and forth through designs in order to test and refine. I would also work closely with marketing to evolve and develop the brand language.

Foundations

Example UI moodboarding

Typography

Exploration of typography and font combinations.

Colour

Iconography

There are also a lot of unique actions within the product and so when creating bespoke icons it was important to create visual metaphors right.

Grids & Layouts

Interface layout templates

Part of auditing the design was find common patterns and layouts. From this responsive behaviour and layout templates could be defined.

Wattpad Logo

Component Library

Native Platforms

Exploration of navigation styles for iOS app

Lessons Learned

  • Joining a growing team — Being the first and only visual designer I found I had to work two fold in order to find where I best fit into the team setup. As well as the day to day work of design I also needed to figure out how best to collaborate with other designers and experiment with process. I also had added responsibility in contributing to the design culture.
  • Ongoing project — I joined the team with the one task of developing and evolving the visual language for the Wattpad product. I needed to see this as ongoing work rather than a fixed length project. This meant setting goals and taking baby steps in achieving them.
  • Design Implementation — I found working in tandem with a dispersed design team to be particularly challenging. With designers given the freedom of autonomy it becomes difficult to implement visual design updates if work is not synchronised. To overcome this takes constant clear communication and being thorough with design.

Visual & Interaction Design