Kizuna
Share and Discuss Manga Ideas
A mobile platform that helps manga readers effortlessly express their thoughts and engage in meaningful conversations with fellow readers
Skills
User interviews Design System Prototyping
Team
1 UX Designer
Date
Aug 30 - Sept 6
Background
How all of this started
While I was reading a manga, I enjoyed going into a discussion forum for each chapter to share my thoughts as well as read other people's. The recurring issue I encountered was the lack of proper discussion forums. I found one small discussion form on Reddit and another on Disqus. There was a lot of activity there, and the comments ranged from 10 years ago to a few months and weeks ago. Because of this, I knew many people read the discussions and participated in them, but no platform accommodated them properly. On Reddit, not every manga had a discussion forum. On Disqus, there was no way to follow people and their thoughts on different mangas. I tried to go to other sites, like MyAnimeList (MAL) or Anilist, but there wasn't proper integration with discussion forums either
My process
I loosely followed the Design Thinking Process:
Empathize: I conducted user interviews and competitive analysis to understand the needs of manga readers
Define: I refined the user definition and crafted a problem statement using the How Might We framework
Ideate: I explored various solutions, from Reddit communities to Discord servers, before settling on a mobile app
Prototype: I developed an Information Architecture and user flows, followed by a medium-fidelity prototype in Figma
On a related note, here is the work-in-progress Design Thinking Process Map I created to help me know what to do during each phase, what mistakes to avoid, and how to iterate between different phases
Defining users
This was based on my assumptions, as I had not done any research. I knew that I could not interview completely random people (who may not be my users), so, I narrowed users down to manga readers. I also had to keep in mind not to narrow too much too early on, as I would miss out on potential users. I planned on doing foundational primary and secondary research to redefine my users
Empathize
While I had personally experienced and observed the problem of a lack of discussion forums on manga, I needed to test my assumptions and leave room for the unexpected. As such, I conducted primary and secondary research to deeply understand the problem space
User interviews
I interviewed two users to get a better idea of what types of problems manga readers face
One unexpected discovery was the lack of viable mobile apps for manga, as both users pointed out. Manga Reader 2 validated my hypothesis of discussion forums. She pointed out how she loved Letterboxd's social features, particularly making friends and reading other people's reviews
There were other problems too, however, I decided to scope down the problem right now because I didn't have enough time and resources to address all the problems
Competitive analysis
I wanted to get an idea of how the most popular manga sites handle discussions. As such, I researched MyAnimeList, Anilist, and Kitsu
Based on my analysis, there was no way for manga readers to discuss manga on mobile phone. And if they did, they had to use a clunky interface to post. This validated what I found from the user interviews
I also wanted to research other apps that focus more on discussions between users. Letterboxd focused on movie discussions, while X (formerly known as Twitter) focused on general discussions
This competitive analysis gave me insight as to how my competitors are solving problems for my users. From this, I realized that there is a gap for a mobile platform used for discussing manga. Looking at other apps that try to do similar things in other domains (like Letterboxd and X) proved to me that apps where people discuss with each other are successful in solving the human problem of wanting to discuss things with others
Experience map
I created an experience map to get a better idea of points of friction for users and how they would use different features
To get a clearer view of this picture, please visit the Miro board containing my rough work
From this, I got a clearer idea of when and why users may use this app (like when they are waiting for a bus and want to share their thoughts on a particularly exciting point of the story). In hindsight, I should have fleshed this out more
Define
User definition
I reclarified my users. I now knew that I needed to cater to mobile users as well as manga readers.
I did some more secondary research to get a better understanding of who exactly my users are.
I realized that 25.8% of manga readers are 19-24 years old, and 27.4% are 25 years old or older (based on the Shueisha Manga Magazines). Because the main goal of the app is discussions, focusing on readers less than 19 would have made it harder to have more mature and respectful discussions. So, for now, I decided to focus on the 19+ demographic
Problem definition
I knew that I needed to scope the problem properly (as I learned from my mistake of trying to solve too many problems in my other case study, myTransit Ontario). That said, I also needed to make sure that I created an open-ended problem statement. If I didn't, there wouldn't be enough space to think of different types of solutions. So, I used the How Might We (HMW) framework to frame the problem statement in an open-ended way
How might we develop a mobile platform that empowers manga readers to effortlessly express their thoughts and engage in meaningful conversations with fellow readers?
Ideate
Before committing to any kind of solution, I wanted to think of different ways I could potentially solve this problem. This included a range of things from creating a Reddit community, Discord server, mobile website, and a mobile app.
After fleshing out the Reddit and Discord ideas, I realized the issue with quickly adding thoughts. It took too long to navigate to the specific Reddit community and Discord server.
I also considered the mobile website idea. The biggest issues were speed and widgets. A mobile app was faster and easier to access than a website. Also, widgets can allow users to input their thoughts with one tap. Ultimately, I decided on a mobile app
Information Architecture (IA)
Just like how creating a house without a blueprint, designing the app without any idea of its general structure will lead to problems. To think about how to structure the mobile app, I created an Information Architecture (IA). From the foundational research, I knew that some of the most important things were writing thoughts and reading others'.
I thought about the bottom navigation bar common in many mobile apps (like X, Letterboxd, Instagram, Discord, Reddit). I believe this to be a good choice because many mobile users' mental models have adapted to this way of navigation (as evident by how popular the aforementioned apps are). So, rather than creating a new way to navigate through various important parts of the app, I picked the tried and true bottom navigation bar.
As evident by the IA, I chose to have 4 tabs: Home, Search, Add, and Profile. Home will be akin to a feed in social media where the user can discover new thoughts. Search will help the user to see others' opinions on manga they want to read or have read already. Add will allow the user to effortlessly share their thoughts. The profile will be necessary to see the users' friends
To get a clearer view of this picture, please visit the Miro board containing my rough work
User flows
I wanted to get a rough idea of the most important features (like adding your thought and reading others' thoughts). I created a hybrid between wireframes and user flows to think it through
To get a clearer view of this picture, please visit the Miro board containing my rough work
Prototype
After laying down the groundwork, I created a medium-fidelity prototype on Figma
Design System
I knew that I would reuse some components like the navigation bar, tab buttons, search, and user thoughts. As such, I created components and variants in Figma to streamline this process. This design system was based on my designs as well as some inspiration from the Material 3 Design Kit
Prototype files
Insights
Frequent Testing: More validation throughout the design process would have been beneficial as I still had many assumptions I needed to test
Scope Management: Focusing on core features helped maintain a clear direction for the app even if I was tempted by the problems I discovered during the interview phase
Check out my other projects