Overview
For current readers on the Manga Rock app who was having trouble reading content on external sources, the iOS 4.0 and Android 3.0 update of the popular comic reading app offers improved content availability, accessibility, and reliability.
Unlike other aggregators in the market, Manga Rock now hosts its own content. This update introduced the official Manga Rock sources, along with other improvements across the board, including enhanced manga info, enhanced downloader, enhanced source picker, enhanced catalog search… to name a few.
I led a team of 5 designers to work on an end-to-end design process from ideation to implementation.
My Contribution
Coordination
Information Architecture
Design System Design & Documentation
UI/UX Design
React Native Front-end Development
Team
5 designers
1 product manager
12 engineers
Year
2017
Defining The Problem
Manga Rock allowed its user to read comics from multiple external websites. These external sources were not controlled by Manga Rock, therefore they can go down or change their code structure at any time. Although we were always ready to fix things, our users would come across issues that prevented them from reading now and then. In short, content was not always available and accessible to readers – which directly affect the bottom line.
We realized that this reliance on other sources for our content – the important reason why people come to Manga Rock – was not going to be sustainable in the long run. Especially when MangaFox and some other sites keep acting up, failed to load, leading to our readers being confused and frustrated.
We came up with this model of D > C > E > Connect that formed a complete consumption experience, and decided to tackle the discovery part of the experience first and foremost. The reason was that we saw that right now, although the consumption experience was okay, the discovery experience was not as good. People could not get access to the content they want to read and were totally unaware of all the content that they might want to read.
To rectify this once and for all, we release our own dedicated source – Manga Rock source, which aimed to be more reliable and update faster than any other source in the market.
Adopting Manga Rock source would mean a better experience for all of its 2.5 million users. Therefore, the main focus of the 4.0 version is to increase the adoption rate of Manga Rock source for all English-reading users, making it the default source in the app.
For the product, it would mean better stickiness, increased user loyalty, and retention.
Users
The users that we want to tackle constitute a big portion of the whole base: English-reading users. We further break them into different contexts:
- New users: They are exposed to Manga Rock for the first time.
- Discovering new manga: We identified that many of them were spending a lot of time looking for something to read rather than reading them.
- Encountering trouble: When reading a content and encounter trouble, readers are no doubt extremely upset. They would want to look for ways to remedy the situation or get help to know what they could do to continue.
Solutions
We would team up with stakeholders from different departments to discuss ideas, and finalized on a couple of them:
- For new users, make Manga Rock source the default source for English-reading users.
- Amplify the user’s perception of Manga Rock source’s quality.
- Redirect readers on other source to Manga Rock source.
- Features exclusive to Manga Rock source, such as hand-picked content, editorial collections…
- When encounter trouble, users should have a way to report them, get redirected to the same title on Manga Rock’s source if there is.
From a technical point of view, this project’s development will be running parallel on iOS and Android. Therefore, we decided to utilize React Native as the shared component between the two platforms on areas that require constant updates, such as source listing, for you, and account. This way, when there would be changes that need to be pushed, users don’t have to update the app through App Store or Play Store for it to take effect.
The project would be split into 3 different phases:
- Phase 1: Consolidating the design system and key areas of the app such as the home page, manga info and manga viewer.
- Phase 2: Favorites, downloads, recent.
- Phase 3: Account, settings, all the rest…
Information Architecture
The IA diagram helped designers and engineers make sense of what they are working on in the bigger picture. It is continuously developed and maintained as things change along the way in the design and implementation process.
New Feature: For You
Target user: Readers who have trouble finding something to read.
Solution: We believe these readers would find it much easier to find something to read if the content on the home screen would be more dynamic and relevant. Therefore, we replaced the static Featured tab with the new For You tab featuring dynamic content that can be configurable by the content team. The For You tab took into consideration the user’s device, taste, source… and display relevant content that fit them.
Furthermore, feeds are a simple way to establish habits, growth, and virality. It encourages and grows social community and form important habits.
The For You screen was consisted of a vertical stack of sections, each section about a specific way of display content, and can be configured from the server-side.
On the enterprise side, I worked on a portal for internal content managers to do Manga Rock Home Configuration.
New Feature: Richer Manga Info
Target user: Readers checking out a manga’s details to decide whether to read them.
Context: One year after its release, Manga Rock source (and Manga Rock Web) enjoyed huge support from Manga Rock’s current user base. Now that the source had been much more stable and rich enough, we decided to incorporate it into the app. There were several advantages when using the official Manga Rock source. First, it was far more stable than other sources. Second, the source featured richer manga-related content, such as author, character, genre, artworks…
Solution: Redesigned the Manga Info view to reflect this richer information, make readers more likely to read a manga title. It also redirects readers of other sources to Manga Rock, if the title is also available there.
New Feature: Issue Reporting & Handling
Target users: Readers encountering content errors in one of the sources.
Solution: Detect issues and let readers report them, then redirect them to the same title on Manga Rock sources or the website to let them know that the error was due to the external source, not Manga Rock’s fault.
On the side of people who had to handle these issues reported by the users, I also worked on the enterprise side on the Manga Rock CMS – Issues management system.
New Design System
We consolidated the current visual style into a coherent design system called Light Blue iOS & Android. This design system leveraged on the default iOS style guide and Material Design, with some customized components specific to manga.
Visual-wise, we introduced a new light theme as the default color scheme. It made the screen estate looks much more spacious and with the addition of new content, much easier to browse.
Finalized Design
The design was done in Sketch and Abstract.
