Novelette

Novelette is a webtoon reading app with an extensive library of webcomics of all genres.

ROLE

ROLE

UX Researcher

UI/UX Designer

UX Researcher

UI/UX Designer

TOOLS

TOOLS

Figma

Google Docs

Adobe Photoshop

Figma

Google Docs

Adobe Photoshop

DATE/DURATION

DATE/DURATION

Started Mar 20, 2023

Completed April 28, 2023

Duration 5 weeks

Started Mar 20, 2023

Completed April 28, 2023

Duration 5 weeks

The Problem Statement

Context

Context

Novelette is a freemium webtoon reading app that has been around for 2 years and has built up a solid user base for their free product. They want to design an experience that allows the free users to subscribe to their monthly app service.

Novelette is a freemium webtoon reading app that has been around for 2 years and has built up a solid user base for their free product. They want to design an experience that allows the free users to subscribe to their monthly app service.

Target

Target

Novelette was designed around people who love reading webcomics, and aren’t willing to break the bank to enjoy webcomics and support their favorite creators. The free product uses a coin-based system to “buy” webcomic episodes. Coins can be bought or earned. The VIP membership is a monthly fee that unlocks all episodes, removing the need to use coins.

Novelette was designed around people who love reading webcomics, and aren’t willing to break the bank to enjoy webcomics and support their favorite creators. The free product uses a coin-based system to “buy” webcomic episodes. Coins can be bought or earned. The VIP membership is a monthly fee that unlocks all episodes, removing the need to use coins.

Solution Overview - Main Features

Community Section for Budding Artsist

Community Section for Budding Artsist

A space for up-and-coming artists to showcase their work and receive support from the webtoon community.

A space for up-and-coming artists to showcase their work and receive support from the webtoon community.

Personalized Homescreen

Personalized Homescreen

Onboarding to help new users find a series they would like to start with that leads to a personalized homescreen with tailored recommendations.

Onboarding to help new users find a series they would like to start with that leads to a personalized homescreen with tailored recommendations.

Use Coins or Sign Up for VIP

Use Coins or Sign Up for VIP

Earn Coins to unlock webtoon episodes in the free version or unlock unlimited access by subscribing for VIP membership.

Earn Coins to unlock webtoon episodes in the free version or unlock unlimited access by subscribing for VIP membership.

Research & Analysis

The goal for this project was to design an experience for free users to subscribe to a monthly service. To get a better idea of what this looks like, I conducted competitive research to gain a better understanding of what the experience looks like in successful models. I looked at 3 different webtoon apps: Webtoon, Shonen Jump, and Manta.


From studying the apps, I learned 2 things:

  1. Users want a way to be able to read webcomics for free.

  2. Users would pay for a monthly subscription fee only if it is affordable.

Goals

From reading user reviews on the Google Play Store, the biggest pain point seems to be the affordability of these apps. Here are some goals I had for this project:


  • Provide a way for users to use the app for free

  • Provide a more convenient way to use the app through a paid subscription

User Persona

To start answering the How Might We question, I identified the user base persona - The Webtoon Lover.

User Flow

Once the users were defined, I started thinking about the user’s journey through the app. Designing user red routes helped to define which features were absolutely necessary, which helped to narrow down the minimum viable product (MVP).

Concepts, Sketching, Wireframes

With the MVP set, I went straight to designing. The sketches allowed me to visualize and organize the designs I had been thinking of. I digitized the sketches into low-fidelity (LoFi) wireframes. I created a quick prototype and conducted usability testing with 5 users with some experience with comic reading apps.


The overall results were very positive with only a few comments about the design. Users were very curious about what the Community tab and Daily tab were. I had not prototyped these screens because in LoFi they look very similar to the Homescreen tab and also serve the same function. I used the feedback from the LoFi usability testing and integrated them into the next iteration of wireframes.

Homescreen

Community

Daily

Visual Design & Prototype

I wanted to use colors that were synonymous with webtoons, so I went with a green to blue gradient. The green is a similar green to the well-known Webtoon app and the blue is the Korean webtoon/webnovel app Ridi. I decided to modify the Book App UI kit by Madalin Duca. The UI elements are pulled from Material 3 Design System (M3) for android devices. Other UI elements were designed to compliment the M3 Design System.

Style guide

Style guide

Primary Colors

Primary Colors

#137C3F

#FFFFFF

#1E9EFF

#137C3F - #4ACF8C

#EDECFF - #FFFFFF

#A1FF8B - #5DA4FF

Gray Colors

Gray Colors

#334471

#9CA7BD

#E4E5F2

#F9F8FF

Secondary Colors

Secondary Colors

#941800

Typography

Typography

Aa

Satoshi

Heading 2

Heading 2

Satoshi Medium

20px

Satoshi Medium

20px

Heading 3

Heading 3

Satoshi

Medium

16px

Satoshi

Medium

16px

Heading 4

Satoshi

Medium

14px

Satoshi

Medium

14px

High Fidelity Designs

High Fidelity Designs

Test: Validation, Usability, Feedback

I took my newly designed app into the real world for usability testing to see if my design addressed the users’ needs I learned from the research phase.


I conducted usability testing with 5 users, all who had some experience with using eBook readers or comic reading apps. These users were asked to gauge the ease-of-use of the app. I tested this by asking the users to complete the task of reading a webtoon episode and also the task of signing up for the VIP Membership.


All users were confused by the Community tab. Users were expecting a Reddit-like community forum on the Community tab screen instead of a space for community artists to showcase their work. I took various feedback from users about what this space should look like and performed a quick A/B test to see which Community tab screen users liked.


Overall, all users really enjoyed going through app and commented how they liked the look and feel of the UI. One user said, “It feels like an official webtoon reading app.”

Challenges

Learnings

  • Prototyping was challenging for this project. I took some extra time to properly learn certain prototyping interactions, particularly the different scrolling states of elements (fixed, sticky, scrolling).


  • Designing the Community tab was challenging because usability testing showed that the initial design was not working. I relied heavily on user feedback in combination with competitive analysis to design a better Community tab screen.

Conclusion & Next Steps

  • I learned how valuable user input and feedback are to designing a workable solution, i.e. the Community tab.


  • Many users during testing gave excellent feedback! It was difficult trying to pick and choose the ones I was able to iterate in the timeframe I had left. There are 2 suggestions that I would definitely like to implement in the future - (1) A Discover tab to clean up the busy homescreen and (2) a choice between swiping left/right and scrolling for the webtoon episode navigation.

Linda Rieublandou ⏤ 2023

This website is best viewed on desktop

Linda Rieublandou ⏤ 2023

This website is best viewed on desktop