Manga Reader Application Redesign Caitlin Chan | ART 388-01
Why Redesign? Manga Reader has a lot of features among a big library. This redesign aims to make the steps to performing actions quicker, easier, and more organized for the user’s benefit. By condensing some information and expanding on others, a more consistent and easy-tonavigate experiece and interface can be achieved.
Caitlin Chan | Manga Reader Redesign
2
Business Case An easier to navigate layout will boost customer satisfaction and engagement, as they can get where they need to go without confusion. Maintaining consistency among use of icons and language will give users flexibility in options and easier engagement. By improving on the first-glance read of the series we have available, user engagement with partnering publishers’ series will increase. Tuning our interface to meet our users’ needs and experiences now will save costs of updates in the future, and allow users to become familiar with our layout for a longer time without frequent changes.
Caitlin Chan | Manga Reader Redesign
3
User Personas Kevin Huynh
16 year old student from Orange County, CA
Between schoolwork and gaming, Kevin is familiar with manga and what series he wants to follow up on. He wants to keep what he’s reading close to him, and with easy access. He’d benefit from keeping his own user library and being notified when a new chapter of his favorite series is out.
Dylan Shephard
22 year old recent UT Graduate
Dylan loves Marvel comics, and his roommates say he would like action-genre manga. He doesn’t really know where to start, but was excited to see such a huge library of series. He’d benefit from having easy navigation throughout the app, and from being able to filter through an extensive list of manga.
Caitlin Chan | Manga Reader Redesign
4
User Personas Ashley Matsuda
International student studying at NYU
Ashley’s had a smooth transition into the states— she’s even working part-time as a Japanese tutor at school. She misses reading and one of her students suggested she try our app out. Ashley would benefit from seeing if uploaded chapters are available in her native tongue, especially her favorites.
Jason Moreno
25 year old Computer Tech Assistant
Jason has a long commute from home to work, and spends most of that time on his phone. He likes to read manga from time to time but thinks it’s difficult to do so on his phone. He’d benefit from having customizable display options, as well as easier navigation throughout the app.
Caitlin Chan | Manga Reader Redesign
5
Use Cases As a returning user who is familiar with what I like to read, I want to be able to easily update myself on series I follow, so that I can enjoy my time reading what I’m here for. As a new user, I want to be able to find new things to read that pertain to my interests, so that I don’t have to waste time sifting through such a large library.
As an international user, I want to be able to set language guidelines and settings, so that I know what options are available for me throughout the app. As someone who likes to read for a long time, I want to be able to change my display options, so that I can comfortably navigate the app and my series.
Caitlin Chan | Manga Reader Redesign
6
User Flow Landing Screen
new user default
returning user default
Discover
My Series
filter categories
click on series
click on series
Series Detail
Series Detail
click on chapter
click on chapter
Read Chapter
Read Chapter
Caitlin Chan | Manga Reader Redesign
7
Wireframes
Discover
1
Considering our large library of series, steps have been taken to separate some of the content and feature others.
1. Sponsored publishers and series can be a part of editorial picks, placed at the top. 2
2. Updated or recommended series will be featured in its own category in Discover. 3. The navigation bar has been simplified into 3 main screens in order to get rid of duplicate or arbritrary features.
3
Caitlin Chan | Manga Reader Redesign
8
Wireframes
My Series
Previously named “Favorites,” the new “My Series” screen is no longer formatted in an overwhelming grid system.
1. Recently updated chapters will take priority at the top, allowing users a second notification as to when favorited series have been updated.
1
2
3
2. All other titles will be shown in list format, including current amount of chapters as well as time of last update. 3. Some users have many series they currently follow. The “sort” option allows for filtering through certain options.
Caitlin Chan | Manga Reader Redesign
9
Wireframes
Series Detail – Description The layout Series Details have been changed to separate important aspects, such as description and chapters.
1 4 2
5
3
1. Manga cover art or official art will be placed as the title background, with header buttons and series title/ author placed over it. 2. There are 2 sections for details and descriptions of the series, and for available chapters. 3. The client can choose content under description, such as related series or something pertaining to a business case (featured series, ad, etc.) 4. The favorite button will just be changed into a heart icon instead of a chunky button with text. 5. Publishers and Languages will be available to view for easier sorting.
Caitlin Chan | Manga Reader Redesign
10
Wireframes
Series Detail – Chapters With chapter listings, a new organization and sorting method have been included for easier navigation.
2 1
1. Chapters will no longer be displayed in grid format, and will instead be in a list, allowing for inclusion of chapter titles and reading progress. This will allow the user to know where they’ve left off in a series. 2. Across the number of chapters will now include a sorting feature, for users to look for chapters in both oldest-tonewest and vice versa.
Caitlin Chan | Manga Reader Redesign
11
Wireframes
Read Chapter
While there aren’t many changes made to the layout of the actual reader, steps have been taken to offer users both customizablity and greater legibility.
1
1. Slight borders around pages will be included, so there isn’t confusion as to when a fullpage spread is in view. 2. Current chapter and page number are made to be viewable at all times, as to lessen the steps needed to check where a user is.
2
Caitlin Chan | Manga Reader Redesign
12
Wireframes
Read Chapter – On Tap On tap, header and footer bars will be pulled into view for details and exit.
1 1. The header will include an exit button, series title, export button (to save pages to user’s camera roll), and button to change display features. 2. The footer will still only include chapter number and current page. The carousel with other pages has been removed to decrease cluster and unneccessary information.
2
Caitlin Chan | Manga Reader Redesign
13
Wireframes
Categories
Users can now easily view filters for their searches on series when browsing.
1 2
1. As there are many categories and genres of manga, a search bar has been made for faster navigation through them. 2. Users can sort through categories by different methods: genre, publisher, popularity, and language.
Caitlin Chan | Manga Reader Redesign
14
Wireframes Search
The search tool and its results have been remade to include more information while keeping legibility and cleanliness.
1 1. Users can filter their search by genre, publisher, and language. This feature will be placed on the right side of the bar.
3 2
2. Results will be displayed in list format, with more information than only the title and cover.
4
3. Users can also sort through results by popularity, publisher, alphabetical order, and language availability. 4. Available languages will also be displayed immediately, along with chapters, genre, and author.
Caitlin Chan | Manga Reader Redesign
15
Wireframes Settings
The “Settings” and “More” screens have been merged into one, since there are duplicate features in both.
1
1. Paying $4.99 to become a PRO User has been moved to the top for greater attention.
2
2. Customizable settings and management will be separated and labeled by groups. 3. Merging the two screens together includes moving both icons to the navigation bar, now known as just “Settings”.
3
Caitlin Chan | Manga Reader Redesign
16
UI Prototype Main Screens
Caitlin Chan | Manga Reader Redesign
17
UI Prototype
Filtering — Search and Categories
Caitlin Chan | Manga Reader Redesign
18
UI Prototype Series Detail
Caitlin Chan | Manga Reader Redesign
19
UI Prototype Read Chapter
Caitlin Chan | Manga Reader Redesign
20
Caitlin Chan | Manga Reader Redesign
21