Jodie Winsor Design
  • UX Design
    • Embr Wave Onboarding
    • Embr Wave App Features
    • Boston Symphony Orchestra
    • Loft+Vine Case Study
    • The Elixir App
  • Visual Design
  • About
  • Contact
  • Search
  • Menu
  • LinkedIn
  • Twitter
  • Instagram
You are here: Home / Loft+Vine Case Study

LOFT + VINE | 2019

Designing
E-Commerce

Loft & Vine, an eclectic little shop in the North End of Boston opened two years ago. It carries a vast inventory of artsy and clever kitchen, home and garden items. The shop’s customer base is split into two groups, Bostonians and tourists. Neither group can access the store’s inventory online. I designed an e-commerce site that is easy for users to navigate from anywhere.

My Role

UX Designer
Full UX process: Research > Ideation >Design >Usability Testing

Skills: Contextual Inquiry, Card Sorting, Heuristics Evaluation, Affinity Mapping, Competitive Analysis, Information Architecture, User Flows, Rapid Sketching, Site Map, Wireframing, High-Fidelity Comps, Interactive Digital Prototyping

Tools: Axure, Photoshop, Illustrator

Length: 2-week sprint

The Problem

Customers need a way to access Loft & Vine’s inventory online because they have busy lives and want to order the shop’s unique home, garden, and kitchen products from anywhere.

Mining a Shop’s Treasures

Sarah Garabedian, Loft+Vine’s owner, organized the Loft + Vine inventory into three primary categories; kitchen, garden and home. Some of the items in the store are very unique and I wanted to see if customers found these categories to be the most useful way to organize the store items.

I spent an afternoon at Loft + Vine photographing 100 or so items and observing customers.

Sarah shared her insights and I observed customers. Then I went online, to research local and national competition. This raised several questions:

  • Who would the competition be online?
  • What terms would users google to find the unique items Loft + Vine carries?
  • Would they search for novelty items or just type in words for the specific item on their wishlist?
  • Which words would be most popular in an online search?

Loft+Vine, North End, Boston, MA

Research: A Systematic Inquiry

Given the tight 2-week sprint, I focused on how and why Loft+Vine’s demographic searched for items online. Using Jakob Nielson’s advice that five participants will unveil 85% of usability issues, I interviewed five women, 20-60 years old, Boston area residents and tourists who recently visited Boston. Looking to understand their online shopping preferences, my research encompassed:

  • Contextual Inquiry
  • Card Sorting
  • Affinity Mapping
  • Competitive Analysis
  • Vetting Findings with Google Trends
  • Synthesis

Contextual Inquiry

Observing User Behaviors

“Can you show me how you found that online?”

I asked users to show me how they shop for novelty items online. My key findings:

  • Users are busy! They like Amazon because it is quick and fits their busy lives.
  • People seek out unique products.
  • They put thought behind gifts.
  • Users love to use ‘search’ to shop. Most people I interviewed are only using categories for browsing.
  • Users who do browse like to shop online using filters.

 

Create Your Dream Store

Using card sorting gift buyers sorted 100 store items.

I placed 100 items on a Trello board and asked users to organize the items and named their categories. Each participant talked about their decision-making process as they did the exercise. Card sorts were conducted in-person or via a remote test using Zoom.

“I like to simplify stuff.”

Tourist, South Carolina(Organized all 100 items in 4 categories.)

“’Home’ goes near ‘pillow’, ‘dog’ needs to be next to ‘home’.”

Bostonian(Placed categories in precise order.)

Remote Card Sorting Exercises with a Trello Board

“I’m going to put keychains in fashion accessories.”

Bostonian(Created nine categories with sub-themes.)

Making It Easy to Find Products

I took the categories created in the card sorting exercises and grouped them in an affinity map to find commonalities.

The affinity mapping revealed that people used similar labels. Once grouped, these categories began to make sense as primary and secondary navigation labels bases on how people had grouped items in their card sorting exercises.

Primary Navigation

  1. Home, Home Décor
  2. Garden, Plant(s)
  3. Fashion, Clothing, Apparel
  4. Kitchen (Practical or, Novelty)

Secondary Navigation

  1. Wellness, Self-Care, Body, Skincare, Beauty
  2. Stationery, Paper, Cards, Books
  3. Accessories, Jewelry, Keychains, Bags
  4. Baby, Children, Kids
  5. Candles
  6. Pet(s), Dog, Animal

