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.”
“’Home’ goes near ‘pillow’, ‘dog’ needs to be next to ‘home’.”
Remote Card Sorting Exercises with a Trello Board
“I’m going to put keychains in fashion accessories.”
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
- Home, Home Décor
- Garden, Plant(s)
- Fashion, Clothing, Apparel
- Kitchen (Practical or, Novelty)
Secondary Navigation
- Wellness, Self-Care, Body, Skincare, Beauty
- Stationery, Paper, Cards, Books
- Accessories, Jewelry, Keychains, Bags
- Baby, Children, Kids
- Candles
- 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.
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.
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.
