As an avid reader who likes to keep up on the latest trends in literature, I often find myself browsing Goodreads for new books to read and picking up the latest news in the literary world. I've been using the Goodreads website for at least seven years, yet I often find myself frustrated and disengaged with the mobile app. For this reason, I decided to play with the idea of redesigning the Goodreads app.
Challenges:
I began by picking apart the reasons as to why Goodreads failed to deliver on their mobile app experience. I started with figuring out their business and user goals.
According to their website, Goodreads aims to encourage the discovery of new books, foster connections with members of the literary community, and allow users to catalog their own reading histories. They do this by having many features that allow users to find new books, share and read reviews, create their own shelves that catalog each book they have read or want to read, and many more functionalities.
To get a better sense of user goals, I looked to user research to figure out what problems users were experiencing and what they wanted from the app. Due to a lack of resources and budget, I conducted limited user research with about four people. Through my research, I found that most users (that I interviewed) use the app primarily to discover new books, catalog their reading journey, and stay up to date on literary news. Everyone I interviewed found the UI to be unattractive and the UX to be difficult and confusing to navigate.
After thoroughly reviewing the app, I came up with three main pain points that I wanted to focus on: 1) The disengaging landing page 2) The confusing and scattered structure of the app 3) The need for increased emphasis on the recommendations feature
The Landing Page:
The goal of the landing page should be to have the user want to continue using the app and make it easy for the user to do so. The Goodreads mobile app landing page fails on this front because it immediately opens onto a disorganized slew of unnecessary and overwhelming information. According to users, the constant friend updates are unnecessary and the scattered structure makes the app difficult to navigate.
This is the current Goodreads landing/home page:
As you can see in the picture on the right, each update or news post is contained in its own separate white box. Posts in the same category are not grouped together, but mixed in with posts in other categories. Because I have no contact with the Goodreads UX department, I can only make assumptions about their current design, so I'm assuming that this is done to have a decent mix of information to maintain users' interest. According to my user research, this design actually confuses users and makes them less likely to use the Home page. The lack of organization or grouping together of the content makes it hard for users to clearly navigate through the app and thus results in a lack of engagement.
Solution:
My solution revolved around the idea of simpler navigation to reduce confusion and highlight what users care about.
My redesign landing page opens onto a Home page that offers three different tabs: "Home", "Community", and "My Books". Keeping only these three tabs on the landing page allows for less confusion and simpler navigation as these three pages highlight Goodreads' main functionalities.
The "Home" tab is what users see first. According to my research, users were having difficulty navigating the app because it felt disorganized. The current mobile app scatters news articles in between friend updates in its Home page, making it overwhelming for users and thus losing their interest.
I tackled this issue by organizing everything into gray boxes separated by category. For example, the "New in Literature" section highlights the top two stories in one gray box to let users know that both of these items are from the same section. If users want to look at even more stories, they can click on the "More" button above the box or continue scrolling to see what else the app has to offer. I did this with each section in order to help users navigate through the app with much less confusion. This easy-to-follow system allows users to skip the things they aren't interested in and focus on the things they like while also discovering new functionalities.
I added a side menu to accommodate all of the minor features.
I also structured each page in terms of what is most important to users. The first thing they see is the "For You" section which offers book recommendations. According to my research, users use Goodreads in order to discover new books, yet despite this, they don't frequent the recommendations page. One reason for this could be that the recommendations page is buried in the side menu and thus, users often don't know it exists. I decided to mitigate this issue by emphasizing it on the Home page. Users can browse through their recommendations on the Home page, click on the section box for more in-depth exploration, or continue scrolling. Below that section, I placed the "New in Literature", "Featured Lists", and "Goodreads Reading Challenge" sections along with a few ads.
"Community" Page
Earlier, I mentioned that users don't like seeing unnecessary updates on who their friends added on Goodreads. Using this information, I moved the friends updates from the "Home" tab to the "Community" tab and limited the section to only include updates on what friends read and rated. This way, users aren't bombarded by unwanted friend updates, but can still easily access information about what their friends read or reviewed.
"My Books" Page
In the "My Books" tab, I separated the top three shelves into individual gray boxes and incorporated a scrolling function where users could scroll through the books in their shelves without having to move to another page.
The "For You" Feature
Like I mentioned previously, users weren't actively using the recommendations page very often. Besides incorporating a "For You" section (I renamed the recommendations page to "For You") in the Home page, I expanded on the premise of the recommendations page further.
Currently, the recommendations page allows users to scroll through a list of books and categorize them as "Want to Read", "Read", or "Currently Reading" using a multi-click button. The algorithm then curates a list of recommendations using this information. The users that I interviewed feel that the categorization button is clunky and annoying to use and they quickly stop categorizing books when they get bored of going through the multiple motions.
I decided to create a Tinder-like recommendations page that allows users to browse multiple recommended books quickly and effortlessly. Users can swipe left for uninterested, right for want-to-read, and up for read. Users can also look at a book's summary, details, and reviews just like you would look at a Tinder bio.
Goodreads is a content-heavy app, so it may be confusing for users to browse through so many books with so much information and thus can hinder their use of the app or engagement with the recommendations algorithm. This Tinder-style recommendations system allows users to quickly browse through books one at a time, still retaining the important information that they care about, while also being able to effortlessly place books in certain categories. It's also just more fun! Instead of searching up every book you've ever read or want to read and placing it into a category, the swipe system brings books to you, making the process of building your shelves feel less like a chore and more like a fun (and productive) way to pass the time during a commute or in a waiting room.
Initial "For You" Page
The "Click Here" button leads users to this page:
Users can look at the summary, details, rating, and reviews.
If the user swipes right, the book is cast into the Want-to-Read shelf and if the user swipes up, they see this screen:
The Benefits:
1) This helps users build their "shelves" effortlessly, creating a positive feedback loop (swiping up and right = bigger shelves)
2) This gives the Goodreads recommendations algorithm something to work with in order to present a more tailored recommendations pile
UI:
The last thing I want to focus on is the User Interface. According to statistics, a majority of Goodreads users are female and in between the ages of 18 and 24. Furthermore, my user research shows that users think that the app looks old-fashioned and unattractive. Using this information, I created a color scheme that would appeal to the fairly young user base while also keeping Goodreads' current branding in mind.
I chose to redesign Goodreads with a clear white background, a green main color, two brighter pink and orange colors, and light and dark gray/brown accent tones. Goodreads' current color scheme revolves around a beige tone with brown, gray, and dark green accents. I didn't want to move too far away from their branding, so I chose to play around with their current palette while introducing new colors to the mix. I got rid of the beige tone and kept the background a plain white to give the app a more youthful and clean look. A clear white background offers increased readability and makes it easy to focus on the content, which is vital for a content-heavy app like Goodreads. I kept the gray and dark brown tones for the boxes, written content, and the "For You" page background to maintain Goodreads' neutral palette.
To add a fresh pop of color to appeal to the young user base, I took the green tone that Goodreads uses as an accent color and used it as the central color for the app. I also used a somewhat bright pink tone that complimented the overall palette for buttons and icons that I wanted to keep visible. The star ratings are a bright orange to allow users to quickly find and process the ratings for each book.
What I learned:
This is my first ever UX design, so I learned a lot! I taught myself Sketch and Figma using this redesign and I also brushed up on design fundamentals and the current trends. Suffice to say, I have a lot more learning to do, yet this project was a good way to dip my toes in design.
With this project in particular, what I found especially challenging was how to make such a content-heavy app cleaner and easier to process. Goodreads focuses heavily on information such as book summaries, details, reviews, news etc. and it was a challenge to figure out how to put all of that into one easy-to-navigate app. In my original sketches and designs, I didn't have the gray boxes, which made the overall look feel tight and clustered. Moreover, I tried out many different colors before I went with my current color scheme. Another obstacle was having to work around limited user research.
This design was a long process that took me on many unexpected turns. Of course, I have so much more to learn and I'm looking forward to using the skills I've learned from this redesign for my upcoming position as a Marketing intern and User Experience Designer for a startup company.
As a beginner in UX, I'm really excited to start my journey in design and would love to talk to other UI/UX professionals! If you have any feedback on my design, advice, or simply want to chat, send me an email at atiranair19@gmail.com.