A Heuristic Approach to the IA of an Online Shopping Experience

“What you think people are going to see on your Web page may not be what they do see.”

THE BRIEF

CLIENT: A boutique NYC kitchenware company with an authentic story and unique product offerings

PROMPT: Design a new information architecture and content strategy around the online shopping experience for existing users of the site in question. The design should meet the goals of the user, the goals of the business, and the goals of the brand. It should be tested by users and follow IA heuristic best practices

TOOLS: Pen & Paper Sketching, Card Sort, Sketch3, Omnigraffle, InVision

TIMEFRAME: 9 days

DEFINING THE OPPORTUNITY

How can we redesign the client’s website so it serves as a beginning to end, one-stop shop for all kinds of users- thereby boosting sales and brand recognition for the business, as well as user satisfaction for the buyer?

OVERVIEW

The Process

GOALS TO SATISFY

Where the finished product will be positioned

CONTEXTUAL INQUIRY

METHOD: I started my research process by visiting my client’s store.

FINDINGS: The store was quirky, special, and most of all, authentic. It was packed with artfully stacked piles of plates, vintage salt-and-pepper shakers and creamers, flatware and glassware. Many of the cheeky patterns are designed by celebrity partners.

Emily, 44
“I’m looking for something vintage that catches my eye”
Anna, 26
“I love the styles, colors and hilarious little sayings that come on these dishes”

COMPETIVE USER FLOW & HEURISTIC ANALYSIS

“A faster checkout means a more satisfying user experience”

METHOD: My client’s business does not have many direct competitors as not many companies are targeting the vintage dinnerware market. I decided to look at the websites of the most successful retailers that sell kitchenware.

Competitive user flows

FINDINGS: On Amazon, it would take a user 10 clicks and and 6 pages to get to check out, on Bed Bath and Beyond it would take 8 clicks and 4 pages, whereas on Mikasa, it would only take 6 clicks and 4 pages.

OPEN & CLOSED CARD SORTING

METHOD: Open and closed card sorting helped me to improve the labeling, and grouping of the client’s products.

4 open — participants created their own names for the categories; very consistent between participants.

4 closed — predetermined set of category names; each session served as an iteration to refine the final content hierarchy

FINDINGS: Closed card sorting helped me to name the categories.

Iteration after 8 user tests

Iteration after open and closed card sorting

FEATURE: My site map would have 6 categories:

PERSONA & AFFINITY MAPPING

METHOD: I reviewed the 3 personas focusing primarily on John.

FINDINGS: This led me to my last finding. The users would value efficient navigation and a responsive site with large product photos and the ability to read and write product reviews.

FEATURES:

The web site must:

Have clear and intuitive navigation | Steer customers toward popular products | Show multiple images for each product | Have product descriptions | Have suggested items | Highlight on new additions

Shopping Cart

Efficient means of adding to and editing a shopping cart | Offer several shipping options

Synthesizing

Ideation process/Sketching | Peer feedback on my Version 1 wireframes

TESTING

COMPETITIVE TESTING: I ran competitive tests with participants in order to see which areas they would get confused or lost in, and which areas they felt were helpful.

PROTOTYPE TESTING: After completing competitive testing , I tested my prototype on 5 participants in order to validate my research findings. I found a few pain points:

  1. All participants were able to navigate and complete the task without any major issues
  2. Quick info was not readily apparent to some users but for those who saw it, they used it rather than going to product page

After 4 more tests I felt good about my decisions and I moved on to the next step.

PROTOTYPE NARRATIVE

NARRATIVE: In order to take the client through my prototype, I created a narrative based off of one of the personas I was creating features for. Here is John’s scenario:

John has just moved to a new place and invited a few friends over. Then he realizes that he does not have enough glasses for everybody. He goes to the web site and looks for stemless glasses. He wants to read reviews to know if it’s a good product along with additional product descriptions. He likes what he sees and decides to buy 2 glasses.

PROTOTYPE

Prototype user flow

See prototype

Mobile version:

Home Page | Slide Navigation | Choose subcategory | Products in subcategory | Product description | Reviews | Write a review | Checkout

LOOKING FORWARD

SHORT TERM: Build out the mobile prototype and to put it through usability testing.

LONG TERM: Continue testing navigational titles

GRANULAR: Experiment with icons, text and color palettes.

LESSONS LEARNED

Test more rough prototype ideas rather than one clean prototype: Due to my perfectionist tendencies I only had enough time to test one prototype. Making the prototype as clean as I can before unvealing it to testers ate up a lot of my time. So I think it will be helpful in the future if I spent more time testing various iterations rather than one perfect one in order to discover which would be the best and most usable.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.