Authentic Form & Function is an innovative digital studio for startups, businesses, and creative agencies. We’re a tight group of digital experts living at the intersection of progressive design and smart technology.

Category Design

Built for Community: Redesigning the Barnes & Noble Digital Experience

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.

Research & Planning

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. 

The Experience

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.

Keeping Up With Tech

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?

Barnes & Noble Differentiators

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.  

Barnes & Noble interiors are well known for cozy cafes and that familiar scent of coffee. Pulling up a book and a warm beverage is ingrained in many people’s minds; something online competition can’t touch.

Focus Areas

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. 

Digging In

Logomark

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.

The new brand mark moves away from the block letterforms and quirky ampersand, instead pulling in slab serifed inspiration from early paperback books. The ampersand, now more of a focal point, inspires movement and excitement.

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.

Website

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.

Wondering how to better engage with your customers?

We'd love to chat about your goals for an improved website.

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...

Navigation

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.

Navigation Before

The current Barnes & Noble navigation
Navigation After
My proposed Barnes & Noble navigation

Hero

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!

Hero Image Before

The hero in place now leaves me guessing what my intention should be right away.

Hero Image After
By crafting a more engaging initial experience, I quickly understand that the intent is to find my story.

Calls to Action

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.

Fonts, Color, and Imagery

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. 

Replacing old pixelated graphics not suitable for retina screens, for vector SVGs and high-quality images, reengages with a polished look.

Effects

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.

Responsive

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.

The responsive look builds up and down based on device size, and takes cues from the reimagined brand, layout decisions, and updated strategy surrounding calls to action.

Conclusion

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.

Design can improve the way you operate

comments powered by Disqus

Take the Guesswork Out of Your Next Digital Project