Case Study — Redesigning Webtoon App

Ironhack UX/UI Bootcamp — Project 3: Redesign

On the left, the Webtoon app, on the right, my redesign of the app.

Webtoon is a well-known app for reading digital stories from your phone in a format called webtoon. This format was created in South Korea and each episode is published on one long, vertical strip (making use of an infinite canvas rather than multiple pages so that it is easier to read on a smartphone or computer).

I have personally been using Webtoon for several months and I detected a poor UX/UI design. Therefore, I challenged myself to redesign the main screens of the app thinking about which are the most used features for the user. I was the only designer working on this project and it took 3 days to finish.

In the previous video, you can see a clone of the Webtoon app.

To further analyze the elements that are not helping the user, I did a heuristic evaluation.

Then, I performed a visual competitive analysis to determine the glows and grows of four competitors: Manta, Tapas, WebComics, and Bilibili Comics. I added Webtoon to the analysis in order to have a visual landscape of the different apps.

Developing a visual identity

I started determining the user interface personality with the mood board. As the app will carry many illustrations from the webtoon covers, I wanted a darker background. In this mood board, I tried to look for tones that conveyed a feeling of stillness. I associate reading the webtoons with coffee time, and some minutes to disconnect, therefore I chose reddish and brownish tones. I also added some purples because I know that many covers have this pink, purple vibe. I thought of a way of mixing all these different sensations, having a fun touch but without being overwhelming.

Then, I determined the style tile of the redesign.

High-fidelity wireframes prototype

In the video, you can see how I navigate through the high-fidelity wireframe prototype. For further comparing the two apps, here you can see screenshots of the Home, Explore, Library, and Webtoon summary sections.

My approach was:

• To increase the space and the minimal style of the whole app.
• To be consistent in the way of showing the webtoons, because there are many different titles with colorful covers.
• To show only the relevant information and those titles that will interest the user in the user’s home.
• To rearrange the navigation bar. The current app shows Originals and Canvas as the main sections to go, but they are webtoon types, not app features, therefore I changed the nav bar to have Home / Explore / Calendar / Library / Settings.
• To highlight the My Readings subsection on the homepage, because it is the most used feature of the app and it is under-shown in the current Webtoon app.
• To add filters to the Explore section so the user would find what she/he is looking for easily.
• To add a rating system instead of likes. As a more meaningful objective way of knowing how much people liked.
• To increase contrast from the green and white color combination of the current app.

Conclusions

This project was short and intense but it was an exciting learning opportunity. It was my first time redesigning a well-known app using a reliable methodology and I felt relaxed and confident although I was against the clock. I felt free to create and reimagine the design, which I enjoyed every minute. I was impressed by what Figma allows you to do when prototyping and I love the new update where you can add variables to your prototypes.

I encourage designers to redesign an app they use to understand how the app shows the different features and try to improve it!