Reader Redesign

improving the reach of native and programmatic advertisements on Wattpad

Reader Redesign

improving the reach of native and programmatic advertisements on Wattpad

2015・Monetization・Desktop & Mobile Web

Product Designer
UX Research

 

I had the opportunity to work with Wattpad on the monetization team redesigning our mobile and web reader as a way to increasing viewability of native and display ads for our audience of over 60 million users. This experience taught me the importance of testing with core users as well as finding the balance between the values of the business, users, and ad partners to craft the most meaningful solution for all. 

reading-redesign-main

Goals

Wattpad is a free, online platform for writers and readers, so an integral piece to our monetization business took the form of display and programmatic advertisements. 

Our outcome was to:
1. Expand the reach for native and display advertising.
2. improving overall user experience
3. Improve revenue potential of display ads on our web and mobile web platform.

Original Design

The original design of the web reader had been outdated and had limited locations for display advertisements. There were also some usability issues with people continuing to the next part of the story and the connection to the author was lost on the page.

Original Reader View

Previous reader design on Wattpad desktop

Research

User, Business & Advertiser Values

I created a user journey framework in the aspect of users, our business, and advertisers to better understand their motivations and emotions through the entire reading experience on Wattpad from discovering a story all the way to finishing and potentially sharing the story. This framework was a great resource to look back at when designing micro experiences to help understand if the solution and decision I was making satisfied all audiences and understanding the repercussions across the 3 different audience types

journey framework 2

How people read online

I sketched out and ideated ways a person scans a webpage and began segmenting our reading experience into 3 segments. Understanding the journey of a user allowed me to cater each section to their specific intent and motivation in that given moment in time, providing them with the right information just as they need it. This played a big role in designing the rules around when to show/hide ads. I used these insights to help inform my design solution

reader-sketch1

Sketch mapping out reading expeirence for user intent

New Reading Experience

author-sharee 2

Better connection to the author

Surfacing author profile and the ability to follow their profile directly on the reading page gives the reader more insight into their other works increasing the connection between the reader and writer. 

In addition, improving the sharing prompts on the side was a small update that resulted in an increase in shares by new and existing users over the original design. 

Display + Programmatic Ads 

Supporting metadata such as fictional cast is shown on the right as a way to supplement the story.

Utilizing the grid around the story text, display ads fit within the grid to increase viewability when above the fold. We worked closely with our ad partners in order to determine the best ratio of ads to serve depending on story parts and length. As a user scrolls lower in the page, display ads are served minimally as not to distract the user from keeping focus and reading. 

display-ads
display between

Across all screens 

Generating ad revenue across all screen sizes on the web and mobile web was important to capture the biggest audience who now primarily read content on their mobile devices. Ads and recommendations that are seen on the sidebar on desktop become integrated into the content as a way to break and pause from reading. Being as transparent as possible informs the user that the content they are reading will continue after the ad and native story ads are clearly marked with a promoted label.

Continue reading + engagement loop 

Supporting metadata such as fictional cast is shown on the right as a way to supplement the story.

Utilizing the grid around the story text, display ads fit within the grid to increase viewability when above the fold. We worked closely with our ad partners in order to determine the best ratio of ads to serve depending on story parts and length. As a user scrolls lower in the page, display ads are served minimally as not to distract the user from keeping focus and reading. 

end of part reccos

Results

After release, we tracked our key metrics in reading time and saw a significant increase for new users and an even bigger lift for existing users.

Interviewing  new and existing users on a qualitative level, the majority understood how to continue reading after scrolling at the end, with no difficulty progressing through the story. 

User quotes included:

"it was easy, I'm a quick reader and I liked just scrolling and clicking when the chapter ended" 

"it was incredibly simple to read to the next chapter. The story is setup well with proper formatting and has a very easy to read font." 

Target revenue for programmatic and display ads exceeded our goal target and our native ad partners benefited from the viewability of their ads. 

Looking back, I would like to improve on overall retention for existing users and continue to better understand how their habits and contexts change to inform a more personal experience. 

View more projects

Tap by WattpadProduct Design

Wattpad Web ReaderProduct & Web Design

Designing for GrowthProduct Design

Companion MagazineVisual Design & Layout