Scribd Comic Reader for Web

Comic Reader for Web

Brief

The goal of this project was to introduce comic books to the Scribd ecosystem. While there are plenty of titles on Scribd that have full spread, rich color images, we had not optimized the UI for that type of viewing experience. While interviewing comic readers and researching competitors, we noticed that the trait that stood out was a dark background. This stood out because it made the images found in the comics to appear much richer. From this, we decided to create a unique comic reading experience for our readers.

Persona

Adam is a 23 year old college student. He spends his free time outside of class studying, and reading comic books on the web. He is very active person during the day, and spends a good deal of his time at home in front of his computer. Adam likes comics over other forms of literature becuase of their visual format.

User Story

As a user, I want to read comics on the web in a way that lets me fully appreciate the artwork.

As a user, I want to read comics in a vertical format for ease of use. 

As a user, I want to view titles in a fullscreen format.

Proposal

Design a comic reader for the web that lets the user view the artwork found in comic books and allow a means for them to bookmark pages they found interesting.

Role

Collaborated with another UX designer. I provided the Persona, User Stories and all Visual Design.

Early Explorations

I went in a few different directions to begin with. I wanted to optimize the layout so it would feel comfortable on most any screen size and resolution. To accomplish this, I tried some layouts with the bar anchored at the top and some where it's anchored to the left hand side.

Exploration 1

Here, the user has access to the controls at the top of the page. These would always be anchored, no matter the width of the display. This allows for easy access to all controls no matter the screen size. This soluiton poses a problem with truncation of the titles in the center.

Exploration 1

This is what the user sees when they press the "Bookmarks" menu button. This shows them a list of the bookmarks they've placed within a title.

Exploration 2

Here, the user has access to the controls at the top of the page. These would always be anchored, no matter the width of the display. This version allows for fuller view of the content, though poses some problems when the browser gets smaller in height.

Exploration 2

Another version of what the user sees when they press the "Bookmarks" menu button.



Final Layouts on Production

The final version was a mix of the early explorations and of the current text reader layouts. Removing a few options not related to comic books and changing the UI to a dark theme allowed us to implement a minimum viable product so that we could get to market in the required deadline. The early explorations were to be revisited at a later point on the roadmap.

User Controls 

On this screen the user has entry points to multiple areas. They can get details of the book they are reading (launched into a new view), add to their library, zoom in and out, go fullscreen, bookmark, scrub to any page in the title, as well as see the options menu.



Title Options

Here the user has access to other options to perform on the title. Vertical scrolling was added to the text-reader as a part of this feature; the rest of the features are existing to the product.



Reading Mode

Here the user can see the title in fullscreen with no controls. This is enabled by letting the control bar time out after 10 seconds, or by hitting the fullscreen button.



Bookmarks Menu

Here we see where a user can bookmark a title.



Vertical Scroll Mode

Here, the user has selected the vertical viewing format. This allows the user to easily use a trackpad to scroll to see the content.