How I designed an app that transforms web text stories into real-time visual novels

ShubhamSingh
11 min readJun 7, 2024

--

In this case study I will explain my design process and decisions that I took along the way.

Introduction

Do you ever imagine your favorite web story brought to life as a visual novel? Or crave the addictive storytelling and visual of a webtoon but hate waiting for new episodes?

Wuri is an app that tackles those issues by converting your favorite web stories into real-time visual novels with audio, images, and video with the help of AI . This opens a new world of storytelling for users who prefer bite-sized, audio-visual content.

Here’s a prototype link of the app if you want to go ahead and skip all of the usual below (would prefer you to go through the log in flow) :

Wuri — Working Prototype

Problem Statement

Design an AI powered app to read stories as visual novels with images, videos, audio

Market Research & Background

To begin my research I wanted to first get an idea about the market for visual Novels and why people want to consume.

  • Fiction readers worldwide are spending more time and money on visual stories.
  • Additionally, the adaptation of books into blockbuster TV series and movies is growing and influencing the book market, indicating a strong interest in visual storytelling among readers.
Webtoon Market Analysis
  • This trend highlights a shift towards more visually engaging forms of fiction consumption, demonstrating an increased preference for visual narratives in the world of fiction reading.
  • Webtoon is the largest visual story player with 80Mn+ global MAU (Monthly Active Users) , According to the report published by Spherical Insights & Consulting, the Worldwide Webtoons Market Size stood at a revenue of $4.7 billion in 2021, and is projected to amass $60.10 billion by 2030, witnessing a CAGR of 40.8% from 2022 to 2030.

Target Demographic

  • Young Adults and Teens — This demographic enjoys engaging narratives, relatable characters, and visually appealing artwork.
  • Anime and Manga Fans — Fans of anime and manga are a key audience for visual novels and webtoons, as they share similar artistic styles and storytelling conventions.
  • Gamers — Gamers who enjoy interactive storytelling may be drawn to visual novels
  • Comic Book Enthusiasts — Readers who enjoy comics and graphic novels may also be interested

Limited Selection

In the past 20 years, Webtoon creators have created about 1Mn titles, while on platforms like Wattpad (text web novels), more than 500Mn stories have been written in the same time frame.

The entire process of creating a one-hour-long visual story in the form of a graphic novel or comic book could take a significant amount of time, likely extending over a year or more to ensure a high-quality finished product.

Even with the latest gen AI tools, it takes about thirty man-days to create a one-hour-long visual story.

After doing some background research about the market I wanted to dive deep in to see the process of creating a webtoon to get a better understanding of the challenges that writers face.

Process of Creating a Visual Novel/ Webtoon

The process of creating a visual novel or a webtoon is a very tedious one that involves several key steps as shown below

Creating the artwork for a webtoon or comic, including sketching, coloring, inking, and lettering, is the most time-consuming part. This process can take 6 to 12 hours per page, depending on the complexity and detail. Artists dedicate significant time to ensure high-quality visuals that effectively convey the story.

After getting a good understanding of the process of creating a visual/webtoon, I wanted to get readers’ point of view and for that I conducted user interviews

Key Takeaways from User Interviews

  • Readers lose interest over time waiting for episodes
  • Readers also lose track and context of the story due to the episodic nature of the visual novels
  • Locking episode behind premium plans also is a nuisance since a lot of the target demographic is made up of young adults and teenagers

Pain Points

From the above research this was my conclusion

  • Webtoons and visual novels excel at attracting readers, yet the episodic format can lead to frustrating pauses in the storytelling experience.
  • Episodic releases, while engaging readers, can stall momentum as creating visuals is time-consuming for authors.
  • The demanding schedule of webtoon creation, coupled with reader expectations for consistent updates, can lead to significant burnout among creators. Balancing high-quality content with timely releases necessitates careful time management strategies.
  • Due to this the library of visual novels, webtoons as compared to normal stories is vastly inferior.

Along with this I decided to do some competitor benchmarking from major players in the Indian Market that operate in a similar field. The likes of which included companies such as — PocketFM, KukuFM, Pratilipi.

Competitor Analysis

The common patterns I observed:

  • Onboarding (With an option to continue as a guest user)
  • Homepage
  • Search
  • Library
  • Information Page related to stories
  • A vertical scroll-based reading experience

Ideation

On the basis of all of the above information, I went ahead to create features for the MVP of the app

  • Homepage : With tailored content according to user’s preferences
  • Search : Function to search for specific stories
  • Library : To let the user save their favorite stories and see their reading history
  • Reviews : For the readers to review and share their opinions
  • Customization : To allow the user to tweak their reading experience
  • AI Recap : That allows the user to recap the last 5 episodes of the story so that they have enough context before resuming reading.

Information Architecture

The next part of the process for me was to create the IA for the app, so that it helps me in facilitating how information is grouped and navigated so that the users can accomplish their tasks.

Wireframes

Now that most of the theoretical work was done it was time for me to go ahead and make the wireframes.

I like to keep the wireframes very minimal and basic as that is what works for me the best.

Wireframes

Visual Design

Before beginning with the core screens, here’s a quick overview of the style guide and the branding.

Now that the brand identity has been shown, it’s time to get right into the screens and the flows that have been created for this app.

But before that I would like to establish the fact that the screens that have been shown below are while considering the fact that user is already a part of the platform (except for the onboarding).

Onboarding & Sign-up

Streamlined Onboarding: I prioritized a user-friendly experience from the very beginning. The onboarding process is designed to be both efficient and informative. Users here have two convenient options:

  • Sign Up and Register: Create a personalized account to unlock the full potential of the app and access all its features and benefits.
  • Guest Access: Begin exploring the app’s content immediately without creating an account.
