Services
UX Design, UI Design
Completed date
Jan 2025
Tools used
Overview
The objective of this case study is to design a seamless and user-friendly reading app that brings both manga and comics into one platform. The focus is on intuitive navigation, personalized recommendations, and an engaging reading experience tailored to both manga and comic readers.
Discover
-
User Research
-
Competitive Analysis
Define
-
User Personas
Design Process
Ideate
-
Concept Development
-
Information Architecture
Design
-
Sketches & Wireframes
-
Iterative & User Testing
-
UI Design & Mockup
Discover Process
User Interviews
The objective of the user interview was to learn more about the expectations, frustrations, and reading habits of manga and comic enthusiasts. By asking them questions, we discovered user pain points. These insights provide a more profound understanding of user behaviour, indicating that features like seamless reading and easy navigation should be given priority. The interview helped identify opportunities to develop a user-friendly reading app that appeals to manga and comic enthusiasts.
Discover Process
Competitor Analysis
To better understand the market, key competitors were analyzed —VIZ, Asura Scans, Reaper Scans, and Webtoon—focusing on their features and limitations. Painpoints that our interviewed users had were missing in certain competitors. Most notably, none of the competitors had both manga and comics in a single platform. DualScans fills this gap by offering an all-in-one experience for both manga and comic readers.
Define Process
User Personas
Using the research findings, user personas were created to represent different user segments with their unique preferences, goals and frustrations. These personas helped empathize with users and design solutions that aligned with their specific needs.
Ideate Process
Concept Development
The objective of this concept was to develop a seamless, all-in-one reading experience that does not require numerous apps since the current platforms are catering to either manga or comics. The goal of the app is to be convenient and interesting for both casual readers and enthusiasts.
Ideate Process
Sketches
During the sketching phase, visualizing the mobile app layout was the priority. Sketches were created to explore navigation, feature placement, and overall usability before the wireframes.
Ideate Process
Information Architecture
Using the insights gained from research and layout from sketches, an information architecture was developed that outlines the structure and navigation of the app. During the development, revisions were made to the apps navigation based off the sketches.
Design Process
Low-Fidelity Wireframing
Utilizing the insights and previously developed information architecture, low-fidelity wireframes were designed to establish the structure of the app, along with its user flow. These wireframes served as the blueprint, ensuring a clear information hierarchy.
Design Process
High-Fidelity Wireframing
Building off the previously developed low-fidelity wireframes, the high-fidelity wireframes served the purpose of refining the visual aspect, implementing design elements, building on interactive elements, and giving a feel on how the final product will look.
Design Process
User Testing and Iterative Design
After designing the high-fidelity wireframes, user testing was conducted to gather feedback on the UI, usability and missing elements. Users provided insights such as rating scores, timestamps, and chapter count (downloadable content). Using these insights, an iterative design was created to address pain points and enhance the overall user experience.
Design Process
Mockups
The mockups showcase the final UI design in real-world scenarios. Showcasing interface visuals, interactions, and usability.
Conclusion
The case study aimed to create an app that combines both manga and comics onto a single platform. Through user research, iterative testing, and user feedback, the final product delivers an intuitive and engaging reading experience for all comic and manga readers.
Thank You!
For sparing some time and reviewing my work.