Case study part 2: Unnameable Books
A UX design student’s first project and next steps
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 as a local bookshop, and give them the functionality to help their business move forward and better serve their customers.
Current Issues
On the website’s home page, a map, followed by store hours and gift certificates of varying amounts using the same photograph. Books are shown in a square format, cropping into the name, or title, or both. Click on “events” in the menu bar and you are taken to an outside blog–which is not only hard to read but has the dreaded green/red ADA no no. Their categories, although charming and sometimes whimsical, are hard to search through.
Research
The research consisted of two surveys and five interviews. The respondents all had one thing in common: a passion for reading. They also liked going to events — key for a business that holds monthly readings featuring new and established writers.
Amazon is Viewed as a Necessary Evil
I’ll admit it, I use Amazon all the time. I’d much rather go local, but in today’s world, that isn’t always easy.
User Persona and Problem Statement
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.
Ideation/How Might We?/MVPS
After my persona and problem statement was complete, I held an ideation session with a diverse group of four people. I was thinking about digital solutions, but many of the suggestions were “call the store”, “email the store owner” and “put a sign in the window”. These participants value having a book store in their community. And they want to support it.
The assignment was to do boards for three to four tasks, and I had seven. Several of them were close in theme–joining the mailing list, contacting the store, registering for an event–they all dealt with the customer’s desire to connect with the business.
Mood Board/Style Guide
Any solution needed to keep in line with their business identity. I sampled colors from books in their “Rare and Medium Rare” collection. I scoured websites from nearby booksellers and then pulled samples from the Cooper Hewitt, Printed Matter, artist Marcel Broodthaers, and the Dia Foundation.
I picked muted primaries for my color scheme - it has a mid-century feel that fits the business. Bookmania and its retro 70’s style seemed right. Apple’s San Francisco fonts looked great on a small screen. The website was going to be content-heavy, and I wanted a clean sharp look with good readability.
Wire Frames and Usability Testing
I had a pretty clear idea of what I wanted to do–how I wanted the images to look, what the interface was going to be. I knew that I wanted to reduce the number of clicks needed to perform any task.
My low fidelity was pretty low-but it had many features that were eventually in later iterations. The usability test was a fail–the subject kept clicking on text boxes meant to house titles.
The mid-fidelity went better. Knowing that I had to accommodate a lot of content, I spent a lot of time working on the layout that would eventually become part of the finished site.
The usability tests went much better this time–after I figured out how to have someone test remotely without an Invision account. The subject had problems initially understanding the scrolling down feature, which led to changes in my high fidelity wireframes.
I had a lot of fun with the design here, although there are somethings I’d like to change and flesh out more. I wanted to make sure that the calls to action were visible, which sometimes meant putting two links for the same action in the document. The respondent was able to navigate easily through the app. Luckily I tested the design on my phone in Sketch Mirror–and I could tell that the type that looked great on my large screen needed to be more readable.
Next Steps
- Add more content, and link that content to other places on the website. i.e.
- In addition to the drop-down search bar, add another field for additional search terms.
- Refine my content–there are images I want to be more dynamic, especially on the confirmation pages.
- Work on the “create an account” section and add shipping info.
- add additional payment platforms i.e. Apple Pay
Final Thoughts
I designed websites before joining the cohort-working with Square Space, Format, Live Books, and Adobe Portfolio. Before that, I used Dreamweaver and Lightroom’s web module.
I approached the project from the perspective of a small business owner who needs a responsive website. I thought that designing an app would be inappropriate given the size of the business and the needs of its clientele. In a world when everything changes so fast, some things stay the same–such as the need for a clear structure in a website.