Onboarding & Signup

To ensure a truly personalized experience, all users, regardless of account status (registered or guest), will complete a genre selection process. This brief step allows us to tailor the content displayed on your homepage, showcasing stories that align with user’s preferred genres.

During the genre selection process, users have the flexibility to choose a minimum of three genres that align with their interests. A progress bar located conveniently below the heading provides a clear visual indicator of user’s selection progress. Once the users have selected their preferred genres, they can proceed to explore the app.

Homepage

To ensure a smooth user experience, I designed the homepage following Jakob’s Law. This principle recognizes that users prefer interfaces that function similarly to familiar apps. Here are some key design choices that reflect this principle:

  • Keeping things clear and simple was essential for this screen. I achieved this by focusing on showing only the most important information in a clean, minimalist design. Plus, the layout feels familiar because it follows the same ideas as popular streaming and book reading apps. This makes it easy to use for anyone who’s already used those before.
  • I designed the homepage to be like user’s own personal discovery zone, similar to what you see on popular streaming apps and Twitter. Instead of hunting for what to watch/read, users will see great recommendations and their favorite genres right up front. Plus, with infinite scroll, users can just keep browsing through a ton of content — all without ever leaving the homepage.
  • The homepage showcases genre-specific categories. Each category allows for quick browsing through a curated selection of six stories. This provides users with a convenient way to discover top recommendations within their preferred genres. To delve deeper and explore the full selection, users can simply tap the directional indicator (chevron) located within each section.

Deep Dive into Genres: The category-based screen acts as an extension of the main homepage, providing users with an expanded selection of stories within their chosen genres. This dedicated space allows users to explore specific genres, showcasing a wider variety of content for their chosen interests. Additionally, a convenient quick action button offers the ability to seamlessly add stories to their personal library for later access.

Story Information Screen

This screen aims to be a one-point access for everything related to the story. Some of the key features of this screen are stated down below -

  • The top section of the screen serves as a thorough overview of the chosen story. It prominently features the cover image, alongside clear calls to action (CTAs) for immediate engagement. A concise summary provides a quick glimpse into the story’s plot. Below this, a swipe able section allows users to explore additional details, including user ratings, maturity level, and further information about the story.
  • Below the story overview, you’ll find two key sections:
  • Episodes: This section provides access to all published episodes, along with user’s personal reading progress for the current story.
  • Reviews: Read and contribute to reviews from other users to get a sense of the community’s thoughts.

Story Reading Experience

Designing the reading screens presented a unique challenge: maintaining a clean, uncluttered interface while still offering users the options for a personalized reading experience. The goal was to strike a balance between simplicity and user control, ensuring a highly engaging and interactive experience for all.

To enhance the reading experience, I wanted to revamp and deviate from the standard reading experience that you find in most book reading or webtoon apps.
The way the reading experience goes on other apps is that you vertically scroll through either the pages or through walls of text to progress the stories.

To enhance user engagement, I implemented a tap-based story progression system inspired by interactive media and games. This intuitive approach allows readers to navigate the story at their own pace:

  • Tap left: Revisit previous story segments for a refresher.
  • Tap right: Progress seamlessly to the next part of the story.

This simple tap-based system mirrors the familiar experience of navigating conversations in games, making it easy and engaging for users to explore the narrative.

This way the user has a lot of control on when and how they want to progress while reading the story.
This approach eliminates the “wall of text” often found in other apps, presenting the narrative in bite-sized chunks that are both engaging and manageable.

Moving on to the more personalized reading experience for the users, the key things that I wanted to focus on were accessibility, audio controls and brightness controls.

The key customization options that are present are as follows :

  • Accessibility for all: Users can adjust font size and style for easier reading.
  • Audio controls: Customize the audio experience with voice selection and volume control.
  • Brightness controls: Adjust screen brightness to suit different lighting conditions.

The main challenge during the development of these customization features was ensuring seamless integration within the existing tap-based narrative flow.
To address this, a dedicated settings icon was implemented. Upon selection, this icon reveals a secondary menu containing options episodes list and other control options.
This approach helped in separating settings from the story keeping the reading experience clutter-free.

AI Recap

For stories where users have read at least 5 episodes, an exciting feature called AI Recap becomes available. This feature provides summaries of key points and insights of the story.
This feature helps users stay on top of the story and helps in combatting the problem of readers losing interest by helping them recollect key points of the story.

To keep things concise, this feature only shows summaries for the most recent 5 chapters. A full recap could be overwhelming for readers.

Other Key Features

Some of the other key features that this app includes are -

  • Search : Allows the user to search for stories either by title or by genres.
  • Library : Library helps the user keep an active collection of stories that they want to read for later and also helps them keep a track of the latest stories and episodes that they have read.
    The intent behind designing this screen was so that the users can keep a track of all their stories that they have read or they may want to read.

This helps users to manage their reading habits and discover new narratives.

Future considerations

  • Working and implementing a revenue model for the app
  • Adding multi language support i.e. enables the user to read stories from a variety of language.
  • Adding more narrative based interaction stories where the user has the option to make choices to further progress in the story.
  • Converting older stories from prominent writers to attract new readers to the platform.

Thank you for making it this far into the case study.

Special thanks to Tanishqa, Sparsh, Vamsi, Harshita, Utkarsh, Rohan, Sahil & Abhinav for helping me out with this project and for making it possible.

I had a lot of fun working on this project despite the challenges that I faced throughout the project.

I am open to freelance projects, internships and full time roles. Feel free to reach out to me on LinkedIn & X.

--

--