I’m a little biased: I love bookstores and I love Barnes & Noble. With such a well-established company, rooted in the culture of paperbacks since the late 1800’s, they’ve had to constantly make efforts to keep up with the competition.
Over the years, B&N has developed their own e-reader—the Nook—taking necessary steps to improve the company during ever-changing times. As we’re all well aware, though, bookstores have struggled in recent years.
When we first embarked on the idea of redesigning a major company’s web presence for an internal case study, books naturally came to mind. I love to read, and have always been a fan of exploring new titles, so redesigning B&N seemed like an interesting challenge.
As one of the preeminent leaders in book sales, I quickly realized that the digital experience needed a lot of help when it came to defining the more modern aspects of the greater brand. With a lack of strategy, outdated design, and a website requiring responsive updates, I set in on tackling the site’s most apparent weaknesses while aiming for the greatest improvement opportunities.
Barnes & Noble is the largest retail bookseller in the United States, selling in-store, online, and through various education outlets. Recent years have brought forth heavy losses leading to company restructuring and an increased question mark above the brand’s future.
As I was researching for the redesign I made it a point to visit local stores to analyze what sets them apart. Why do I love B&N so much? What’s missing within the current digital experience, in my opinion? Many notes followed.
With a little introspection and some strategic thinking as a starting point, I started considering all aspects of the company’s branding, website, and in-store environment.
I’ve always felt that creating a personal, clean, and easy-to-use experience is crucial when shopping. Whether inside a store or browsing online, no one wants to have to step over a mess in an aisle or have to dig through a pile of digital books to find what they’re looking for.
With this in mind, I immediately started thinking about what other companies are doing to set themselves apart; namely, companies raised in the modern Internet era.
A company like Amazon represents a diverse online shopping experience for a variety of items, but when it comes to the world of books, the main reason Amazon is competition comes down to, in large part, the wildly successful Kindle.
With a strong shift—perhaps movement, even—towards online sales, digital books, e-readers, and tablets (e.g. Amazon’s Kindle and Apple’s iPad), it’s easy to see why traditional bookstores have found themselves between a rock and a hard place.
Tech is leading the charge, and the B&N site is sorely behind. Visually and strategically, it misses the mark for me. Which had me thinking: What is it about B&N that keeps me around?
Exclusively online competition doesn’t offer the personal experience that B&N can, hands down. One difference between Barnes & Noble and the competition is that they offer free events, for example, book signings and children’s story time as community activities.
Each brick and mortar store, as you may be as familiar with as I am, includes a cozy cafe that creates an ambiance and an environment that encourages a visitor to settle in for a while. Amazon’s online store can’t match that tactile experience.
With design updates reaching out at me, and various functional issues, there were obvious areas that needed improvement in the greater online experience.
From a strategic standpoint, B&N’s strengths weren’t being highlighted. I had to dig deep to find community events I may be interested in, like story time for kids, author meet and greets, or book signings. Did you know B&N often does midnight releases in store as well? I didn’t either.
How could such events create a personal connection, setting B&N apart from the competition? If they had space online that effectively shared this information, and the greater company vibe, I have to imagine more customers would embark upon their cafes and community events. I know I would.
Technologically, the B&N site falls behind the competition almost immediately. With an outdated 960px grid width, the site is also in need of a stronger responsive layout. In contrast, pulling up an Apple or Amazon, while not perfectly responsive, certainly moves far ahead of what we see with B&N.
As seen in the example above, the design doesn’t feel modern. Too many gradients, drop shadows, and dated effects really distract from the mission of “keeping up with the times” when it comes to our first impression. They can do better!
A refresh would bring in a much needed clarity and simplicity.
The new look and feel needed to showcase Barnes & Nobles’ differentiators, starting with an updated brand mark. Namely, the company needs to appear more modern, while also fostering community in ways that no online digital experience will ever be able to compete with.
This community-driven approach ties into a culture the company has so effectively built over the years. How can we bring this back, and to the forefront, stronger than ever?
With this in mind I decided to give the brand a clean, contemporary look, that would aim to attract an audience seeking the definition of the modern bookstore experience.
Historically, logos are extremely personal. I know a single mark won’t inspire action in every B&N customer, but by taking a purposeful and directed shift towards something entirely reimagined, we start to get closer to a B&N that actually feels comfortable, and confident, in 2016 and beyond.
With a clearer hierarchy of information and calls to action in mind, I began focusing on redesigning the website. I wanted the new design to be more personalized, truly highlighting the visitor’s experience (taking a page from Amazon, certainly), really pushing that customized touch.
From updating the initial visual impression and tagline, to including the visitor’s name as a welcomed hello, my strategy started bringing forth a unique shopping experience. I wanted to make it about the user. It needed to be about finding their story.
Another key strength to highlight was the strong theme of events within the greater store experience. From promoting book clubs and events, to refocusing calls to action, the new site design started getting stronger both visually and functionally, but also strategically.
I always felt like I wasn’t really sure what was going on at my local store, but I wanted those opportunities to immediately shine through to any fellow book fan.
The more I dug in, the more I started making changes to very specific areas of the greater aesthetic. Let me take you on a brief tour...
Changing the navigation for greater symmetry gave it balance, and with added separation between menu items, the new navigation is cleaner and more intuitive. It converts to an expandable hamburger menu on smaller screens in the responsive design, as well. While their current site attempts to adapt to devices, adjustments were needed to better suit devices and allow the design to adjust properly.
Whether on a small laptop screen, or a big and beautiful flat screen, the B&N navigation experience will ebb and flow with the user’s needs.
I felt the “hero” area (the initial impression/header area of a website) needed high-quality, engaging graphics to capture visitor attention upon landing. Combine that with strategic copy and I felt we were well on our way to starting an entirely new conversation for the company and its users.
A single, interactive video might engage upon arrival to the site, showing an enjoyable Barnes & Noble experience and giving it an updated look.
How else might we be able to engage here? The possibilities are exciting to think about!
I aimed to make each call to action more successful through engaging imagery and strong messaging. Excessive drop shadows and gradients of old were discarded, and instead replaced with an easy to understand look.
With a new approach taken for decluttering and sectioning, I wanted to further push the B&N attributes that are currently hidden away, and in some cases, not very present at all.
Changing the font palette and sticking to something consistent, simple, and modern made the site easier to view on multiple devices while establishing clearer hierarchy.
With a range of different book covers on display, I opted for a narrower color palette for more separation and clarity, making sure to include the classic (and iconic) green color. This helped showcase multiple covers at once without clashing or looking cluttered.
Excessive gradients, border radiuses, outlines, and shadows make the current site appear outdated, busy, and cluttered. By eliminating these extra effects, each area of the new look feels easier to explore, and ultimate better at guiding the user as he or she shops.
One major feature lacking in the current site, as I mentioned above, is a responsive layout that flowed. With a growing number of shoppers being device/mobile users (30% back in 2015), this needed to change immediately. While the entire site adjusted to some devices, the layout didn't change accordingly to best suit smaller screens.
As I approached this update, I aimed to create a responsive design that reused the desktop’s clean sections, stacking fluidly, with the intention of displaying information as clearly as possible on any sized view.
A reimagined focus on strategy would move Barnes & Noble right in line with what its competition is already doing, while further pushing their biggest historical strengths: culture and community.With a more personal visit, a user can make the experience their own, navigating through a personal sleuth of options, all aimed at helping them find a story they are looking for. Or perhaps, a story they don’t yet know they’re looking for.
Finding your story. The new Barnes & Noble. With a little nudge, I hope it’s something we all see become a reality sooner rather than later.
Take a look at the site in motion and in high resolution over at Dribbble.
I’m a little biased: I love bookstores and I love Barnes & Noble. With such a well-established company, rooted in the culture of paperbacks since the late 1800’s, they’ve had to constantly...KEEP READING
Looking back on our journey as a design studio, one of the biggest areas of growth has come in the form of our design process for client builds, but also for our...KEEP READING
Sign up for our monthly newsletter, with the latest in web strategy, design, and technology. No spam, ever.