Eloisa Docton

- Online based.
- Accessible..
- Speedy loads.

- Outdated look.
- Difficult to understand.
- Too many ads.

- Cleaner site.
- Direct book sales, and exchanges.
- Better sorting system.

- Barnes & Noble and Amazon.com the B&B website.




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 STRENGTHS




- Online based.
- Accessible to anyone.
- Speedy loads.
- No age, theme, demographic target.

WEBSITE WEAKNESSES




- Outdated look.
- Busy layout.
- No direct sales options.
- Difficult to understand the concept.
- Too many ads.
- Doesn't make sense.
- More relevant information needed.

WEBSITE Opportunities




- Cleaner site revamp.
- Direct book sales, and exchanges.
- Communities
- Better sorting and filtering system.
- Improve the personal pages.

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}.







- 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.

ABOUT ME

PORTFOLIO

RESUME