Webtoon
Adding a feature to help readers effortlessly manage their series and stay informed on their reading.
Add a feature
Mobile
Role
User experience, user research, visual design, user testing, prototyping
Tools
Figma, FigJam, Otter.ai, Google workspace
Duration
4 weeks
Context
Webtoon, founded by a South Korean company called NAVER, is a digital platform that hosts a wide variety of webcomics and webtoons, essentially online comics.
What's unique about Webtoon is that you read the comics by scrolling up and down on your phone or computer screen. It offers comics in various categories like romance, action, fantasy, and more.
Note: This passion project is not affiliated with Webtoon and was carried out in the winter of 2023. Webtoon features may have changed since the creation of this feature concept.
Problem
Webtoon readers need to efficiently manage their subscribed series and track their reading progress. The current system lacks organization, leading to frustration and difficulties in finding specific subscribed Webtoons.
Solution
Adding a feature to help readers effortlessly manage their series and stay informed on their reading.
Some screens are displayed
Let's explore to understand
the problem
SECONDARY RESEARCH
What are Webtoon and its competitors doing?
I realized a competitive analysis of Webtoon's key competitors. This analysis helps in understanding their strengths and weaknesses, enabling the identification of what Webtoon can offer to its users.
Key Findings
All competitors just use one subscribed list.
Limited sorting and filtering options for the subscribed series (if at all).
Difficult to track at first glance which episode the user is on.
Opportunity identified
Stand out from competitors’ limitations by providing flexibility in subscribed lists, granular sorting/filtering, and intuitive progress tracking.
USER RESEARCH
What do users have to say?
To truly understand the problem, I conducted online and in-depth user interviews with 6 Webtoon participants. They shared their joys, their struggles, and everything in-between when it comes to managing their ever-growing collection of Webtoons.
Research Goal
Understand the needs, preferences, and pain points of Webtoon users related to managing and organizing their subscribed series on the platform.
Research Questions
What are the primary frustrations and challenges that users of the Webtoon app encounter while managing and accessing their subscribed series?
Limited sorting and filtering options for the subscribed series (if at all).
Difficult to track at first glance which episode the user is on.
Thoughts
“That's just one huge list. So I wish there was a way to, maybe create my own list. So I can organize it better.”
“I have so many (subscribed series) I could like easily pass it and not see it at first glance because everything it's just like together in one long list and there isn't really any way for me to like search or filter it out somehow.”
“But if I have to stop it then I have to figure out like which episodes I'd have to start like there is no tracker”
From understanding to defining
AFFINITY MAPPING
Connecting the dots: Unveiling user insights
After gathering the webtoon readers' thoughts, I started to group similar thougths together to identify the most common themes.
Common themes
Manage subscribed series
Find subscribed series to read
Discovering webtoons
UI and Usability
Webtoon Preferences
Earn coins
Reading experience
Preferred Device
Key user insights
83%
Users find their subscribed list disorganized and confusing
67%
Users struggle to locate specific series in a constantly changing list
67%
Users want to be able to order their subscribed series according to their preferences
50%
Users appreciate updates on series returns and hiatuses
83%
Users value visual progress tracking within series to stay engaged and motivated
USER PERSONA
Who I design for
Based on the user interviews and affinity mapping, I created 2 user personas which represent the target audience.
HOW MIGHT WE
Turning users needs into "How Might We" questions
Based on the knowledge of who I am designing for and the key insights derived from the research, I defined various How Might We (HMW) questions.
How might we…
enable webtoon readers to efficiently organize and manage their subscribed series to reduce frustration and save time?
help users to easily track their progress within webtoons, allowing them to pick up where they left off and maintain engagement?
help users to be timely informed when webtoons have paused or resumed, keeping them engage with their series?
Unveiling the essentials
FEATURE PRIORIZATION
From insights to action
After understanding the users I am designing for and formulating the HMW questions. I used these queries as the basis for generating feature ideas. Then, I applied the MoSCoW matrix to prioritize these features. The features in the Must-Have quadrant will be the ones to focus on.
USER FLOW
Mapping the user journey
Based on the identified key features, I created a user flow that maps out the user's journey through the product with the new incorporated features. This visual representation provides valuable insights for designing the product.
Transforming ideas into solutions
LOW-FI WIREFRAMES
Designing the features
Since the feature is something that is for an existing product, I started by creating low-fidelity wireframes to brainstorm and iterate on different feature options. This way I could determine which features held the most potential for high-fidelity development.
The concepts which were designed are:
Sort subscribed series
Filter series
Notifications of series on hiatus/return
Personal dashboard and one screen of episode progress
Add Webtoon to list
Visual episode progress
Insights from low-fi wireframing decisions
During the low-fi wireframing stage, I realized the absence of both the personal dashboard in the user flow and notifications for hiatus/return.
Due to time constraints, my mentor and I had a discussion and decided to omit the personal dashboard, while it offered potential value, user research suggested it wasn't a critical element for their immediate needs. However, we acknowledged the significance of notifications, given their minimal time investment, and chose to include them.
This decision allowed me to focus development efforts on high-impact features while ensuring core functionalities were maintained.
HI-FI WIREFRAMES
Finalizing the features’ design
In designing the screens, I primarily adhered to the established Webtoon Design System, ensuring consistency and familiarity for users. When necessary, I used the parent company NAVER Webtoon as a source of inspiration for specific features. As Webtoon's parent company, utilizing NAVER's design elements strategically allowed me to maintain brand coherence while exploring potential enhancements for certain features.
Some of the screens are shown below.
Let's test it!
USABILITY TEST
Testing the prototype
The usability test of WEBTOON was moderated and performed remotely with 6 participants. Each session was with the figma prototype and it lasted around 30-45 min. The participants were asked to complete tasks from the user journey.
Tasks
Add a new series to a list (in here the notifications of on hiatus/return will be shown first.)
Filter and sort subscribed series
Change a subscribed series to another list
Success Metrics
Users give an average of 4 out of 5 in ease to complete task
Users give an average of 4 out of 5 in content meeting their expectations
Users give an average of 4 out of 5 in likelihood of using the feature
Results
Although the metrics were outstanding, the task “Likelihood of using the feature” for Flow 3 wasn't as strong. There were various comments on the flows in general.
I analyzed all user feedback using a grid and categorized comments into worked, questions, changes, and ideas. Through futher analysis, I identified the most frequent and important issues (high severity & high frequency). All high severity feedback was taken into account for the next iteration.
Refining for a better experience
ITERATION
User feedback improves functionality
After defining what to work on based on the usability test results, it was time to improve the current design.
Return/Hiatus notifications were too much!
List names are not clear! Especially hiatus and dropped
Notification design B is good! But too much text!
It is too many steps to just filter my selected list!
I will never filter “reading” and “plan to read” together.
Where do I click? What does the trashcan and pencil do? Confusing to move series to another list
Prototype
Getting to a better version of the prototype
After defining what to work on based on the usability test results, it was time to improve the current design.
Embracing the journey
Next steps
Improve the wireframes screen size since as of now it is too small.
I think it would be good to see if the lists can be shared. This way friends can recommend a list of webtoons to each other easily. Instead of clicking each webtoon.
Evaluate and/or implement a search bar on the lists for people to quickly search for the webtoon they want
Lessons learned
Design is all about collaboration and iteration. Things change, but I need to make sure to define the problem as most that I can. I need to carry out a better and more in depth research. I need to improve my surveysI think it would be good to see if the lists can be shared. This way friends can recommend a list of webtoons to each other easily. Instead of clicking each webtoon.
See Other Work
Turtlfly
Mobile app to help immigrants in their immigration process.
End-to-End
Mobile
Branding
Florana
Responsive website end-to-end for a small business flower arrangement to help customers [add]
Responsive web design
Client
Branding