Scribd 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. until he falls asleep.

User Stories
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 side 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

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.