Goodreads Case Study
Skills
UX Design, UX Research, Usability Testing, Wireframing, Prototyping, Visual Design
Role
UX Designer & Researcher
Research
My team and I sent out a survey, and we got almost 50 responses. We wanted to focus on both users who use Goodreads daily and users who don't or have never heard of it. Our goal was to see what additions to the re-design would make users want to come back and check out the website again.Keep track of their readingFiguring out what books are worth readingDiscover new booksKeep up with the reading challengeDiscussing and engaging with other fellow readers
The initial usability testing that we conducted revealed that most existing users who use Goodreads are often confused about where to find certain features, even after having used the website for a prolonged period of time.In general, the website was not very user-friendly and intuitive, and sometimes, users would still lack the motivation to continue using this website and its features without getting frustrated or boredBackground
This project was part of a group project for a Human-Computer Interaction course at my university, and I worked alongside two other student designers throughout the project.
Our target audience were the individuals who interacted with the Goodreads website daily or weekly. We wanted to solve the overall user experience and improve the website's basic UI features.Brainstorming
After conducting the surveys, we started the design process by sketching some of the initial screens. The primary purpose of this was to brainstorm and test out how the final screens may look likeWe wanted to make the layout and the arrangement simple yet concise for the initial sketches, so users wouldn't be confused as to where to look or how to get to their destination. We utilized the survey results to see where we should put some of the components and what additional features we should include.Features we added in the wireframes:
Making the home screen cater more to book loversA more intuitive advanced search
A better way to view someone’s profile + added features in profile viewingOnce we finished incorporating some of the research and the features users wanted to see in the sketches, we started designing the final screens in Figma
We had the background color be light/fresh and a creamy paper color for visual style, similar to the colors one sees when they are physically reading a book. In that sense, users get a feel of the avid book world while using the website.
For some of the screens, we incorporated illustrations that looked like bookshelves, so users can also get that feeling where they are using their own virtual library.Below are some snapshots of some final screens:
UI Designs
