TACHIYOMI

TACHIYOMI

TACHIYOMI

category

UI/UX
Interface

2023

Case Study

8 Weeks

Figma, illustrator
Figma
illustrator

Deliverables

App Design


Tachiyomi is a platform that is meant to support the anime/manga community. It is an in-depth UI/UX project that serves to consolidate resources and elevate the user experience for users worldwide. Tachiyomi has been a passion project, a labor of love not just from me but on behalf of all my fellow otaku enthusiasts in the vibrant communities of Instagram and Discord.

Objective: Transforming the anime and manga experience: crafting an intuitive, visually immersive UI/UX for seamless navigation and vibrant community engagement on our streaming and reading platform.

​

Constraints: Incorporating maximum utility, inclusivity, and functionality. Encompassing multiple opinions on what the platform should be like.

Objective: Transforming the anime and manga experience: crafting an intuitive, visually immersive UI/UX for seamless navigation and vibrant community engagement on our streaming and reading platform.

​

Constraints: Incorporating maximum utility, inclusivity, and functionality. Encompassing multiple opinions on what the platform should be like.

(+)

Primary Research

(+)

User Mapping

(+)

UI Kit

(+)

Prototype

(+)

Testing and Feedback

Visit Figma File

Full fidelity wireframes

Stage 1

Data Collection

The first step was manual collection and categorization of the data from my Instagram account. The purpose was to identify the emotions and timeline throughout the months that were being traced. This would create a clear pattern that would reflect the events in my life during each particular month. 

Since the data is personal, the categories are a subjective representation. The given chart is a small example used to showcase the nature of saved posts. The entire data set was collected on a Google Sheet for analysis. 

Slide 1
BACK
NEXT

Stage 2

User Journey

The following 6 personas were created and analyzed in depth:

Alli- Artistic Otaku; 21; Anime+Manga Enthusiast
Chanakya- Leisure Weeber; 24; Casual Viewer
Maya- Parental Guide; 32; Versatile User
Alex- Techy Teen; 17; Active Communicator
Sakura- Crossover Gamer; 25; Industry Worker
Kei- Manga Artist; 30; Passionate User

Identifying isolated issues is the first step, and then placing them into the practical process is the next.

Alli

Stages of service

Creating a journey that defines the steps within steps, and the factors involved in each allows us to pinpoint the screens that need to be focused on.

Touchpoints

Creating a visual to represent the mood of the user gives us a realistic grasp of the major pain points, and the reasons the step is lacking.

Lived Experience

This user journey was an overlapped analysis of multiple user interviews as they stepped through the pre-existing manga and streaming platforms.

Stages of service

Creating a journey that defines the steps within steps, and the factors involved in each allows us to pinpoint the screens that need to be focused on.

Stages of service

Creating a journey that defines the steps within steps, and the factors involved in each allows us to pinpoint the screens that need to be focused on.

Touchpoints

Creating a visual to represent the mood of the user gives us a realistic grasp of the major pain points, and the reasons the step is lacking.

Touchpoints

Creating a visual to represent the mood of the user gives us a realistic grasp of the major pain points, and the reasons the step is lacking.

Lived Experience

This user journey was an overlapped analysis of multiple user interviews as they stepped through the pre-existing manga and streaming platforms.

Lived Experience

This user journey was an overlapped analysis of multiple user interviews as they stepped through the pre-existing manga and streaming platforms.

Stage 4

System Maps &
Information Architecture

In

Tachiyomi revolutionizes user experience through its ingenious circular system, reflecting a deep understanding of user priorities. By employing this approach, Tachiyomi streamlines its user interface, simplifying choices and enhancing customization.

​

The circular system within the app identifies user priorities, allowing for intuitive navigation. Users are presented with a streamlined interface that minimizes complexity. Instead of overwhelming users with an array of options, Tachiyomi presents them with simpler, tailored choices. This thoughtful design encourages users to focus on their reading preferences without getting lost in a labyrinth of menus.

prototype

View high fidelity frames in Figma

or scroll down!

Visit Figma File

Full fidelity wireframes

prototype

View high fidelity frames in Figma

or scroll down!

Visit Figma File

Full fidelity wireframes

prototype

View high fidelity frames in Figma

or scroll down!

Visit Figma File

Full fidelity wireframes

Epilogue

Reponsive Layouts

I made significant use of the auto layout feature to create responsive designs and found that the adaptations between screens mixed with customizable layouts in terms of density and colors creates a tailored experience that will automatically enhances the experience of users with different requirements.

Reponsive Layouts

I made significant use of the auto layout feature to create responsive designs and found that the adaptations between screens mixed with customizable layouts in terms of density and colors creates a tailored experience that will automatically enhances the experience of users with different requirements.

Laziness is Key

Yep- that’s it. Nobody likes to work a little extra. Seven clicks, remember a number, reset preferences, check for updates- no way. Once you realize that laziness is the universal problem for which design is meant to create solutions, the work process becomes crystal clear.

Laziness is Key

Yep- that’s it. Nobody likes to work a little extra. Seven clicks, remember a number, reset preferences, check for updates- no way. Once you realize that laziness is the universal problem for which design is meant to create solutions, the work process becomes crystal clear.

Stepping into Different Shoes

Many times while sketching out the wireframes, I was thinking about the importance of the flow of information, but when I laid it out on Figma, I kept coming back to place myself in the shoes of the user personas and tried to see it from their perspective- then made changes to the intial plans.

Stepping into Different Shoes

Many times while sketching out the wireframes, I was thinking about the importance of the flow of information, but when I laid it out on Figma, I kept coming back to place myself in the shoes of the user personas and tried to see it from their perspective- then made changes to the intial plans.

Vector

Explore

Explore

Branding + Website + Magazine

4 Points

Branding + Website + Magazine

4 Points

Interactive Kinetic Typography + Web Development + Vibecoding

Eigenlicht

Interactive Kinetic Typography + Web Development + Vibecoding

Eigenlicht