Re-designing Goodread's interface and branding
UI DESIGN ✦ BRANDING ✦ STUDENT SOLO PROJECT
🕑 DURATION: 4 DAYS
PROJECT OVERVIEW
(TL;DR)
❌ PROBLEM ❌
The interface of the current app is tedious and old-fashioned. People are not drawn to use it and can make non-readers feel discouraged from forming a reading habit.
🧩 SOLUTION 🧩
I modernised the brand's look and feel by changing the font of the logo to a modern version of Baskerville (a serif type) and paired it with a modern sans serif font, picked brighter colors to make it contemporary in combination with a cream hue to balance tradition and modernity.
For this project, the briefing was to focus on the UI aspect of a brand of our choosing, the goal was to propose a new brand identity and re-design their look and feel in the mobile app.
Goodreads
Goodreads is a social cataloging website that allows people to search for books, annotations, quotes, and reviews. Users can register books to generate library catalogs and reading lists. and also create their own groups of book suggestions, surveys, blogs, etc.
Why?
When I stumbled upon the Goodreads app it didn’t feel very exciting. Its branding and interface seemed monotonous to me and I certainly thought there was a lot of room for improvement in the look and feel.
I’m not a very avid reader, although I try to be. I’m actually what I call a “serial book starter”, sometimes I have up to 4 books on my nightstand waiting to be finished and some also waiting to be started, almost always I end up postponing finishing them.
And so, I figured: what if an app like Goodreads could appeal to people like me to the point of encouraging a deep dive into the reader’s world?
What I’m showing you now are the 4 screens of the actual application that I decided to work on, I used the atomic design method to dissect and analyse every element of the site:
From headers and navigation bars to buttons and icons, I was able to grasp the “vibe” of the app. I saw that they were trying to convey a very sober “bookclub” feel with it’s neutral cream hues and cold accent colours such as green and turquoise.
I also searched other similar brands to compare how the competitors branded themselves and analysed them, these were The StoryGraph, Bookslot and Libib:
I observed a consistent use of cold hues, such as blues and purples. Some of them maintained a very sober appearance, while others tried to convey a “friendly intellectual” feel. There was another detail that caught my attention, all of them used modern sans serif fonts both for the logos and bodies of text. A bit modern for the niche in my opinion, I found it interesting.
ANALYSING THE BRAND
RE-THINKING
GOODREADS
I wanted Goodreads to stand out from the rest and I already had many ideas for it but, first things first, so I created a moodboard to start building up the brand attributes and look and feel:
I decided to define my new branding as “intellectual yet modern”, an interface that would attract traditional book readers and enthusiasts like myself. The 5 brand attributes that I chose were:
Clear
Literary
Educational
Intellectual
Modern
I built this style tile in order to get a clear picture of how I saw the new brand in my mind:
First of all, I chose to incorporate a serif font for the branding, not only because it would differentiate this brand from the competitors, but also to honour print media.
The strokes in the letters connect one letter to the other with a perfect flow for the eye to follow (and that’s actually why they print newspapers and books with serif typefaces). The font I used for the brand is a newer version of the old classic Baskerville, which makes it look literary but also modern due to it’s organic curves. I also picked a sans serif font called Nunito Sans to pair it, so there’s also variety in the texts.
For the colours, I inevitably leaned into blue, a hue that represents intellect and wisdom, but chose a vibrant tint to make it feel alive and not rigid. I paired it with a sober khaki tone to maintain the credibility and balance the liveness of the other colours, it also reminds of the color of book pages.
But, I wanted to make this brand modern, I want all the people like me to feel inspired and not bored with reading, so I counterbalanced the sobriety of the previous tones with a vibrant orange and a cheeky dot that will also serve as a reusable graphic element for the brand. All this, to help me achieve the balance between what’s tradition and what’s modernity.
THE NEW STYLE
BEFORE &
AFTER
Here are some side to side comparisons between pages and elements:
Here’s a quick example of navigation between pages:
FEEDBACK
After presenting the prototype to a jury of two UX/UI professionals and some of my classmates, I received different comments on the lines of “it does feel like a professional app”, “I really like the colour palette” and “I like the choosing of icons and font”. However, there were some suggestions on the use of colour on the cards in the homepage, and the use of shadows in other elements. I implemented the changes on the final iteration of the prototype and I think all of them were on point. Here´s one example:
CONCLUSIONS
The atomic design method was a great tool for re-designing an app from the grounds up until the whole pages, it allowed me to see the whole spectrum of the app and what was contained in it. All the elements that form a page are important and must cohabitate in harmony in order to create a great product that is not only pleasing to the eye, but also functional.
