An e-commerce redesign for a beloved bookstore
Book Barn is a beloved quirky and eclectic used bookstore in Niantic, Connecticut with 3 locations. The in-person experience at their flagship location, the “Main Barn,” is a rambling journey through outbuildings filled with books and gardens filled with cats and other wildlife. Book Barn is as unique as the thousands of books, over 500,000 and counting, they carry.
The Scope
WHAT: Redesign to add an e-commerce experience to the existing Book Barn web site
WHEN: 3 week sprint, December 2020
ROLE: Research, Information Architecture, UX/UI Design, Prototyping
TOOLS: Sketch App, Invision, Photoshop
The Challenge
Book Barn sounds great, right? Sadly their online presence doesn’t reflect the store’s fun and eccentric personality very much. The current website falls short in many areas:
The site doesn’t encourage customer engagement or allow purchases.
It also doesn’t clearly explain the store locations, unique setup, and history of Book Barn.
The dark and dense layout overpowers the striking photography.
What do they need?
The biggest takeaway after evaluating the current site was that Book Barn deserves a web experience that reflects its eclectic personality & allows people to support the shop from anywhere.
Getting Started
I began by finding who was doing a digital book store experience right. Dove deep into the web experiences of the following:
Powell’s City of Books
Barnes and Noble
That’s Novel
I also looked to the recommendation feature of Trakt and the e-commerce experiences of Sephora & REI for e-commerce inspiration.
Insights
Research led me to conclude it was essential the website:
Have a simple and clean design
Made souvenirs easy to buy
Created a dialogue with customers
Explained Book Barn’s mission and story.
Organizing
After digging into other online book store and e-commerce experiences, I needed to wrap my mind around how best to organize the products and information on the new website.
For this, I turned to card sorting. I will say, I didn’t find it the most helpful initially but did provide some insights when I was adding filters post-usability testing. After the first 3 card sorts I had the last 2 sorters focus on categorizing the non-book items. I knew based on the Book Barn’s large intake of books the easiest products for them to sell would be store merchandise and other gift shop items. I used the card sort findings to define the pages in the “Shop” section of the website.
I also created 2 user flows to focus on my target users needs:
Path to purchase a souvenir t-shirt for the experience seeker
Requesting help finding a specific title for the book enthusiast
Checkout User Flow
Book Search Request User Flow
Bringing it Together
In my research I came across a wide range of concepts and elements that I wanted to incorporate. I did rough sketches to bring together those ideas in a coherent way. Of course, they didn’t all make it to the wireframe stage.
Designing
Then it was time to clean up the sketches and bring them to life. I started building out the desktop wireframes, but I couldn’t stop there since so many people shop on their phones it had to be responsive. Transitioning to mobile led to some reworks on the desktop screens.
I struggled to prioritize screens and got caught up trying to mimic real functionality in the prototype, which slowed my progress. In the end, the wireframes were ready to prototype.
Evaluating
Overall, the initial prototype was a success. All 4 users were able to complete the tasks in a reasonable time frame.
Testing Insights
Testing showed that there was a lack of FLEXIBILITY and CLARITY in some parts of the design.
Adding Flexibility
To accommodate those with a preference for browsing and navigating by the menu I added filters and sorting to all of the shop pages.
Adding Clarity
Since 3 out of 4 users didn’t notice when an item was added the to basket I added an overlay pop-up message and changed the full cart state to differentiate it from the empty state.
Filled Before | Empty | Filled After
I also edited the Book Alerts explanation and simplified it into steps so it could be read at a glance.
Delivering
Then it was time to bring it to life. As a designer with a love of the visual, I had been looking forward to this part of the process from the beginning. Enjoy the eye-candy; I know I enjoyed making it.
I drew inspiration from the classic Book Barn burgundy signage with its slab serif type. Since burgundy is such a bold color I used it sparingly. It is used for some links, promotional elements, and the call to action buttons.
I wanted to stay true to the personality of the “cats and sheds” aesthetic without bringing chaos to the design. So I used a reclaimed wood texture background to nod to the outbuildings of the Main Book Barn.
Pushing Forward
The future is bright for this project, but there is still plenty of work to do.
Next Steps
Both the desktop and mobile experience need additional testing and refining. I also want to revisit the site map and build out full-functionality mockup prototypes for mobile and desktop. Of course, more testing; there can always be more testing.
This redesigns impact is purely theoretical at this point, but I believe it would increase digital and in-store sales and drive foot traffic to the stores.
Personal Takeaways
During this project, I struggled to estimate how long things would take in Sketch and Invision. This was a source of frustration for me since I’d gotten pretty accurate with my graphic design estimates. Being back in learning mode took some getting used to and made scheduling usability tests more challenging. By the end, I was speeding up and getting back in the groove.