About the project

Goodreads.com is one of the largest reading reviews platforms available. The website is based on users creating reading lists, and reviewing books they read. Each book comes with it's own product paragraph where users can read a brief of the book, add to their wish list, read reviews, and purchase the book via several links of outside sources.

WIREFRAMES & SKETCHES

For this project, I selected to start with the Goodreads Bookshelf page, which is supposed to be a personalized page for the reader. During my research, I concluded that the user would need three main selections:
- Books to read {sort of a "wish list"}
- Books read {the user can move them there when they are done reading}
- Books to review {theorically, the "read" books would live here until the user "reviews" them}
Developing the different screen views really helped me determine which layout to use.

HIGH FIDELITY MOCKUPS

Since this project had a 2 day time limit, I opted to create high fidelity mock ups vs wireframes. What you see here is the following:
- Desktop View
- Tablet View
- Mobile View
I decided to use muted colors, and paper-like textures to help enhance and feature the book covers, as they are works of art to begin with.

LIVE PAGE

I completed this project in 2 days, and, presented it to a group of about 12 people, including full stack developers, we discussed my design thinking process, and the technologies I used to complete it {HTML5 and CSS}.

WEBSITE Opportunities

WEBSITE's Threats

Barnes & Noble and Amazon.com the B&B website has a platform that has some important similarities {reviews, information, recommendations} but it's lacking the goodreads.com's social media aspect, although it lacks this very important feature, the B&N is a site that looks more "together" and makes "more sense" than goodreads.com.

WIREFRAMES

For this project, I selected to start with the Goodreads Bookshelf page, which is supposed to be a personalized page for the reader. During my research, I concluded that the user would need three main selections:
- Books to read {sort of a "wish list"}
- Books read {the user can move them there when they are done reading}
- Books to review {theorically, the "read" books would live here until the user "reviews" them}
Developing the different screen views really helped me determine which layout to use.
If you look at the sketches to the right, you will see some of the tryouts, my final selection was the layout on the far top-right, however, after consulting with various possible users, I also opted for the bottom-right mobile version because of screen sizes and demographics. It's just simpler to tap on one image than having two side-by-side to tap.
I also decided that to sort the books, we could adopt the same sorting system that Apple uses in Itunes, so users could sort them as "Newer" and "Older".

HIGH FIDELITY MOCKUPS

Since this project had a 2 day time limit, I opted to create high fidelity mock ups vs wireframes. What you see here is the following:
- Desktop View
- Tablet View
- Mobile View
I decided to use muted colors, and paper-like textures to help enhance and feature the book covers, as they are works of art to begin with.

LIVE PAGE

I completed this project in 2 days, and, presented it to a group of about 12 people, including full stack developers, we discussed my design thinking process, and the technologies I used to complete it {HTML5 and CSS}.