Unnameable Books: Research and Design
Unnameable Books is a small, independent bookstore in Prospect Heights, selling new and old books. My project was to create a mobile version of their website.
Their website is done the old-fashioned way favored by small businesses: they bought a package from a web portal (Square, which they also use for credit card payments) and cobbled it together in their spare time. It certainly has its charms–I mean, where else are you going to see book categories like “Rare and Medium Rare”? The assignment: keeping its identity and giving them the functionality to help its business move forward and better serve its customers.
Tools used: Sketch, Invision, Miro, Adobe Photoshop, Indesign, and Google Forms.
UX Audit
I began the project by assessing Unnameable Book's website. Here are some of my findings:
Home Screen
Location and hours are at the top. You need to scroll down to see clickable images of current inventory.
Listings
There is no search bar. “Rare and Medium Rare” and “Speculative Fiction” are charming, but it’s hard to find titles.
Covers Are Cropped
Covers are shown in a square format, cropping off either the title, author’s name, or both.
Events/Blog
Clicking on the events takes you to a outside blog. Event location, sign up, etc. is hard to find.
Research/Surveys, interviews, and affinity mapping
The research consisted of two surveys and five interviews. The respondents all had one thing in common: a passion for books. They also liked going to events — key for a business that holds monthly readings featuring new and established writers.
“A good bookstore is like a good wine store – you read the blurbs.”
—interviewee, 60s, Museum worker, on staff recommendations
“Authenticity is important. I like to look in odd places, for things that are hidden – I love the thrill of the hunt!”
— Interviewee, 20s, UX/UI Designer
“A friend told me that Pete Hamill was speaking at the Ethical Culture Society – wow! Now that was memorable.”
— Anthony, 60s, retired HVAC technician, on book readings
“Out of print – rare to me!”
—survey respondent, and used and rare books
Key Takeaways
Local
Respondents love independent book stores and want to support them.
The Buying Experience
They look for specific books, but they also like to browse.
Social
They like going to poetry and book readings.
New vs Used and Rare
They buy used books because they’re cheaper, and they’ll seek out out-of-print books – what UNNAMESABLE BOOKS refers to as “Rare and Medium Rare.”
Enhanced Book Listings
They like staff recommendations, book reviews, and descriptions.
The Dilemma
Even though it lacks a personal touch, buying online is easy and cheap.
Persona
I created the persona, Megan, from my research. She didn’t fit all the demographics I interviewed or surveyed. But as a composite, it was a good representation of their customer base.
Problem Statement
How can we make the shopping experience easier for Megan and effectively connect with customers?
Ideation
After determining the problem, I held an ideation session with locals from different backgrounds interested in buying books. The most enlightening finding was that buying online was cheaper, but they valued this independent bookstore as an integral part of the community.
How might we reduce the time Megan needs to wait to buy a book inside the store?
buy online and arrange for pick up and delivery
have writer sign books outside the store at events
calls the store to check inventory, order books, and arrange for pickup and delivery
familiar with stores layout, so she doesn’t browse and heads straight to the section she wants
How might we make it easier for Megan to find and browse titles, subjects, descriptions, and recommendations from an independent bookstore?
online recommendations pop-up for her based on her profile, and prior purchases
include reviews from publications she trusts on the website
follow people she admires on Facebook and Twitter to learn about new books, advertise on Twitter
like/follow bookstore on Facebook
have more books in the store window
How might we make it easier for Megan to find readings and other events sponsored by the book store so she can support them?
put book store calendar on the website
subscribe to the bookstore’s mailing list
advertise on Twitter
partner with organizations that hold events
speak with the store owner about events, put a flyer in the window
How might we make it more affordable for Megan to support the store rather than buying from mega online retailers?
have a discount punch card
frequent shopper loyalty program
bookclub orders as block and receives a small discount
Features
I selected the features based on the feedback from the ideation session and after reviewing what other local, independent bookstores' websites offered.
About/Contact Info
location and hours, phone number hot links, email hot links
Search Bar
author, title, subject, isbn
Book Images
the book covers are shown in their entirety, with space for descriptions, additional images, about the author blurbs, and reviews
Mailing List
Simple opt-in, separate from creating an account
Suggestions Listing
new and recommended inventory shown on the home page
Event Page
event page on the website with a signup
User Flows: Search for a book, add to cart, and checkout
This flow illustrates between entering the site, purchasing a book, and all the steps in between.
Mood Board
The store and inventory had a mid-century aesthetic, so I chose items from their stock as the basis for the mood board. I also drew inspiration from artists and institutions from the same period.
Style Guide
I chose Bookmania for the logo because it was in line with the existing style of their current logo. I chose San Francisco for its readability on mobile devices. The red, yellow, and blue colors were sampled from the store’s inventory and are variations from their existing logo.
Mid Fidelity
I streamlined the design based on my low fidelity usability tests while incorporating necessary verbiage, i.e., credit terms and conditions.
High Fidelity
The high-fidelity prototype featured more engaging content, a cleaner design, and a more straightforward information architecture.
Home Page
Users now see a scrollable list of highlighted books for sale on the home page.
Fly Out Menu
Available from any page on the site–it allows users to access multiple pages quickly.
Contact Us
There are now multiple ways to contact the store, either through the fly-out menu or the footer.
Add to Cart
I added a clear, simple way to check out with the option to continue shopping.
Events Tab
The events tab takes information found on the store's blog and gives the user all the details without scrolling down.
Mailing List
The user can sign up for the mailing list through a link on the fly-out menu which takes you to this page.
Usability Testing
Tasks completed
Search for a book, add to the shopping cart, and check out
sign up for the mailing list
sign up for an event
Lo Fidelity
The usability test was a fail–the subject kept clicking on text boxes meant to house titles.
Mid Fidelity
High Fidelity
The next tests with the mid-fidelity prototypes went better – better functionality, more intuitive. However, I felt the design was clunky, and the functionality looked old. The participant didn’t understand that he needed to scroll down to see more content.
The high-fidelity went well. The participant was able to navigate the prototype easily and complete all the tasks.
However, when I previewed it on a cell phone, I noticed that the type was hard to read, leading me to use a different type weight and adjust the layouts.
Next Steps
Book Categories
Separate from the Search Bar (bookstore already has this but needs refining)
Create Account
Rewards program, delivery options, mailing list preferences, event notifications
Online Shopping
Books, gift certificates, and clearer shipping options. (bookstore already has this capability, but needs refining)