Redesigning Goodreads

UI DESIGN

ROLE

TEAM

SOLO

TIMELINE

THREE DAYS

The challenge

Our third project here at Ironhack and my favorite project so far. Our challenge was to choose one app to redesign. The only constraint is that we must select a well-known native mobile app. We had to redesign a minimum of three screens of our choice in three days.

The app

I immediately knew which app to choose, as I enjoy reading and keeping track of my reading list. That's why I've been using Goodreads.

However, I have to admit that the app isn't up to par. Perhaps the reason for this is that it was originally a website that was later adapted into an app.

Redesign

I maintained a similar color palette, but reduced the number of colors used compared to the previous app. Additionally, I employed a similar font.

The home page

I redesigned the home page first. I prefer a categorization similar to Netflix's home page. Instead of "Trending this week in X genre" or "Popular on Goodreads in Y genre", I want the discovery page to focus on genre categories, while the home page is focused on trending and popular in general.

I categorized it as:

  • Trending this week

  • Popular on Goodreads

  • Most read this week

  • New releases this month

For the navigation bar:

  • I removed the “Search” option and added a filter option for the search instead.

  • I moved the “More” option to the top of the page instead of having it in the navigation bar.

  • I moved the line over the icons below it, as it looked like a scroll on the original page.

 I also changed the scrolling to horizontal, showing multiple books at a time, and added the logo on the top of the page, giving it an overall new look.

The book details

The original page is cluttered with excessive information and text, along with random colors. It has two share buttons, one in the corner and another oversized one in the middle of the page.
The book details button is also larger than necessary for the information it provides..

Discovery page

I aimed to personalize the discovery page and allow users to find books similar to the ones they have read before. I added book ratings and information without requiring the user to visit the book details page. Additionally, I included a "want to read" button, similar to the one on the home page.

My books

I believe that the design of the book page needs improvement as the top and bottom sections do not match, they look like two different pages. To maintain consistency,
I aim to apply the same genre style on both the book details and my books pages.

Furthermore, the "+" symbol in the left corner is redundant and doesn't provide any additional information.

Prototype

 I've included the prototype of the short flow I created, although it lacks all micro-interactions.

Before & after

Final thoughts

This was one of  my favorite challenges, although there were many things I wanted to do but couldn't due to time constraints like finding better icons, micro interactions and finishing the profile page. During the design critique, I received good feedback from my fellow students.

I believe in the idea that you don't have to reinvent the wheel every time to improve your designs. It's essential to keep your apps and websites up to date by adding new features. It's also important to analyze your designs critically. I've gained a lot of knowledge and take pleasure in the fact that I can improve my designs further.