Goodreads Redesign

By Ahmad Shadeed on
22 Dec 2015,
Reading time: ~ 8 mins

I love Goodreads, it encourages me to read and introduces me to a lot of new things. But, as a designer I don't like their design and don't feel comfortable while browsing it. I'm excited to share what I've done with you! :)

Quick Wireframe for all the pages

Quick Wireframe for all the pages.

Once I worked on this quick sketch for all pages, I got an idea of the content of each one. I started with the home page as follows:

Home page wireframe:

Initial design for the home page

At the beginning, I thought that I will follow the same approach for all pages. There are some issues in the design:

  • Confusing layout: when you open the design you won't know where to look first.
  • Unnecessary sidebar: The sidebar is not good for less than 5 items.
  • Colors: I don't feel comfortable with it.
  • Collapsing concept: Notice the hamburger icon, when clicked the sidebar will collapse.There is no need for to this, it just added more complexity to the design.
  • Notice how the updates feed items are cluttered. Too much information without good distinction.

Now, I'm happy and excited because I thought that I made something good. I send the designs to some friends and then I realised that there is something wrong, really. All of them commented on the sidebar, the big brown background.. What's next?

I started thinking again and what I did first is to refine the header, with 3 colors options. Then, I send them to my friends and they said it's good, continue.

Actually, I didn't pick any of the above colors. I picked a green one and the reason is that we read books, right? the paper is made from trees. :D

Issues

  • The updates feed items are crowded. Make it hard to read the content.
  • At the right side, the user can update the status of the books he is currently reading. The place is wrong, it should be more engaging.

Then, I updated the design to be like the following:

As you see, I wrapped the book info it a separated box. Now it looks better and easier for the eye.

The above design have some issues:

  • Like and comment icons looks odd when they are filled.
  • Wrong position for the "Want to read" button.
  • The author photo is not necessary. Adds more complexity.

Then, I worked on an updated design for the home page with the following changes:

  • Make each feed items stand alone, better for the eye to distinguish it.
  • Moved the "want to read" button to the book grey box.
  • Added "like" and "comments" words for the icons and removed the fill style.

You see the "Update your reading status" above? If you click it will open you a box to update your current reading status as the following:

There are two issues in this design:

  • Unnecessary close icon at the top right corner. The user can simply click cancel in case he changed his mind.
  • The input field looks too odd.

Based on the above issues, I updated it to be like the following:

Home - Discussions

Profile Page

Below is the first design I made for this page:

The above design have the below issues:

  • Ugly bookshelves concept. Not consistent with the whole UI.
  • OMG, that’s green sidebar is really killing me.
  • The stats items height is too much.

After the removing the sidebar concept, I came up with the following design:

Below is the updated profile design:

As you notice:

  • The stats looks better now.
  • Bookshelves are better with simple look.
  • The feed items are separated to give more breathing space.

Book Page

It will show details about the book, way to recommend it to your friends, reviews from the community.

Here is the first design I made:

After the sidebar update, it became as the following:

The above design have some issues:

  • The author and book description are too much. Why not adding “more+” link?
  • I’m lost. There is no breadcrumbs.
  • The book details items (Publisher, Date.. etc) font is too small.

I solved the above issues in the below design:

Then I stopped a bit here and asked my self, why not trying another concept? I sketched the below concept and I thought that it will look better.

Once I started the design, I felt good about it but after a couple of days, I noticed that the old one is much better. Here it is:

The main issue here that the elements order is confusing, so you can’t focus and also, the author is look like a not important thing. While it’s really important!

Ok, so I went back and picked the final design, as the following:

Book recommend page

The below modal is appear once the user click on "Recommend" so he can pick friends and recommend them to read the book.

Book Discussion

The user can create a discussion post and get ideas, thoughts from the community. Below is the sketch I made:

Based on the above sketch, here is the first design I made:

As you see, the above design doesn't look good because of the sidebar issue.

Landing Page

Onboarding - Step 1

In this step, user can pick any of his social account to import friends who use Goodreads.

Below is the first design I came up with:

The above design have the below issues:

  • Too big social buttons.
  • Inconsistent fonts size. Notice that the step title is bigger than the inner green headline.
  • The next button height is too much. It should be consistent with other buttons in the website.

So after noticing these issues, I updated the design to be as the following:

Onboarding - Step 2

In this page, the user can pick his favorite genres.

The design could be better and less cluttered by removing the checkboxes. Since it's clear from the title that the user should pick something. Based on that, I updated the design:

Onboarding - Step 3

In this step, the user can rate books that he read so Goodreads can recommend him some books once you is done.

This is the first page that appear to the new user. I added a green border to the update status box so the user can start interacting as possible.

In case the user didn't fill all the required info in the sign up process, it will show him a message that the feed is empty and he should add friends to make the feed active.

Home page feed while it's getting the data from the server. You know, sometimes the internet goes down.

Home notifications popup

Home messages popup

Home success status update

Search

Messages Page

I imagined that one of Amazon team members will contact me regarding this redesign. :D

Messages - Delete modal

Messages - Empty

Settings

Settings - Error

404 Error

And now, thank you a lot for watching. My friend "Groot" saying bye and wishing you all the best.

Credits:

  • Smile faces: https://dribbble.com/LEM_ing
  • Landing page photo: Ryan G. Smith / Flickr

The End.