hwatoon App/Product Design

Introducing "hwatoon," an innovative app that allows passionate readers to immerse themselves in the way they experience webtoons. This platform allows readers to not only discover new webtoons created by artists from all around the world, but also lets them foster a growing community in which they can communicate and have exciting discussions within the story. The exciting fusion between a reading and a social app where users are allowed to speak their minds and follow what their peers are reading. With customizable profiles, users are able to show their favorite picks, track their reading analysis, and share their profile with their friends.

Project Overview

"hwatoon" effortlessly connects a community through the joy of storytelling and digital art whilst creating a space where readers engage, share, and build connections from their mutual love for webtoons. This is the new beginning for interactive reading. This is where users are able to find their story now.

‍

‍

Research

To reach users from around the world, "hwatoon" must understand why people choose certain reading and social media apps to spend their time on. By gathering information and understanding the users' perspective, "hwatoon" is able to create an immersive reading app that combines the social aspect with the digital reading world.

Top social apps such as Instagram and Facebook allows users to connect with other users with a homepage curated towards their friends and what the users follow. Reading apps such as Webtoon and Wattpad focuses their homepage base on what their user's read. By combining both aspects, "hwatoon" allows readers to discover new webtoons while seeing what their friends are up to as well.

Loading and Login Page

Audience is first greeted by the app's name on the loading page and is then welcomed through the login page with a line that introduces them about what the app will be like. The targeted audience for "hwatoon" are passionate readers so the hook must first garner a connection with their users.

• Users will first look at the big picture that fills a majority of the screen. This will show users a glimpse of what some stories art will look like. The image chosen must welcome readers yet entice them by wanting to find that certain webtoon so that they can read it.
• Next users will read what is below the image. They can read more about the app if they swipe left. This can be seen by the 4 bubbles indicating what slide they're on.
• After users are familiar with the app, they will see a button that says "get started" which is heavily emphasized so users know what to click next.

‍

Home Page

The home page is curated based on what the user reads. The app has integrated an algorithm that makes users inclined to regularly check on their homepage to check which webtoons would specifically suit their tastes.

• Users can read where they previously left off on if they want to continue what they last read. This is convenient for readers who start a new story and wants to continue their binge, with just one-click on their homepage, they can go back to where they were at.
• Featured webtoons have their own banner in order to show exclusivity and garner excitement for mostly newly released stories or maybe a highly-awaited comeback.
• Recommendations allows users to see what else they can add onto their reading list. They can conveniently save what they saw on the homepage with a tap of a button. User can easily see if the story has already been saved with the yellow colored bookmark whereas the white colored is not saved yet.
• Ratings are shown first so readers would not waste their time glazing on stories that they know they wouldn't like if they base it off user ratings. Why waste your time reading a story you know you wouldn't like it if the majority doesn't?
• Home bar is located at the bottom so the app mimics a common social media app.

‍

Profile Page

The profile page is the most interactive of them all. The most social part of the app. Users that are here for the social aspect of the app can check out their friends activities and statistics as well for a fun comparison.

• Incognito mode allows users some privacy when they want to gatekeep or keep the stories that they are reading for private use. Sometimes, you might just have a guilty pleasure you want to hide..
• Profile biographies allow users to control more of their free-will, allowing them to introduce themselves and what they like to read.
• The switch between the user's progress and analytics are seamelessly integrated into the profile page to allow for ease of access. Users can check out what anyone is currently reading or have finished reading and switch it to the "Analytics" tab to check out where they're at with the reading statistics.
  • By integrating rankings and statistics, this makes users more motivated to use the app and get a top rank as well as looking into what their friends are currently into and what rank they are placed.
• A user's list is technically like a playlist where a user adds in what stories they want to depending on what playlist they are making. Users can change the visibility of their list, whether they want it public, unlisted, or private. Public lists that garner many likes from users are more recommended.

Saved Page

The saved page allows users to look back on what stories they wanted to save. This conveniently allows them to continue searching for new stories as they save ones along the way.

• Display information can be toggled by large or small thumbnails. This is up to the users' preferences. If they want to see more of what they saved, they can switch to the smaller thumbnails which allows more stories in one screen. If the user wants to see more of the bigger thumbnails, this would allow them to access to more information for each webtoon.
• For the bigger thumbnails, the recently saved are more emphasized by putting the image, title, description, genre, and rating of the webtoon. This is so users can check out what they saved and see if they want to start reading what they saved. A quick summary and rating would allow for a quick decision if they want to start it.
  • The carousel banner would make the user experience more seamless as users know how many webtoons are in the banner as well as what slide they are at.
• All other banners below the bigger ones are more compacted to show more stories. This are more older saved ones so they are not emphasized as much, showing only the name, ratings, and genre.

History and Search Page

The search and history page allow users to navigate through their webtoons. The search page is made so users have an easy time looking for webtoons and its different genres. The history page allows users to check on what they have read and continue reading where they left off on.

• Search Page
  • Genres on the front page are curated based on what the user generally reads. In this case, you can see that users love reading romance, fantasy, and royalty the most. Users can also check out other genres if they wish to explore more.
  • Recently searched allows users can check out what they recently looked out and if they're not interested anymore, they can exit it out.
  • Webtoon status are also seen so users can check out if stories are ongoing, completed, or on hiatus.
  • Top webtoons of each genres are listed so users get to check out new stories.
• History Page
  • Users are able to look up recent webtoons that they read. They are split and organized into dates. Users are able to check out the last time that they read it.
  • Users can click on the webtoon to continue where they left off on.
  • Chapters are shown so users know where they're at.

‍

Saved Page

Story page allows users to check out information regarding the webtoon they're checking out. This allows users to gauge at what they currently interested in and if it they would like to start reading or saving the webtoon to their list.

• Back button allows users to go back to where they were at. Users can also swipe back to the original page.
• The "more" icon is an ellipses so users can easily check where they can do more quick task actions in regards to the story. Users can share, save, and do even more.
• A quick summary is so users can have a gist of what kind of story they're looking at. This allows users to check out if the webtoon is a right fit for them.
• The social part of the webtoon is where users can see if their friends are also reading the same story.

‍

Webtoon Page

Webtoon page allows users to read their webtoon in full resolution with no interruptions. With a tap of a button users can check out what chapter they're at and how much more they have left to go.

• Users can scroll like any webtoons in order to continue reading.
• Users can check on the status of their reading.
• Users can also share, favorite, mute, and screenshot in a single tap of a button.

Conclusion

This was a personal passion project that I started working on in 2022 when I was first playing around with Figma. After starting a few courses in Google Coursera's UX Design and completing a certificate in Digital and Web Design, I was able to go back and revise the versions that I started with. I worked on overall balance, hierarchy, easiness, navigation, and most importantly user experience.

The reason why I chose a reading app is because one of my favorite hobbies is to read manhwas before going to sleep. I also like to scour social media, looking through what my friends are doing. This is why I made an app that fused the best of both worlds. By mixing a reading and social app, I can enjoy what I'm doing while also checking out if my friends are also reading the same things as me or if I wanted to see what they're reading so I wouldn't be missing out.

All in all, this passion project allowed me to work with Figma more and gave me a better experience regarding user experience, design, and product knowledge.