Manga Time

"Experience manga like never before."

Tools

  • Figma

My Role

  • UX design

  • UX research

Project Mentor

Aram StepanIan

Timeline

  • Overall: 8+ weeks

  • Discovery & Research: 2+ weeks

  • Design & testing: 6 weeks

Overview

MangaTime is a mobile app designed for manga lovers. It provides a seamless reading experience for readers by giving them access to a vast collection of manga in one place. The app also offers suggestions based on the user's watchlist and saved manga. MangaTime is designed to be user-friendly and easy to navigate.

Problem

People often struggle to find all their favorite manga in one place, resulting in difficulty keeping track of which manga they have read and where they left off. Furthermore, there is often a lack of suggestions for new manga to read based on a user's preferences, making it difficult for readers to explore new titles they may enjoy.

Design Process

Manga Time

Survey results

Surveys

I gathered data from the survey participants on their manga reading habits. Most participants read manga digitally and discover new titles through recommendations from friends or online searches. It is important to many participants to have all their favorite manga titles in one place and to be able to keep track of what they have read.

Target Audience

Based on the survey results the target audience for MangaTime is people in their 20s-30s who enjoy reading manga and have trouble finding manga titles to read and keep track of the same. The app is also targeted toward those who watch anime and want to know about upcoming episodes before they are aired.

Personas

I wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, I created 2 personas for each of our user segments. They were based on user surveys.

Solution

MangaTime app is to provide a comprehensive collection of manga titles in one place, allowing readers to easily access their favorite manga and keep track of their progress. The app offers suggestions for new manga based on a user's watchlist and saved manga, helping readers discover new titles they may enjoy.

User Flow

This is one possible user flow on the specific design and features of the MangaTime app.

Manga Time

User flow for Reading a Manga

Manga Time

Initial sketches

Sketches

I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user surveys, the goal, and the heuristic evaluation. I came back to the sketches throughout the entire design process to make sure that I don’t lose sight of our primary goals and ideas.

Design Style Guide

Manga Time
Manga Time

Low Fidelity

Low-Fidelity

Using Figma, I translated my first sketches into low-fidelity digital wireframes. This stage was focused on exploring different design options and testing them. Based on the test, I’ve made a few alternations and moved on to creating Mid-fidelity prototypes.

Manga Time

Mid-Fidelity

Following the feedback I received on the functionality and structure of my low-fidelity wireframes, I made revisions and created a mid-fidelity version. I then conducted another round of user testing to gather additional feedback.

Manga Time

High-Fidelity

The high-fidelity design was the final stage of the design process. It involved creating a detailed and polished prototype that includes all the functionality, layout, and design elements of the final product.

Manga Time

Home screen

Manga Time Prototype

Learning Outcomes

The case study also exemplifies the design thinking process, which involves, defining the problem, ideating solutions, prototyping, and testing. This approach allowed me to better understand the problem that I was trying to solve and to generate innovative solutions.

It also provides insight into the specific challenges and opportunities involved in designing a manga reader app, such as organizing content, providing a seamless reading experience, and integrating social features.

Thank you for reading my case study!

Want to work with me? Feel free to contact me!
...or just say hello on my social media.