Bronx River Books
GENERAL ASSEMBLY PROJECT
Revamping the eCommerce site according to research results.
LIT HAPPENS
Bronx River Books is a brick-and-mortar bookstore that aims to foster a space where book lovers gather. It supports the core values of community, creativity, convening, civility & contact. These core values inform the redesign for this site - to serve as an ecosystem for the community.
Design
Challenge
In a three-week design sprint hosted by my UX Design Immersive, I was tasked with a conceptual redesigning of Bronx River Book’s eCommerce site to better connect with its audiences including building a more intuitive information architecture and developing a coherent visual language while maintaining its “small shop” appeal.
My goals were to:
-
Build a more intuitive information architecture to improve navigation.
-
Streamline checkout process to improve conversion rate.
-
Spotlighting store hours & address on the website to drive in-store traffic.
My Role
I was the sole designer on this project gathering feedback from the store owners, customers, and my instructors.
TOOLS
DURATION
-
Figma
-
Maze
-
Pen & Paper
4 weeks
ROLE
End-to-end UX Designer
UX SKILLS
-
User Research
-
Wireframing
-
Information Architecture
-
Visual Design
-
Prototyping
-
Usability Testing
Chapter 1
DISCOVER
Website Analysis
Conducted an overall review of the website from the users perspective, looking for gaps in the user experience, judging it against common usability heuristics.
Aesthetics
Layout detracts users from information they really need.
Why does this matter?
Negative space in main content area detracts users' eyes when scanning the page.
Consistency & Standards
Links are unclear and do not follow conventions.
Why does this matter?
When websites adhere to standards, users know what to expect and confusion is reduced.
Recognition Rather Than Recall: Options overload. The user should not have to read through all of these categories when browsing.
Why does this matter?
Human minds have limited short-term memories. Interfaces that promote reduce the amount of cognitive effort required from users.
Planning out the Research
Having done the research, it was time to see what customers had to say.
To discover who the customers are, I:
-
Staked out the store to gather customer demographics
-
Initiated meeting with store owners to validate above findings & garner key insights
To make maximize my time with the business owners, I created a research plan focused on these key objectives:
-
Discover who the users are - in store and online
-
Understand how the business owners currently use the site
-
Identify constraints and learn how success is determined
Bronx River Books Owners: "Our goal is to have a bookstore that's fun for us, and handling online sales, which we are grateful for, is no fun."
Distilling the Stakeholder Interview: Main Takeaways
-
Streamlining the checkout process is the #1 priority. A fair number of people who set out to buy something the website abandon their cart.
-
Drive foot traffic into the brick-and-mortar store.
-
Leveraging the site to keep the store financially afloat in a challenging retail landscape dictated by ever-shifting Covid restrictions.
-
Key customers are stay-at-home moms & grandmothers
User Interviews: What? How? Why?
Armed with the insights from the store owners and website analysis, I conducted 5 interviews:
-
3 interviews with stay-at-home moms (ages 32-38) with children ages 1-16.
-
2 interviews with grandmothers (ageless) who frequent the shop.
KEY OBJECTIVE
TARGET AUDIENCE
RESEARCH GOALS
Discover how to better serve users outside of their in-store shopping experience.
-
Stay at home moms
-
Grandmothers
-
How do users currently use the site?
-
What do users need out of the site?
-
How do users make purchasing decisions at independently owned bookstores?
The user interviews allowed for direct insight from customers that actively engage with the bookstore, via in-store shopping and their eCommerce site, enabling me to understand potential problem areas they face.
Distilling the User Interviews: Main Takeaways
They Feel Part of a Greater Community
All interviewees value the depth of the in-store experience with the booksellers, and are willing to pay more and wait longer for a book because of it.
They Need Easier Access
Most interviewees expressed their frustrations navigating the eCommerce site, locating the store hours, and purchasing a book. They mentioned the pain and extra work of having to click through so many screens and categories when trying to browse.
They Shop Local
Interviewees choose to shop at local, independently-owned businesses because it means that dollars, jobs, and taxes remain in the community, fostering unique shops and a diverse selection of products offered by people they know.
User Persona: Meet
Heather
Using the results of the interviews, I created a persona who embodies the traits of the target audience. Our primary user, a stay-at-home mom, reflects this.
Heather is a discerning shopper that is happiest when she can pick up a product that not only meets functional needs but also builds off her values - such as community and supporting local business.
Problem Statement
Shoppers need an intuitive way to find and purchase books online because shifting Covid restrictions prevent them from browsing in-store.
How Many Competitors?
I identified 4 direct and indirect competitors to analyze their features to understand their strengths and weaknesses.
Highlights: Seamless checkout highlighting buy online, pick up in store process.
Cons: Use of promotional discounts detract from product
Cons: Lacks navigation bar for search
Highlights: Prominent placement of store hours & address
Cons: Uses troves of data to sell books rather which can potentially water down the quality and variety of literature
Highlights: Flexibility and efficiency of use. Amazon offers shoppers the option to browse by age or by featured categories, allowing users to pick whichever method works for them.
Chapter 2
DEFINE
Give the Readers What they Want!
Keeping in mind the user persona, Heather, a discerning shopper who loves her local bookstore, I brainstormed and prioritized potential features to best meet her needs:
-
easily find and purchase the books she needs
-
buy online to pick up in store
-
and effortlessly access store information
Above all, this site needs to be agile enough to pivot as consumer behaviors shift to accommodate coronavirus restrictions.
CARD SORT
Card sorting is a UX research method in which users group labels written on notecards according to categories that make sense to them.
Card Sort
To build out a more intuitive information architecture, making the site easier to use, I decided to implement an open card sort.
This method uncovers how the users’ domain knowledge is structured, and it helps create an information structure that matches users’ expectations.
I recruited 10 people to do an open card sort, where they were free to assign whatever names they want to the groups they’ve created with the cards in the stack.
And the Winners Are...
The five top level categories generated from this informed the site revamp:
-
Bestsellers
-
Children's Books
-
Graphic Novels
-
Indie Next List
-
New Releases
User Flows
Now that I’ve identified what needs fixing on this website, I decided to evaluate the existing interface by creating a user flow chart. It helps to identify pain points where shoppers like Heather might be stalling.
Checkout Flow
There are far too many screens (9!!) to click in and out of. See?
Browsing Flow
Riddled with broken links and lacks visibility of system status, unpredictable interactions - clicking on "Ages 4-8" takes you exactly nowhere.
Site Map:
Let the Fun (Organization) Begin!
With all these insights, I needed to visually see how the structure of the website would be organized.
This site map helped me strategically place content where shoppers would easily find it, and also pinpoint problem areas.
Chapter 3
DESIGN
Sketches & Wireframes:
Back to Basics
With ideas swimming in my head and an understanding of the direction the website would take, I put pen to paper and sketched out screen variations - plenty of them.
After trial and error, I translated the successful versions into low-fidelity wireframes to understand the layout and feature placement.
Homepage
1. Scroll through to browse
2. Store hours & address prominently featured.
Checkout
Removed barriers clogging checkout flow
Usability Testing:
Iteration is Key
After designing low fidelity screens, 8 users tested the prototype following specific task scenarios to help identify things that worked well and areas for improvement.
Task 1: Complete checkout process
Task 2: Browse
8/8 users completed their tasks with flying colors!
Feedback received included:
-
Search bar was hard to find
-
Users prefer shopping for books in a grid formation
Chapter 4
DELIVER
Prototype: When They Go Low, We Go High (Fidelity)
Folding in the feedback from the low fidelity usability test, the final screens ensured the designs meet the user's needs and the product as a whole felt cohesive.
Homepage: Store information is pinned to the top, where it is easily accessible and unobtrusive.
Browse: (1) Navigation bar moved front and center. (2) Heather can shop by age or genre (generated from the card sort).
Shopping Cart: Shipping options are laid out prominently, so Heather has all the information she needs at her fingertips.
Check (me) out: An efficient checkout flow saves Heather time and effectively delivers dollars to Bronx River Books. Win-win!
The Results Are In!
The unmoderated usability tests I initially conducted were run again with the new website.
Overall usability score is 88/100! What does this mean? Ease of use was measured by calculating key performance indicators: mission success & duration, test exits, and misclicks.
Heat map shows where users struggled most in the checkout flow. This screen clearly needs improvement.
The card sort paid off! We have an almost perfect score on this screen. Tester most likely did not understand that this is a prototype, so usability testing cues need tweaking.
Wait, What?
This surprising solution unfolded over the course of my research. But what is it?
The Bronx River Books Box is a subscription that delivers curated children's books every 1,2, or 3 months. This service is a solution to both the users and shop owners needs. But how?
The Book Box is a digital solution that relies on book experts (like Jessica) to curate the selection and book lovers (like Heather) to subscribe.
It is an elegant digital solution grounded in functional needs.
Plot Twist
BOOK BOX
Lessons Learned
I loved working with a shop that I have an affinity for – it made the design process all the more accessible. But as with all projects, here are a few things I would have done differently.
-
Plan it out. In understanding the process more, I see the value in executing a detailed research plan complete with goals, objectives, and hypotheses.
-
Validation. For the sake of time and to keep the process going, decisions had to be made quickly. To further validate design decisions, I would have done formal user testing earlier in the process.
The Sequel:
What's Next?
The website’s mission needs to remain dynamic and shift seamlessly between eCommerce and informational because it is an extension of the brick and mortar shop.
How?
-
Explore the Book Box buildout. Gauge interest and feasibility by conducting user interviews, building out a lo-fi prototype & conducting usability tests.
-
Realign with user needs. As the community shifts towards more in-person interactions, it might necessitate an “Upcoming Events” build out.