“This is so Anthropologie.”

—Tourist recruited for Card Sorting, resident of South Carolina

Competitive Analysis

How does the competition do it? I looked at big box stores and popular local boutiques.

I did a competitive analysis of local Boston novelty type shops and looked at a few big box stores selling related items. I took the ‘most used’ primary and secondary names from user testing and compared them to the naming conventions the competition used on their e-commerce platforms. I wanted to understand what local Boston stores and big box stores used as categories to organize their inventory.

View Google Sheet

Large Retailers

Anthropologie

Urban Outfitters

At Home

Target

Amazon

Specialty Shops in Boston

December Thieves

Olives & Grace

Nomad

Patch NYC

Tatyana

Synthesizing & Vetting the Results

Synthesizing my findings from the affinity map with the competitive analysis I created primary and secondary navigation for the information architecture of Loft+Vine’s new e-commerce store. I then used Google Trends to vet the best word choices.

 

Information Architecture Saves the Day

How will this new store integrate into the existing website?

Based on my research users don’t have a lot of time and don’t want to dig to find items. The current site is very basic, so I put the whole store front and center on the home page and moved the existing blog, ‘our story’ section and secondary information to the bottom.

Design

Now that users can easily discover products Loft+Vine needs an easy purchasing pathway.

79% of people who don’t like what they find on one site will go back and search for another site so I wanted to find the most easeful flow.(Source: Think with Google)  I went back to the competition and studied the most effective checkout processes.

Rapid Sketching

I then took this information into a sketching phase to further develop an effective flow and flush out the details.

PreviousNext
12

Putting Design to the Test

“Give me a large search bar and remember what I like.”

I worked out the details, building wireframes in Axure to test the design’s functionality. Testing revealed that this design needed some fine tuning.

Contextual inquiry had revealed that users prefer to search rather than browse. In usability testing, I discovered: Website users prefer a large search button centered at the top of each page. The home page has three sections that are curated; bestsellers, what’s new and featured artists. Customers love these!

Testing revealed that shoppers like to filter items for faster browsing results. They want to know how many items were in each category. And, website visitors prefer to select the number of ‘items per page.’

People are busy. Testing revealed a desire for inventory that is curated to their liking, so that shopping takes up less time. I added a ‘ You May Also Like’  section. The site would have an algorithm that remembers personal likes and curates a personalized section.

Going through the checkout process I had to think through the most efficient checkout order. I opted for  a shipping >payment > review process. Shoppers responded positively to this order. I added in the Sign-In or Sign-Up Modal after initial usability tests. Visitors shared that modals are familiar and comforting for them.

The Solution

Now Loft & Vine’s website customers have a fast and efficient way to purchase the shop’s unique products from anywhere.

Your task: Follow the user flows to select and purchase a dog print serving tray.

The Solution

Adding this well-organized e-commerce shop to Loft & Vines website will allow customers to have a fast and efficient way to purchase the shop’s unique products from anywhere.

Your task: Follow the user flows to select and purchase a dog print serving tray.

How we know it worked:

After usability testing, I sent out a SUS evaluation.
The results:

 • 5/5 shoppers said they “strongly agree” when asked if they felt confident using the Loft+Vine shop.

• 100% of home furnishings shoppers said “yes” they would use the site to shop for specialty items.

What I learned

Users make decisions quickly.

Most of the people I tested moved in and out of an app quickly to complete a task and then move on to the next thing on their to-do-list.

Leave my bias at the door.

It is challenging to ask users open-ended questions, to frame questions well and not lead them. I really want to have my own bias challenged. And even if I get the questions “right” as a researcher my understanding of the answer can still be an interpretation. There can be an illusion of transparency on both sides. This is where follow up questions have become important for me.

Good information architecture creates ease for online shoppers.

With good Information architecture, my user doesn’t get bogged down wondering where to find things. This means taking the type to understand how users search or browse for information. What are their motivations? What are their challenges?

View other UX Design projects

Embr Wave Features

Boston Symphony Orchestra

Embr Wave Demo

©2020 Jodie Winsor | jodiewinsordesign.com
  • LinkedIn
  • Twitter
  • Instagram
Scroll to top