- Lead UX Consultant
- Research & Analysis
- Presentation Design
- Timeframe: 1 weeks
- Tools: Sketch, Omnigraffle,
"18 Miles of Books and Counting" - Strand Books
The goal of this project was to create a minimum viable product (MVP) which was designed to function for Primary, Secondary and Tertiary users in mind. The result was the creation of a Content Strategy, Information Architecture, a Sitemap (using Omnigraffle), wireframes (using Sketch), and an interactive prototype (using Invision) by which I could seek to validate or invalidate data acquired from client and self-initiated research.
Redesign the Information Architecture and Content Strategy around an experience for users of an online retailer while meeting the goals of the users, the retailer, and its existing brand.
Competitive & Comparative Analysis
By evaluating similar online book retailers such as Barnes&Noble, Amazon, and Greenlight Bookstore, we developed a better understanding of the competitive landscape from a global corporation down to a local business.
I compared three book retailers and their features. Important features included:
- Navigation bar w/ drop down menu
- Instant checkout button
- Cards based on 16/8/4 column grid
- Global footer module
- Ability to write reviews
In order to ensure the user has a seamless experience, we created user flows from similar websites. Our goal was ensuring the app had the least amount of steps necessary to accomplish user tasks such as mapping a route.
Block Level Diagram
A visual analysis of Amazon's page layouts suggested how content gets folded on a grid across platforms.
Amazon had the shortest checkout flow of the three businesses analyzed. All competitors offer unique content to signed-in users based on viewing/purchase history and cross-platform experiences use visible modules or cards to group relevant information.
Our three personas have different preferences and pain points. Our goal is to cater to the primary persona while providing features that our secondary and tertiary users still require for an optimal experience.
Daria is a millennial from New York who enjoys tech and gift giving but dislikes services that don't work on mobile and long checkouts.
Roland is a Gen X'er with grand children who enjoys suggestions based on purchase history but hates having to constantly re-enter payment details.
Trung is a single father who appreciates knowing what's new when he visits a website. He doesnt like expensive shipping charges.
Organizing the sites' navigation can't be left to one individual. I used a method known as card sorting to organize the primary navigation:
The client provided us with a limited inventory of 100 items and participants were tasked with sorting them into what they felt was a logical hierarchy.
- Users always distinguished books vs non-book items. It made sense to add an "All books" tab so they could see categories.
- First & Signed Editions, Novels, and "Creative" groups frequently emerged independent of other categories
- Users tend to sort First and Signed Editions with other relevant categories as well
Below are the independent card sorting results.
Ideation, Wireframes & User testing
Low Fidelity Wireframes
In order to create a product that could work across platforms, we started with low fidelity wire frames and block layouts. This made it easy to quickly prototype and test our primary navigation and site taxonomy with users.
Medium Fidelity Wireframes ( with annotations)
Further user testing required medium fidelity wire frames for users to get a better sense of page level content.
To keep the user tests consistent, I created scripted scenarios. The writing is intentionally vague to reduce the possibility of leading the user to achieve the goals we want.
- Imagine you are enrolled in an Image-Making class and have already created a profile, saved your payment information and stored products for later purchase. Using this site, I want you to buy one of your stored product in as few steps as possible.
- Imagine you are enrolled in an image making class and are required to buy a book by a specific image maker. Using this site, how would you go about finding this item?
- Imagine you have some free time and are browsing this site which you are now familiar with. You notice a product you’ve purchased and felt so strongly about your experience with it, that you want to leave feedback for others. Using this site, how would you go about leaving feedback?”