User Flow

I started to do some thinking around how the book exchange page would fit into the current workflow. I decided to create a Book Exchange feature to the navigation pane at the top of the Home page. Users would indicate which books are available for exchange on their My Books page.

I started drawing inspiration from other buy / sell and sharing platforms, and decided to use a messaging feature for coordinating book exchanges.

I created two user flows to summarize my thoughts:

• Receiving a request from a friend to borrow a book you own.
• Sending a request to borrow a friend's book.

Redesigning Goodreads

Solution Exploration

I started sketching different options to restructure the Home page, My Books page, and Book Exchange page. While doing this, I focused on four main areas as per results from the heuristic evaluation:

• Removing extraneous information
• Creating better visual hierarchy to make actions clearer
• Improving aesthetics to increase efficiency
• Design Book Exchange feature

Wireframing

I then started drawing up wireframes to start bringing my ideas to life.

For the Home page, the main changes included simplifying the updates to only show when the user's friends wrote a book review, marked a book as read, or started reading a book.

The My Books page was changed from a list view to a grid view that can be sorted using the search bar and filter drop-downs.

Lastly, I drew the Book Exchange and messaging pages to reflect the user flows I created previously. Further, features on the top banner were simplified and grouped into the profile drop-down menu.

High-Fidelity Mock-ups

Home

I continued to refine the wireframes based on the Goodreads branding. I tried to keep the colours muted to limit the amount of information presented to the user. This would also help indicate which actions are available for the user to take next.

My Books

In addition to colours, I refined the My Books wireframes by adding book covers. Further, books that users want to share with their friends are flagged with a Book Exchange indicator. When selected, the indicator would link to the Book Exchange page.

Book Exchange

Similarly, book covers were included in the high fidelity mock-ups of the Book Exchange page. Selecting the Request to Borrow button will bring users to the Chats page where they can message the book owner and coordinate the exchange. Requests received will also appear here. The Chat page can also be accessed at all times using the message icon.

Reflections & Learnings

A few things I learned from re-designing the website are:

• Seek additional feedback. While performing the heuristic evaluation, I kept second guessing whether I'd identified all critical usability issues. Further, I wasn't sure how my design would fare with developer constraints. In future iterations, I'd like to incorporate input from software engineers and designers.
• Explore other ways to quickly identify design changes. The heuristic evaluation was a quick way to identify design improvements without having to conduct a complete usability evaluation. Moving forward, I'd like to explore other methods for quickly identifying design changes such as comparative analysis and cognitive walkthroughs.