Unnameable Books
Part 2: The Design Phase
After the research was completed, I began the design phase.
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. I also wanted the user to be able to access all the features regardless of the page they were on through the flyout.
Features
Several of the solutions from the ideation session 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. I also wanted to design a site that would help the business grow beyond their local footprint.
About/Contact Info Tab
Location and hours, phone number hot links, email hot links
Search Bar
Author, title, subject, ISBN
Mailing List
Simple opt-in, separate from creating account
Re-Design and Site Map
Create more pleasing design with separate categories accessed through hamburger menu
Enhanced Book Listings
Staff recommendations, book reviews, descriptions, and multiple view of content where relevant
User Flows: Search for a book, add to cart, and checkout
This flow illustrates the flow between entering the site to purchasing a book and all the steps in between.
Mood Board
The store and inventory has a mid-century aesthetic, so I chose selected items as the basis for this mood board. I also drew inspiration from artists and art institutions from the same period.
Style Guide
I chose Bookmania for the logo because it was inline with the existing style of their current logo. San Francisco was chosen for its readability on mobile devices. The red, yellow and blue colors were sampled from the store’s inventory, and are variations of the colors in their existing logo.
Mid Fidelity
Based on my low fidelity usability tests, I streamlined my design, while incorporating necessary verbiage, i.e. credit terms and conditions.
High Fidelity
Home Page
Users now see scrollable list of highlighted books for sale on the home page.
Add to cart.
A clear, simple way to check out with the option to continue shopping.
Fly out Menu
Available from any page on the site–it allows users to access multiple pages easily.
Events Tab
The events tabs merges the information from the stores blog and gives the user all the information they need to sign up with out scrolling down to the bottom of the page.
Contact Us
There are now multiple ways to contact the store, either through the fly-out menu or the footer.
Mailing List Sign Up
The user can sign up for the mailing list through a link on the fly-out menu which takes you to this page. The footer on every page also includes links to sign up to the mailing list as well links to social media and contacting the store.
Usability Testing
Tasks tested
search for a book, add to cart, and check out
sign up for mailing list
sign up for event
Lo Fidelity
User was confused about the boxes I had drawn for the logo, thought certain things were links that weren’t
Mid Fidelity
Next tests with the mid-fidelity prototypes went better – better functionality, more intuitive. What I saw was a clunky design with functionality that looked old –and the participant didn’t get that some of he needed scroll down to see more content. The top of the layout was also cut off.
High Fidelity
The last tests with the high-fidelity went well–my participant knew where things were, although he didn’t understand why I didn’t have more content i.e. books in every category.
However when I previewed it on my phone I noticed that the type was hard to read. I redid the type and adjusted my layouts to improve it’s readability and interface.
Next Steps
Book Categories
Separate from search bar (bookstore already has this capability 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)