Web eBook

Front-End / Back-End Tools / Product Management

Web eBook

Summary

The Web eBook is a fully functional prototype web book reading application to read public domain books on shmoop.com. Please watch the video below or click here to view the live final prototype of the eBook.

Role ― UI/UX Designer and Front-End Developer

James Whang, another intern, and I worked as product managers ― writing a technical spec for the product . I was in charge of the UI/UX and front-end. I created the wireframes and functional prototypes (Balsamiq, Bootstrap 3, Sass, jQuery, and PHP).

Team

James
Whang

Me!

Challenge

Shmoop has created content for many books ― summaries, themes, quote meanings, and much more. However, Shmoop does not have any books on the site, so users have to own a copy of a book from another source in order for them to use our products. Our project was to create a minimum viable product (MVP) in 3-4 weeks that would meet the needs of our challenge statement:

"How can we have our content directly available from a book?"

Solution

We created the Web eBook, a fully functional prototype book reader web application, to read books on Shmoop that would directly link to content on Shmoop such as summaries and book themes. The Shmoop eBook was developed with a Bootstrap 3, Sass, and jQuery front-end and a PHP back-end. View the final prototype of the eBook.

Final Prototype

UI/UX Overview

 My goal for the UI/UX was to keep the design simple and intuitive – no unnecessary functionality. This would allow the user to enjoy experience of reading instead of wrestling with the UI.

I wanted a robust experience that could handle all possible user inputs without breaking. I told my coworkers to try to intentionally break my pages, so that I could ensure the front-end code was as robust and safe as possible.

First Wireframe of eBook

First Wireframe of eBook

Layout

A major design decision I made for the tool was having one webpage for multiple book "pages" (right side of graphic below). From my usability testing with my coworkers, I realized that making users click through so many webpages was an annoying and tedious experience. I wanted my interface to infinitely scroll like Facebook's newsfeed versus a shopping site where you click between webpages to see items 1-49, 50-99, 100-149, etc.

eBook Layout

eBook Layout

Navigation

Since there are multiple book "pages" on a webpage, there needs to be a good way to navigate through them all. As a result, I ensured that people had multiple ways to navigate the interface, ultimately including "Next" and "Previous" buttons & left and right arrow key advancement to jump between pages, beyond traditional scrolling.

Page Navigation

Page Navigation (Gif)

Zoom In and Zoom Out

To accommodate multiple font-size preferences, I wanted users to have the option of changing the size on the interface.

Zoom Feature

Zoom Feature (Gif)

Quotes

The key reason to have books on shmoop.com was to link to content already created on the site. This was a key design feature because I was able to link quotes in the text with their explanation and corresponding book theme.

Linking Quotes

Linking Quotes (Gif)

Next Steps

Shmoop decided to go in a different direction and ultimately did not implement my design. However had they chosen my design, I would want users to be able to highlight and annotate books similar to medium.com. This would encourage a community element not currently present in the design.