Primary Goal:
Redesign the Goodreads app with a fresh, new look that aligns with the website's aesthetics, improving its main functionalities, while also tailoring it specifically for iOS and Android devices.
01 WHAT I DID
Scope and responsability
From these previous insights: first, users find it challenging to locate and add friends on the app, and second, there's a noticeable lack of language options for books and reviews. I've redesign the app's structure to better address these areas of opportunity.
Reaearch
After analyzing the current app's information architecture, I developed a new one focused on addressing and enhancing those key opportunity areas.
UX design
I've refreshed the color palette to enhance the app's accessibility. This new look extends to the buttons and icons as well, which have been redesigned. Keeping in line with Apple's Human Interface Guidelines and Google's Material 3 guidelines
UI design
Design Process
02 look and feel; app & website
Current aspect
One of my initial steps involved closely examining both the website and app to assess the consistency in their designs. I paid special attention to elements like the color palette, font, and various components, including buttons, text fields, navigation bars, cards, etc.
Information Architecture
Goodreads current architecture
I mapped out the current information architecture of the Goodreads app by navigating through it and sketching the layout of each element. Notably, one of Goodreads' key features is sharing with friends and the community about books, but the app's layout didn't quite reflect this aspect. To address this, I compiled all the information and organized a small card sorting exercise.
Card-sorting
I restructured the app into four main flows: Home, Friends, Explore, and Profile. To simplify navigation. To validate the new structure, I ran a card sorting exercise with Goodreads users.
Home
Friends
Explore
Profile
Add Category
I ran a hybrid card sorting session in UXtweak, offering suggested categories but letting users create their own. This gave flexibility and uncovered more natural ways people group content.
Insights
Drawing from the results of this exercise, I crafted the new information architecture for the Goodreads app.
Profile
My Books
Reading activity
Friends list
Settings
My Books
My Shelfs
Scan Book
Friends
Find A Friend
Friends Activity
Friends Recommendation
Groups
Explore
Search By Category
Scan a Book
Top Picks For You
Most Read This Month
Popular Lists
Personal Recommendation
New Releases This Month
Featured Recommendation
Home
Good reads
Colors and Components
03 Design system: ios & android
Design system
Color Palette
Building on the initial analysis, I designed a refined color palette to enhance both usability and visual consistency. By extracting core hues from the original website and optimizing them with Figma’s Contrast plugin, I ensured accessibility compliance (WCAG standards) while preserving brand identity. The result is a balanced, modern palette that refreshes the interface and introduces a clear color system to effectively guide user attention and improve navigation.
Primary Colors
hex: F9F7F4
Basic Background
Basic background / Main
hex: 7D5749
Highlighted Elements
Highlighted Elements / Main
hex: 1F5B57
Call to Act 01
Call to Act / Main
Status
hex: F3CE65
Status Indicator
Surface
Stroke
Pressed
Main
Surface
Stroke
Pressed
Main
Surface
Stroke
Pressed
Main
Neutral Colors
100
80
60
40
30
20
10
Components
Following Apple's Human Interface Guidelines and Google's Material 3 guidelines, I designed components specifically tailored to each ecosystem. It was crucial to ensure that the app felt well-adapted to each platform, maintaining consistency in both design and function.
Material Desing 3
Buttons
Button
Button
Button
Button
Button
Navigation Bar
Profile
iOS
Buttons
Button A
Button A
Button A
Button A
Button A
Navigation Bar
Profile
Goodreads Design Proposal
04 goodreads new design
iOS
Android
