Wattpad.jpg

Wattpad

WATTPAD

 
 

Establishing Wattpad's Visual Identity


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

With a successfully growing product comes the increased demands on design. The design team were handling increasing requirements for a cross-platform product but were taking the design forward without a clear visual direction. 

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 app

Old website and 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

By having a common language to work with designers build products better and faster. It is also important as it gives users a more cohesive experience. By having a strong visual identity designers can focus their efforts on user needs and clearly present their solutions to the rest of the design team.

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

To begin the process of unifying design it was important to understand what was actually expected of the product. I ran a workshop with stakeholders from different teams to get a better idea of how the product was perceived across the company. From the outcomes I could pick out common themes that would then define a collective vision.

 
 

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

With so much design to cover I began by focusing on the web product. Since the website now adopted a responsive approach, I would have a basis to later port design to the native platforms.

 
 

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

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

With a basic style guide in place I then looked at each of the foundational elements in detail. The main goal here was to clean up typography, colour, iconography and structure across the product. I would practice using the PDPs and work closely with marketing to get brand guidance. For art direction I created moodboards to help shape a more modern look and feel.

Example UI as part of art direction

Example UI as part of art direction


Typography

I worked closely with developers on the web team to get insights on how fonts were being applied in the product. This gave me a better understanding of limitations that I could apply to design. Font weights, sizing, spacing and colour were being applied freely throughout design and so I needed to pay close attention to hierarchy and the reading experience. I explored complementary fonts to distinguish between the navigating through the product and engaging with content.

 
Exploration of typography and font combinations.

Exploration of typography and font combinations.

 


Colour

One of the hardest challenges came when working with Wattpad’s brand orange. The colour orange projects warmth and friendliness and so this aligned well with our Product Design Principles. However refining it to reflect the brand tone as well as meet accessibility standards proved to be tricky. It meant constant tweaking and threw further challenges when defining the secondary colour teal. After defining the palette, how colour was applied needed to be striped back in order to create focus and attract attention in the right places.

 
 

Iconography

With the product used on a vast array of devices two new sets of icons were created for both web and native apps. With each icon careful attention was paid in aligning to pixel grids so that sharpness and clarity could be ensured all the way down to lower end devices.

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

The new website uses a mixed responsive and adaptive approach. We looked at the most commonly used devices in defining grid structure and breakpoints.

 
Interface layout templates

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

After creating a sharper, more consistent set of icons I applied the same principles when cleaning up the Wattpad wordmark and ‘W’ icon. I focused on typography, spacing and alignment in creating a more digital friendly logo. The differences were subtle but the outcome produced a sharper, scalable and more polished looking logo.

 

Component Library

With visual design foundations in place I moved onto developing an extensive toolkit in Sketch. I looked to create a master file of the entire web product with refined designs. I could then create a style guide and pick out common patterns that I could compile into a component library. The toolkit was created for desktop and mobile.

 
 


Native Platforms

When working on native platforms I could reference components from the web toolkit. Product designers could reuse components from the web while I would refine elements specific to native platforms. By working together Product designers could focus on platform specific interactions which I could then apply brand orientated visual design to.

 
Exploration of navigation styles for iOS app

Exploration of navigation styles for iOS app

 

 

Lessons Learned

  • The startup environment - Having worked agency side for most of my digital career, I wanted to get that hands on experience of working in a young and exciting startup. After the initial honeymoon period I found that part of adapting meant being persistent and consistent when pushing ideas. The experimental and chaotic nature of the startup environment creates a sea of ideas and so it really does become a case of sink or swim.

  • 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 projectI 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.