Project Constellation: Phase 1

Wattpad's New Home: Establishing a Scaleable Modular Framework

 

Problem

We believe new and existing readers have problems easily finding stories they'd love and read. We will know we are successful when reading time for new and existing users have increased overall reading time, which will contribute to retention and growth. 

Web-specific Problems

  • Not responsive
  • Only 4 recommendations
  • Often sub-optimal recommendations due to most popular stories domin
 

Approach

  • Conducted user interviews (remote & in-person) to observe current content discovery behaviours
  • Consulted with Content and Community teams to understand known methods and behaviours for content discovery amongst our community
  • Consulted with Data team to understand current patterns in content discovery
  • Conducted a company-wide User Story Mapping exercise to visualize the new discovery journey
  • Conduct an audit of the current Home and other areas of the app that would involve content discovery to identify areas for innovation
  • Collect and analyze all potential content and meta data to be used in content discovery
  • Lightning Demos / Competitive Analysis of competing / related experiences
 

User Story Mapping

Project Constellation: User Story Mapping Part 1

Project Constellation: User Story Mapping Part 1

Project Constellation: User Story Mapping Part 2

Project Constellation: User Story Mapping Part 2

 

Strategy & Concept

  • Establish a new Home based on a modular system that would be powered by machine learning that would provide ongoing personalized recommendations that only improved as the the reader interacted with Wattpad and engaged with content. Examples:
    • Because you voted on X story
    • Because you read X story
    • Because you followed X profile
    • #tag related to what you've been reading
  • For new users of which we may not know much about, we would show modules that were universal, that showed a breadth of content to choose from. Examples:
    • Featured Stories
    • Trending Stories
    • Popular Stories
    • Curated Sets of Stories
  • The module system would have to work across all platforms, all screen sizes, all breakpoints
  • The module system would have to be flexible and be able to evolve for new use cases in the future
 

Content Audit / Patterns

 

Sketching & Wireframes

Based on all of the research, strategy, and concepts above, we began to wireframe potential solutions.

  • Different ways to layout the individual story, with varying levels of meta data exposed
  • Different module configurations 
  • Different module types
  • Seeing how the different modules fit together
  • Seeing how the modules would scale at different breakpoints
  • Ensuring the module system worked across all platforms
  • Gather feedback from stakeholder groups and users on early wireframes
  • Iterate
 

Modules & Rows, Types &Variations

Prototyping & User Testing

We then put the selected modules into an interactive InVision prototype to see how it felt to use and navigate

  • Black and white prototype
  • High-fidelity prototype with color, cover artwork, and photos
  • Feedback from staff
  • Usability testing with new and existing users
  • User interviews for sentiment
  • Aggregate feedback, iterate, refine

Scrollable Home Prototype

Going Beyond: Master Framework Concept Prototype

Always thinking about the overall system, I went ahead and created this vision for what the whole Wattpad system could look like if we implemented this modular framework throughout the whole site, as well as on mobile web. This helped to show how these changes could be reflected in future phases.

High Fidelity Scrollable Prototype

Rollout & Launch

After we had validated that users understood how to find content using the new home modules, and we got feedback that they would use the new Home to find content, it was time to build and test the real content with real users.

  • Because this was such a huge change for users (first page they see on login / sign up), we wanted to roll this out slowly to make sure at the very least it did not hurt reading time, our key metric
  • Quantitative Measurement: A/B test new design vs existing design with small set of users and measure reading time (retention) for various segments
    • New vs Existing Users
    • Age Group (Under 25 vs Over 25)
    • Platform (iOS, Android, Web)
  • Qualitative Measurement: 
    • Survey to beta group users
    • Network of Wattpad Ambassadors (passionate users who help moderate the community)

Results

Overall, we were thrilled with the response from users!

  • 4% increase in overall retention
  • Size of retention increase varied by group, but EVERY group saw significant increase in retention
  • One group saw nearly a 200% increase in reading time
  • Surveys yielded high satisfaction scores
  • 76% found it easy to do what they intended on the page, mostly about finding great stories and engaging quickly

With New Home a success, it set the foundation for a modular framework from which we could update all other parts of the Wattpad Web to ensure that it could scale, grow, and adapt to new needs and use cases, well into the future.