Redrawing the User Profile for Line Webtoon — UX Case Study
Disclaimer: this case study was not performed by a Line Webtoon team or affiliate, just a comic-obsessed UX Design Master’s student!
Listen, I read a -lot- of comics. Like, a lot a lot. Probably too many. So, because of this insatiable thirst for romantic visual novels, I have several apps to cater to my addiction. The following case study is a love letter from me to the Line Webtoon app.
Line Webtoon is a comic-reading application with millions of readers and creators worldwide. However, the application’s user profile is very lightweight. The app also had a disjointed desktop-to-mobile interface, which made it difficult to switch between devices. If the user were to access their account between devices the result is pretty jarring. Overall, the experience was lacking.
This caused me to pause and think, hmmmm…there’s a UX solution here. Following research into the app’s user base — users divided into readers (content consumers) and creators (content creators) — I came up with the following How Might We statement:
How might we offer a more personalized, robust, and consistent profile interface for all Line Webtoon users?
The Goal
Now that I knew my direction, I needed to outline the steps I needed to take to start creating the solution:
- Design a User Profile (as Line Webtoon didn’t have one, really).
- Connect the experiences between mobile and desktop users.
- Provide users with a more personalized experience.
I knew who my users were; Readers and Creators. Having prepared user personas from my research I took them and created a persona map. My user personas are:
Melody Media
- Reader
- Tenacious, opinionated, and excited about stories
- Loves supporting artist-run media
Chelle Composer
- Independent Creator
- Creative, driven, Type-A personality
- Creates stories with a goal in mind, whether becoming monetized or finishing a project
Goals and Pain Points
Melody wants to find and read new comics, preferably by independent (non-licensed) creators, and Chelle wants to get their comic more attention. However, both personas find that there is a lot of advertising bias in the app and that prevents them from properly meeting their goals. Outlined in my persona map, the desired outcome is for Melody to find new reading material, and for Chelle to gain a new subscriber.
But how can a user profile help this, you might ask? They’re parallel parts of an app like this, and I’ll get into that shortly!
The bottom line here that needed to be addressed was this: how can I provide a user profile that’s modern, easy to use, familiar, and meets the needs and goals of readers and creators alike.
The Ideas
I explored various ways to provide a profile, and during my ideation phase I probed into the second problem I had identified. This was another aspect that could potentially be solved with a robust user profile: tagging, searching, and advertisement relevance to the user.
Based on user interviews, a focal frustration for readers was the staleness or impersonal ads related to comics they either already read or had no interest in reading. Ideally, a good user profile would give readers the power to personalize their ad experience based on keywords, which in turn would give creators the power to advertise their comics more easily to wider audiences.
First, however, the user profile needed to...exist.
The Wireframes
I began to piece things together visually. I based my profile on popular profile-centric user applications (such as Pinterest and Instagram) and examples from apps leading in the web-comic industry (such as Tapas, and Tappytoon).
I started by using the framework from the partial profile provided by the desktop version of Line Webtoon for creator use. Creators need to use a desktop to upload and update their comics, so the desktop app has a barebones profile that features “Your Comics”, “Dashboard”, “Comments”, and “Account”. All of these features are pretty underwhelming, but solid foundations for creating a bigger, better, buffer profile.
Your Comics: Line Webtoon highlights the user’s recently viewed, subscribed, and downloaded comics. Which is important! That’s the whole app! So, instead of changing this, my wireframe adds additional ways to view comics and an updated presentation so the user is more obviously directed to whatever category they’re looking for. This is also the default profile page.
Dashboard: This is where the creators can upload and update their comics. Additionally, this tab provides information based on reader interaction with the comic, statistics, and other important things the creator might want to know about their IP. There’s no reason a creator shouldn’t be able to access this information through their phone or even plan comic release dates. While a desktop might be necessary for uploading the high-resolution drawings, my wireframe provides suggestions for adding keyword tags, viewing stats, and general information that can be provided by a glance.
Comments: Currently, on the mobile app, users can find their comment threads under their comic feed tab…which is confusing. Giving the community portion of the app its own page seemed appropriate as a big part of the user experience is community interaction.
Account: This is a utility portion of the profile, currently the app doesn’t have a good password recovery method and when registering an account you might accidentally make two separate accounts with the same email…which is problematic. My wireframe proposes beefing up the user account significantly so the user can feel more secure and easily update and change their personal information.
The Prototype
As I expanded on these functions, I developed a prototype with Adobe XD. I needed to know if I was on the right track. Soon after developing a somewhat more sophisticated version of my wireframes I scheduled user interviews.
The Interviews
I sculpted my interview script with a handful of tasks in mind:
- Can the user scroll the homepage/see more of their comics?
- Can the user figure out how to return to the user profile when the app navigates to another tab (such as Originals or Canvas).
- Does the comment tab make sense, and can the user identify new notifications and how to view them.
- Does the account tab meet the user’s expectations based on other user profiles they have in other apps.
I was only able to interview 4 people, but the group was diverse in age, mobile phone use, reading material and demographic. The results were satisfying!
User 1 — 67 y/o, reads fantasy/non-fiction paper books almost daily
User 2–28 y/o, reads webcomics infrequently
User 3–27 y/o, reads webcomics frequently
User 4–32 y/o, reads webcomics on Line Webtoon almost daily
When presented with navigational tasks, the interviewees found it easy to get where they needed to go. The biggest complaint about the presented experience was the comment tab, and how to present a user with notifications.
When asked whether or not the prototype met expectations in terms of what a modern user profile looks, feels, and acts like, the interviewees felt as though it did. One interviewee expressed their desire for the user profile feature to be implemented “asap!” (high praise, in my humble opinion!).
The Results
After compiling all the data I collected from my interviews, I analyzed my results and provided recommendations for the next steps (if this idea were to ever fall in the hands of a benevolent executive). I knew I wanted to continue moving forward with fortifying the user presence on the app, and that starts with a handy dandy user profile. I recommended fleshing out the profile and examining the current advertisement algorithm to make it fresher and hook into the now beefier profile to provide a more direct and purposeful advertising experience.
The Brand
Of course, no design experience would be complete without examining the brand identity. In this case, tying the brand to the results and the provided next steps!
I created a mood board in order to focus my brand voice further:
In this case, a brand persona was necessary. From all the data and personality I had compiled, Whitley Webtoon was born!
Whitley Webtoon
Whitley Webtoon is a vibrant individual, with dynamic
gestures, faces, and ways of speaking.
Whitley is the assertive and friendly face we can all feel using the Line Webtoon app! Traits outlined included persistence, playfulness, and uniqueness. Whitley is everything extrovert but not in an annoying way, their energy is addicting and they enjoy guiding users.
I wanted Whitley to be an approachable brand persona that encompassed the more entertaining parts of comics: dynamic speech, assertive personality, animated movement and facial expressions, and an overall “protagonist” vibe.
The finishing touches for Whitley are found in the various brand lexicons. Webtoon’s color palette highlights their bright green, and I paired the brand green with other neon colors and monochromatic tones for a cool effect. Whites and charcoals provide structure where the bright colors can shine, so the user isn’t overwhelmed and the app is both bright but easy to read and use for long periods of time. Verbally, Whitley is casual and informal, because the most important aspect of Webtoon is that the app is for everyone. Whitley is made to appeal, in a fun way, to all ages and demographics who enjoy comics.
The Conclusion
Overall, I feel confident about recommending a robust user profile as I’ve outlined in my research. There are no cons to strengthening this core feature, in fact there are a lot of pros! The Webtoon brand is an approachable and friendly one, where users are encouraged to interact and create their own communities within the fandoms of their favorite stories. Line Webtoon would benefit greatly from additional user profile features and no doubt users would enjoy them too.
Thanks for reading, and happy holidays!
