My Role

  • Lead UX Consultant
  • Research & Analysis
  • Presentation Design
  • Wireframing

Project Specs

  • Timeframe: 1 weeks
  • Tools: Sketch, Omnigraffle,
    Invision
 

Strand

"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.

Overview

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.

Research

Competitive & Comparative Analysis

Competitive Landscape

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.

Feature Comparison

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

User Flows

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.

Takeaways

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. 

Personas

Takeaways

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

Primary Persona
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

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

Trung is a single father who appreciates knowing what's new when he visits a website. He doesnt like expensive shipping charges.

Information Architecture

Organizing the sites' navigation can't be left to one individual. I used a method known as card sorting to organize the primary navigation:

IMG_0986.JPG
IMG_0974.JPG
IMG_0969.JPG
 

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. 

Findings

  • 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.

Sitemap 

Resulting Primary Navigation based on card sorting

Resulting Primary Navigation based on card sorting

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.

IMG_1024.JPG
IMG_1025.JPG
IMG_1023.JPG

Medium Fidelity Wireframes ( with annotations)

Further user testing required medium fidelity wire frames for users to get a better sense of page level content.

StevenTripari_P2_Revised+Deliverables_Page_24.png
StevenTripari_P2_Revised+Deliverables_Page_25.png

user testing

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.

  1. 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.
  2. 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?
  3. 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?”

Similar Projects