Case study — Redesigning Goodreads
Challenge
The challenge of this project was to improve my UI skills without the constraints of conducting user research. I decided to choose one of the most complicated apps to use on my phone: Goodreads.
Goodreads is a social media platform that was founded in 2007 and acquired by Amazon in 2013. It is designed specifically for book lovers and allows users to create virtual bookshelves, track their reading progress, write and read reviews, and interact with other readers.
Goodreads is free to use, and users can search for books and authors, add books to their virtual bookshelves, and join groups dedicated to discussing specific genres, authors, or book topics. The site also provides recommendations based on a user’s reading history, and users can set reading goals and participate in reading challenges.
Goodreads has a relatively low rating of 3 out of 5 stars, which led me to consider this app for my redesign challenge.
Even if the task was mainly based on the UI and the redesign, I decided to do some research, so I could have a solid base on my design choices.
Why do people use Goodreads?
Goodreads is the biggest book related platform, the functionality received a lot of critics and there are even YouTube videos about how users are supposed to use Goodreads. But apart from this, the core tracking function is effective, and the features are endless and they work well.
For example, the challenge feature helps to motivate you to keep up with reading books and the rating system works because a lot of people review apps like this one. Last but not least, Goodreads has a large community of book lovers and a lot of reading groups.
User Research
My first step was to start my research, trying to understand which issues the users had, google play reviews helped me with that.
- The first review I found was that some features exist just in the desktop version, for example the possibility to change the edition of the book while adding one to your library.
- When someone adds a book to the to read section, the book doesn’t go to the read section, sometimes the action needs to be done twice.
- The friend function it’s hard to use in the phone version, it’s hard to find for the friend search bar.
- Other comments are regarding the user interface that could be improved to look more appealing.
Main focus
Once I started to individuate the problems, I defined what it could be my pain points:
- The home page doesn’t reflect a core function of the app. The main page is empty if you have no friends, and it’s not useful for them, it also shouldn’t be the main feature, because Goodreads is supposed to be primarily a book tracking app.
- Inconsistency of the app. Many users were unable to see different editions of the same book title. They also suggested if the app follows the website’s footsteps, it would improve greatly.
- Research bar. It feels overwhelming to watch all the categories, if people want to discover new books and randomize on the genre, then we have the Discover page with the suggestions for you.
- Friends research. The search bar is hard to use, it’s difficult to understand how to find friends and books, and the scan option most of the time doesn’t work.
- Repetition of the same function. On your book page, there are two times the same option to go to the to read section.
- Outdated UI. The app is not really attractive and modern, and some functions could be represented in an easier way.
Heuristic evaluation
To help me define the problem, I used the heuristic evaluation, so I could also better determine in which flow I should focus to solve the biggest problem.
Heuristic evaluation is a great way to test and discover usability issues of your product and competitors as well. My heuristic evaluation has the following three goals:
- become familiar with social media reading apps
- develop
- practice Nilsen’s 10 Heuristic Principles
Nilsen’s design guidelines are a good point of reference in testing products. You can test products by using all 10 principles, but as a beginner, paying attention to all of them might be a little overwhelming. To practice, you can pick a few and complete an analysis based on your selection.
Visual Competitive Analysis
I analyzed the competitors and tested their apps as a user to determine what worked well and what had limitations.
I compared Storygraph, Reado with Goodreads and as it’s a mostly a UI challenge, I tried to compare their visuals with each other.
Stile tile
I decided to keep the color palette they have in their design, I just decided to modernize the way how the app should be used.
Mid-fidelity prototype
With the mid-fidelity I tried to study the before and after so I could focus more on how to improve the functionality, It took me longer than I thought because I did many usability tests to understand how natural and spontaneous was the flow.
Hi-fidelity prototype
Now I feel equipped with my background research and the Mid-fi Prototype I started working on the Hi-fidelity. Below are the final designs:
Home
I added a Currently Reading section at the top of the app’s page. This section serves as a reminder to users to update their progress every time they open the app. It also provides easy access to update and track the user’s progress for the different books they are currently reading, which is a key feature of the app.
Search
I added a filter function to the search bar to help users quickly find the books they’re looking for, after discovering that the original browsing system was overwhelming and complicated.
Find friends
Searching for a friend’s name alone can be difficult, so I added a friend filter that allows users to search for their friends directly from within the app. Additionally, I moved the option to share your profile with a link to the hamburger menu.
Friend’s profile
While it’s easy to access your friends’ profiles once you have them on your list, it can be difficult to find the information you need. To improve this, I have redefined the reading challenge box and shelves’ visualization to make it easier to navigate and avoid excessive scrolling for the user.
Book research
The current search bar doesn’t allow you to search for a book based on its cover, and once you find the book you’re looking for, it’s not possible to switch to a different edition.
The new search bar addresses these issues by enabling users to search for books by their cover and providing the option to switch to a different edition right from the beginning.
Add your book to your shelf
On this screen, there are two shades of green, one for the highlighted text and one for the reading button. While they are slightly different, they lack sufficient visual contrast to be perceived as distinct entities. Also the reading button’s color doesn’t is not repeated in any other part of the app. Because of that, I decided to use the darker green in the palette and integrate that as a main color in the app.
I also reorganized the key functions to improve usability and removed the outdated and incongruous blurred book cover background.
Add to my books
This page didn’t really have a matching UI with the other pages. The red button used to remove books didn’t correspond to the overall UI of the app, and it was hard to recognize it as a button. In general, I found the screen flat and is too simplistic and boring.
Your Profile
I decided to make a hierarchy between the elements in your profile, the reading challenge wasn’t highlighted enough. There were two buttons to see the currently reading page, but you could access both of them from the same page with one click, which it was repetitive and unnecessary.
About the reading activities, I decided to leave the same structure but to uniform the UI to the rest of the page.
Currently reading
I added the progress bar in the books, so the user can see directly how much is missing after updating the reading progress. I decided to keep the book’s title, author, number of pages, and a progress bar.
Next steps
I would like to improve the homepage more, I believe the homepage could benefit from a ‘recommended for you’ section but again, that’s also a core function of the app, so it could be useful to see it in the home page.
The friend’s page could include a section where you and your friends can compare reviews and opinions on common books.
Thanks for reading my article, I hope you enjoyed it.