Redesigning Goodreads
A UI/UX Case Study
I asked my followers on Instagram, “What’s one app you really despise?” To my surprise, many people hated the poor Goodreads app for being outdated and slow. So I decided to remake it. Here’s my journey.
Disclaimer: This project is in no way associated with Goodreads, Amazon and their affiliates. This is a purely personal project I have taken up to better understand heuristic evaluation and human-computer interaction.
Okay now that the legal stuff is out of the way, let’s do some revamping.
Background
If you’re not sure what Goodreads is, here’s what Wikipedia (humanity’s most reliable source) says:
“Goodreads is an American social cataloging website that allows individuals to search its database of books, annotations, quotes, and reviews. Users can sign up and register books to generate library catalogs and reading lists.”
In essence, it’s used to look up book reviews and recommendations, discover new books, and create reading lists. There’s also a social aspect, of which not a lot of users are aware.
Sounds pretty good though, doesn’t it? Satisfying a bookworm’s every whim?
It’s far from perfect.
While the idea is great, the execution is extremely flawed.
Out of the 65 people I surveyed, 35 people actively used the Goodreads app. I asked them exactly what they hated about the app, and this is how they responded:
Furthermore, out of the 30 people who had never used the app, 1/3rd said that they usually just ask for recommendations from their friends, unaware that Goodreads has a built-in social feature.
Thanks to the 65 people (ily all) who filled the quick feedback form, as well as the reviews on the Google Play Store, I’ve narrowed down the problem to a few specific pointers:
- The interface is ancient and the colours are boring AF.
- The social aspect needs to be emphasised.
- Practically no onboarding, so a new user doesn’t know how to use the app.
- The reviews need a more efficient filter.
- It’s slow as hell.
Evaluation
A lot of psychology goes into making user interfaces. To make sure the interface functions to the best of its ability vis-a-vis the user, I’ll use Nielsen-Molich’s heuristic evaluation methods.
Heuristic evaluation is a process where experts use rules of thumb to measure the usability of user interfaces in independent walkthroughs and report issues.
1. What not to do
A big part of understanding what to do is what not to do. Currently, the app, while maintaining a muted look, is overly complicated in its features and highlights the wrong aspects of the app.
Yeah, I was sorta brutal.
2. Wireframing
Wireframing was one of the most crucial steps in understanding the user flows of the app. When I opened Goodreads for the first time, I was overwhelmed with a lot of options and I didn’t know what any of them did. That’s why I made onboarding one of the primary parts of the user flow.
At any given point, there would be no more than 5 options on the screen, so as to leave the user feeling less overwhelmed. Keeping the choices easy and clear makes decision time faster for the user, thereby allowing them to complete the task at hand more easily.
Aesthetics
Aesthetics play a major role in how user-friendly an app is considered by a consumer.
Aesthetic Usability Effect: Users often perceive aesthetically pleasing design as design that’s more usable.
It allows us to even mask larger usability problems like a slow interface or a buggy UI. Ideally, we wouldn’t have that, but it isn’t a perfect world. We use this trick to convince the user that an app is more user-friendly than it actually may be, plus there’s always the added bonus of pleasing their eyes.
1. Colour Scheme
Currently, the interface employs the following colour scheme:
Seems drab, no? While I do see that the brown reminds one of a historic library with dusty books with parchment, the elegance is lost in the app.
I didn’t want to lose the essence the creators of the app meant to bring out, but I did want to make it brighter and warmer.
So here’s the new colour scheme:
You’ll notice I still keep the fundamental tones of eggshell and grey (albeit, lighter), but with a modern twist which the Windsor Tan brings. In conjunction with Sepia and Seal Brown, it provides a monochromatic progression.
Overall, the colour scheme is now warmer, more cohesive, and more welcoming (thank you to my ever-patient Instagram followers for giving me lots of feedback).
You can almost smell the old books, can’t you?
2. Fonts
I’m always partial to a sans-serif font. It’s easy on the eyes and reads with clarity. However, considering that reviews are long-form content, I will use a combination of serif-sans serif fonts. Here is an excerpt from an article written by Nick Carson on typography in apps.
Both San Francisco and Roboto are clean sans-serif designs, which tends to be the default choice for most app designers: sans-serifs are neutral and safe, and great for legibility on buttons, menus and headlines.
If your app contains large amounts of long-form content, however, a serif may well be a better choice. Medium, iBooks, and newspaper apps such as Bloomberg or The New York Times all use serif fonts, for instance.
As I am designing the app for an iOS interface, I’ll use a combination of New York and San Francisco fonts.
3. Microinteractions
I used microinteractions to lend a more dynamic feel to the app. When a user clicks on the arrow buttons, they see a gallery of books tailored to their book interests to give them a wide variety of options.
The Final Product
1. New Features
- Circles: An online book club to discuss current reads and recommendations
- Friend Activity: Follow your friends and receive updates when they start a new book
2. Redesigned Features
- Easy navigation with only 4 options — home, explore, friends, and user profile.
- Expanded “Save to Shelf” Option
- More readable long-form content in serif.
- Microinteractions on the homepage
- Cleaner, easier-to-use interface with minimal decisions.
Want to see the Behance project? Check it out here.
In conclusion,
- I’m always open to feedback. If you see any issues with the design, please feel free to email me at write2arundhati@gmail.com. I’m always looking to learn from new and experienced people.
- If you have any contacts in the Goodreads design team, make sure to tell them to hit me up!
- Follow me on socials! Not only do I do UI case studies, but also dabble in digital art and graphic design. Here are some quick links to my Instagram, LinkedIn, Github and Behance. When in doubt, I’m @arundhatibala.
Thanks for reading, see ya!
