Bookstr launched 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. I helped Bookstr explore ways to grow their business by redesigning their website.
Before starting on designs, it’s important to understand the vision for the product and the challenges it faces. 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.
Most people get to Bookstr from Facebook. They see an article in their newsfeed and click to read more. Then they read the article and leave. This is the user behavior Bookstr wants to solve for.
Bookstr wants people to stick around and read more articles (and watch videos and take quizzes). On top of that, Bookstr wants people to return to their site without having to pay Facebook to get them back.
How can design solve these problems? Improving the user experience can help in two major ways:
In the sections below, I’ll talk about some of the design changes I made to improve the site.
If you take a look at Bookstr’s old homepage, you’ll see there’s a lot going on.
Many of these features are odds with how most people use the site. For example, only ten percent of page real estate shows the content people come here for—things like articles, lists, quizzes, and videos–while the rest of the page is taken up with book covers and reviews. 26 out of 29 CTA buttons on the page are for eCommerce or social features like Add to Cart, Add to Bookshelf, and Follow. None of these are valuable to a first-time visitor who came here from Facebook to read an article.
I did an audit of the rest of the site and, using web analytics on usage, ranked features and content based on their value to our target user.
Bookstr creates a lot of eye-catching images and videos, but these visuals were largely missing from their old homepage. That’s because they were mostly using text links to display articles. They also had a clumsy carousel interface that only displayed one hero image at a time.
I chose to replace text 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 needed, I can also bring CTA buttons and other controls, like star ratings, into a card without disrupting the visual rhythm of the page.
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.
Ultimately I went with a mix of 8x2 and 3x4 column layouts for the homepage. My intention was to recreate the scroll-and-scan user behavior that works so well on sites like Instagram and Pinterest.
On the article pages, I used 8 columns for the main article content area and 4 for a sidebar. See below for the reasons why.
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 it’s a great way to promote content and guide new visitors to different parts of the site they might be interested in.
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.
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.
Site navigation is crucial to help guide visitors through the site. I chose to improve on navigation is a few ways:
First, I used a larger font-size and more padding on nav items to increase their visual hierarchy.
Second, I unpacked and simplified the navigation options by getting rid of the nested structure (i.e. no dropdowns) and removing underused or inessential destinations.
Finally, I labeled items according to content rather than actions. For example, I used the label “Books” instead of “Browse.” Browse is a vague task that doesn’t convey its value to the user, whereas “Books” makes it clear to the user what they will find and why they should click.
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’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?
I reduced the number of input fields to two— just email address and password—and I cleaned up the interface so that it conveys a singular, impactful message. And because most of Bookstr’s audience comes from Facebook, I provided an option to use Facebook to sign up.
Finally, I added a third option for email capture which is a newsletter subscription. This 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.
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.
Here I show how the site responds at breakpoints that correspond to various screen sizes.
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.
Copyright © 2017