hero image

Bookstr Redesign

Helping a niche social network become an online publisher

I helped Bookstr rethink their product as they shifted to a new business model. As a freelance designer, I helped frame the design challenge, did a UX audit of their site, and delivered high-fidelity comps that described recommended design changes.

Why the business needed a redesign

Bookstr was founded as a social network for people who love books. Later, the business realized that its value was the content it created—articles, lists, videos, and quizzes—and the audience it had built through its marketing channels.

Bookstr was operating as a publisher, but its product looked and acted like a social network, and that was holding back its growth.

Getting aligned on the desired outcome

Before starting on designs, it was important for me to understand the vision for the product and the challenges it faced. I talked to the CEO about her plans for the business and I learned about the product and its users by speaking with the Product Manager.

To keep us focused and on the same page, I summarized the desired outcome in one sentence:

Make Bookstr a place where more people who love books will want to spend more time consuming book-related content, so that advertisers will spend more money with us.

I decided to focus on improving the user experience in two major ways:

  1. Make it easier to discover content
  2. Make it easy and compelling to sign up or subscribe

In the sections below, I’ll go into some of the design changes I suggested to improve the site.

Bookstr creates a lot of eye-catching images and videos, but these visuals were largely missing from their old homepage.

I chose to replace text-only links and carousels with cards. My intention here was to make article links visually enticing and easily scannable. Each card has an image as its primary element, followed by the article title. Images naturally draw attention and make articles easier to notice and more likely to be clicked on.

Cards are also great for displaying multiple content formats in a consistent way. In addition to articles, Bookstr links to quizzes, lists, videos, books, and authors. Each of these can be displayed as a card and these cards can be rearranged and grouped in any number of ways. Where it made sense, I added CTA buttons and other controls, like star ratings, into a card without disrupting the visual rhythm of the page.

bookstr content cards

Defining a grid to improve composition and hierarchy

Bookstr’s old site felt cluttered and poorly composed. It was hard to parse all the different types of content, and the hierarchy of content on the page was confusing.

I wanted people to quickly and easily see what was on the site and find something they liked. To help achieve this, I placed the cards on a 12-column grid layout and experimented with different configurations.

Bookstr Homepage Grid Layout

Showing how the layout changes at key breakpoints

Using cards and a grid layout creates an experience that works really well on tablets and mobile devices. Making the site responsive was a key consideration from the start because over 50% of Bookstr’s traffic comes from mobile devices.

Bookstr Article Page Grid Layout

Bringing suggested content into the user flow

Because article pages receive the most traffic, they act as the front doors to Bookstr for many people. So it’s important these pages help visitors answer, What else is here for me?

I chose to use a sidebar because its visual prominence effectively promotes content and guides visitors to parts of the site they might be interested in.

Bookstr Sidebar

At the bottom of the article pages, I created a ‘You Might Also Like’ section that uses the same layout as the homepage. In this way, readers won’t hit a dead end at the bottom of the page.

Bookstr In-Line Content

Where it made sense within the article body, I placed related and suggested content cards. For example, an article about about Winnie the Poo is a natural place offer books on the same topic.

Simplifying navigation

To improve site navigation, I used a larger font-size and more padding on nav items to increase their visual hierarchy.

I also simplified the navigation options by getting rid of the nested structure (i.e. no dropdowns) and removing underused or inessential destinations.

Bookstr In-Line Content

Bookstr In-Line Content

Using a tagline that answers, “What’s in it for me?”

A tagline should tell visitors what the site is about and why they should care. Bookstr was using a tagline didn’t really answer either of these questions.

I changed the tagline from “Connecting Books & People” to something that clearly articulates a benefit to the user: “Discover your next great read.”

Bookstr In-Line Content

Reducing the barrier to sign up

Bookstr’s old sign up modal asked for a lot of unnecessary information. Not only is this a barrier for the user because of the time and effort it takes to fill in the form, it’s also a barrier in terms of trust. Who wouldn’t be skeptical of a website that asks for your age, gender, and nationality?

Bookstr In-Line Content

I cut the number of input fields to just two: email address and password. And, because most of Bookstr’s audience comes from Facebook, I provided an option to use Facebook to sign up.

Bookstr Sign Up Modal

Finally, I added a third option for email capture which is a newsletter subscription. This feature aligns with Bookstr’s business objectives and provides value to people who are interested in getting content but won’t use any of the signed-in features.

Bookstr Sign Up Modal

Wrapping up

The design changes above were intended as quick-wins that would get Bookstr going in the right direction. Next steps would involve more rigorous product planning and user research sessions that would help us understand what to build and why. With an end goal defined and some ideas on how to get there, we could then start testing our assumptions by putting prototypes in front of users.

See More Case Studies