Books-A-Million
Books-A-Million may not be familiar to all, but to people in the southeastern United States, it’s a household name. Founded in 1917 as a street corner newsstand in Florence, Alabama, Books-A-Million, Inc. has grown to become the third largest book retailer in the nation. The company currently operates more than 200 stores in 19 states plus the District of Columbia, and has plans to expand further west and north.
When Books-A-Million approached Happy Cog in March of 2007, the site’s aesthetic was outdated and suffered from significant usability challenges. Books-A-Million considered their website the largest store in their chain, so the flagship had to represent the company as a customer-focused, forward-thinking expert.
Involve customers and reduce clicks
The redesign effort also included a host of new features, each posing a unique and significant challenge. The largest of these was the introduction of community-driven features such as reviews, lists, and social networking elements without diminishing the bookstore experience. The next task was to create a rich, interactive, “single-page” experience using emerging technologies while keeping the site accessible to all users, regardless of platform, browser, or other limitations. Finally—and most importantly—the site needed to greatly increase each user’s ability to find related products quickly and easily, through smart presentation of content within a dynamic and ever-changing browsing context.
Starting from scratch
Streamlining user flows
Happy Cog’s engagement began with a comprehensive audit of detailed flow documentation that Books-A-Million had painstakingly and diligently assembled. The newly proposed structure discarded all of the previous assumptions about the existing site and started to re-envision the experience of the buying process from the ground up. We augmented this foundation with our own process flow documentation in an effort to streamline user pathways in as few clicks as possible.
Once those pathways were defined, we created detailed wireframe diagrams which enabled us to develop fresh and exciting visual approaches that made the screens pop.
Enhance. Enhance.
Rounding out the effort came one of the most ambitious coding efforts we’ve had to date. Using unobtrusive JavaScript to progressively enhance the page, we provided modular hiding and showing mechanisms that allow users to quickly access a lot of related content without leaving the page. To top it all off, we hijaxed the site wherever possible to load additional content for users that request and can handle it.
Above: Sliding, paged, tabbed content. Not intended for the faint of heart. Below: No JavaScript? No worries. Say hello to horizontal scrollbar, complete with named anchors (read: bookmarkable URLs) for each tab.
The cart before the horse
The most prominent and important element in the online purchasing experience is the shopping cart. Books-A-Million recognized and advocated the need to prioritize this, which allowed us to deliver a design featuring a persistent and omnipresent cart. Users with JavaScript enabled are capable of viewing the contents of their cart real-time as well as beginning the checkout process, all without leaving the page.
Responsibilities
Information architecture, graphic design, user interface design, CSS/XHTML template development, JavaScript development, Ajax integration. Launched 31 July 2008.