GoodReads

To design or redesign an app, it is very important to understand the business and its users. Understanding the business put me into a position where I understood what the business wants to focus on, whereas looking at the users gave me insight into what the users needed. This information was acquired from secondary research.

About the Business

GoodReads is the "world's largest site for readers and book recommendations," that was co-founded by Otis and Elizabeth Khuri Chandler (who are now married) in 2006.

The company was founded on the following principle that Otis stated:

Since the company was founded, it has grown immensely and this is clear through its numbers. There are:

• 90 million users
• 90 million reviews
• 2.6 billion books added

Company Vision

While the business is very focused on creating a helpful platform for its users, the business has its own objectives too:

• To create a community of readers
• To serve as a database for all books
• To integrate with Amazon services (including the Kindle)

Since Goodreads' acquisition in 2013 by Amazon, the company has been used to funnel users into Amazon's ecosystem. Although they do show other platforms where books can be purchased, Amazon is prioritized.

The Users

Understanding the company alone would not help me redesign better for the users. I quickly shifted my focus onto the users of GoodReads. After all, they are the ones using the app.

While the user goals is not a comprehensive list of all that users go on GoodReads to do, these are the primary reasons most people use GoodReads.

Having understood the business and its users, I began analysis on the website. This analysis look into the site map, wireframes, navigation systems, and labelling.

Site Map/Blueprint

The sitemap is largely hierarchical system but does use hyperlink connections at certain points. The structure is both wide and deep. The organization scheme is ambiguous, using topical organization through genres as well as bookshelves (both pre-defined and user defined).

In the site map, the site was global navigation was split into three sections: the primary sections, utilities menu and search. This split represents the different functionality of GoodReads. The primary sections are meant for the books and community around it. The utilities menu is focused on the social aspects of GoodReads. Lastly, the search bar is meant to help users quickly find parts of the app they want to.

Global Navigation

The utilities menu in the global navigation is very confusing and makes the global navigation very busy. Not only is some of the content repeated from other parts of the navigation, the icons are not very clear at conveying meaning. This is largely caused by the labels being completed iconic without any text. Furthermore, the difference between group discussions and messages is not very clear.

Dropdown Navigation

There are a few problems with the section navigation of the dropdown menu:

• The labels are not grouped or ordered well. For example, explore, recommendations and new releases should be together.
• Explore being under the label of browse is conflicting. They have very similar meanings.

Secondary Navigation - My Books

The secondary navigation on the My Books is primarily focused around the user's bookshelves with secondary functions. The My Books page is equivalent to the All bookshelf.

To track location, the active bookshelf is highlighted and when a specific bookshelf is tapped on it is added as a filter on the top. Once the first filter is added, the option to select multiple bookshelves is added.

In terms of labelling, this page uses real-life metaphors to help the user understand the software they are using. Similar to how we say "folders" to describe how we cluster "files" (another metaphor we adopted from the desktop model) on our computer, the term bookshelf is used to describe how we organize the books digitally on GoodReads. The user immediately has a strong mental model due to that.

Genre Browsing

Breadcrumbs are used in the genre browsing section but they are extremely surface level, only using two levels (Genres > [specific genre]). The indexing is pretty surface level too. "Website design," even though accessed through "internet," is categorized under "design". It is fine to have one genre fall within multiple categories, but the user's history must be remembered to help them navigate backwards.

Wireframe - Home

The homepage of GoodReads' website is split into 3 columns:

1. The first column is focused on the user's books and reading.
2. The second column is focused on social updates. This column is given the most priority, with it being the widest.
3. The last column is news, recommendations, and the "footer".

The last column has generally the least important information. The most important piece of information in this column is the book recommendations, yet it is put second in the hierarchy. Interestingly, the footer is also not a typically footer located at the bottom. This design choice is due to the theoretically infinite scrolling of the social updates column.

Wireframe - My Books

Compared to the homepage, the My Books page is immediately noticeably less busy with a simpler design. The main navigation on the page is the sidebar menu. There is also utility navigation present on the top and bottom of the user's books that helps them filter and sort items as well as navigate between pages if they have more books than that can fit on the screen at once.

With all analysis complete, it was time for me to decide the scope of my redesign. This redesign would include:

• A redesigned homepage wireframe
• A redesigned global navigation wireframe
• A redesigned blueprint

The problems that I chose to focus on are:

• the homepage is too busy and the hierarchy is unclear
• the utility navigation icons are misleading
• the utility navigation is redundant
• the browse dropdown menu is unorganized

Homepage

Looking at the sitemap, I regrouped the content into fewer groups, which would translate into fewer columns on the site. To make two groups, I had to think about where each piece of content would make more sense. I also needed to create a dynamic "hero" that helped me a bunch of content into one section.

As stated, grouping the content into two groups led to the redesign to have 2 columns unlike the original 3 column design.

This was meant to improve clarity and make the site less busy.

Outside of the change in the number of columns, the changes on the homepage include:

• The hierarchy is more clear on landing. The user sees Currently reading and the hero first, then updates.
• The hero behaves as a carousel going through different content, including recommendations, news and more.

Global Navigation

By removing sections from the utility menu, I was able to make the website blueprint slightly narrower.

This translated to a slightly less busy navigation. The icons did not change but their meanings were more obvious now because there were less to distinguish between.

I also designed a modified notification pane that incorporated actionable tasks based on what I had removed from the utility menu.

Browse Secondary Navigation

In the redesigned browse secondary navigation, I grouped and ordered things in a manner that easier to understand. The two groups were books and extras. These changes made the hierarchy much easier to follow. Lastly, I changed the label of "Explore" to "Browse All". Not only was this more consistent but it was a lot easier to understand the purpose.

This project was one of the most unique projects I have done at SCAD. We are very used to doing semester-long groups project where we go through the full development of a UX solution. However, this provided a very unique perspective at what UX can be.

1. I am interested in doing information architecture.

As much as I like to consider myself a creative, I have an affinity to logic, technicalities and order that I cannot ignore. This project reminded me UX is an expansive field and information architecture is a part of it that I truly can connect with.

2. Redesigns don't need to be visual to be effective.

When the project was announced, I was definitely thinking about bringing a facelift to many sites. While this is natural and the UI design of an application matter, a redesign does not need a visual overhaul to be effective. The focus was meant to be the information architecture. Having completed the project, I must say that the choices I made could be effective in making the website much usable despite only focusing on a few key changes in structure.

3. Sitemaps are useful tools in finding UX problems.

Looking at the sitemap alone, it was easy to find where problem would being appearing on the wireframe. For example, the three column design was visible from the sitemap and from the beginning it was clear that it was simply too overwhelming.It was also evident that the utility menu in the global navigation was not too useful and focused on functions that GoodReads themselves did not care too much.

TL;DR: Here are some of the key lessons/reflection points I took away from this project:

• Information architecture is a part of UX that I am truly interested in.
• Redesigns do not need to be visual at all to be effective.
• Site maps can provide a very high level but effective look at where problems may appear when the site map is translated into a wireframe.