UX Case Study — Main Street Home Decor

Mid-Fidelity E-Commerce Website

tsu
tsu
Draft · 6 min read

Location: Main Street, Vancouver
Project Length: 2 weeks
My role: UX (User Experience) Designer

The Opportunity

In 2 weeks, my task was to design an e-commerce website for Main Street in Vancouver, specifically for home decor. The business goals include increasing interest in shopping local, supplementing the sale of Main Street shops, and creating community engagement.

Design Methods & Tools

Contextual inquiry, Surveys, Interviews, Organizational Research, Domain Research, User Persona, Affinity Diagram, User Cases, Storyboard, User Flows, Sitemap, User Journey Map, User Stories, Scenarios, Feature Prioritization, Prototyping, User Testing, Wire-framing

My Design Process

01 Research

I conducted customer and market research to drive the planning phase. The primary goal of research is to 1. Identify the motivations and behaviours of customers and 2. The positive experience and pain points of shopping in-store and online respectively. The interview questions can be found here.

Contextual Inquiry
To begin, I did a quick mind-map on the areas I wanted to explore with my users and a list of home decor boutiques along Main Street. I interviewed 7 in-store customers, 6 store managers and conducted moderate observations.

What I found from User Research:

  • Main Street shoppers are generally willing to spend more despite of purchasing power

Domain Research
To get a better picture of the home decor online

  • The home decor online presence of boutique stores are weak

Organizational Research
Information Architecture: for building the sitemap
Ikea, Amazon, Bed Bath & Beyond, Nineteen Ten, West Elm, Crate & Barrel, The Cross Decor & Design

To understand the mental models of existing home decor shoppers, I gathered mega-menus of a list of e-commerce websites and tallied the categorization titles. This includes e-commerce websites of neighbouring communities such as West 4th and Yaletown, and other big chain competitor stores that my users would shop at.

Feature Prioritization

I then looked into the features of several top e-commerce websites to narrow down the features for building a minimal viable product. Feature prioritization also helped me to differentiate between what is needed and what is wanted:

Based on my findings, the top 3 struggles shopping online are:

  1. Products are out of stock

User Persona
I developed a user persona based on my research. Although there were two prevailing age groups (women age 25–34 and 55+), both groups have similar motivations and pain points, hence I would be focusing only on 1 persona.

Affinity Diagram
Using affinity diagram, I identified patterns and gain insights from research data:

Affinity mapping positive experience, pain points and values from user research

02 Planning

User Flow
Tasked with customers’ concern over stock availability, product visualization and return policy, I have developed an intuitive user flow that resolves the 3 primary concerns from users’ initial goal of purchasing a product to checkout.

Sitemap
Based on my research on the IA of existing e-commerce websites, customers would be prompt to shop either by products, by collections or by rooms.

Customer Journey Map
From research, I have created a customer journey map of customers shopping online. This allowed me to understand where the user experience is currently being well/poorly supported, and propose opportunities for innovation. Currently, customers are experiencing highest friction in the returns and refunds stage. Opportunities may include providing multiple returns channels e.g. drop-off points.

User Stories
“As a minimalist, I want to redecorate my bedroom so that it reflects my personality.”

“As a busy photographer, I want updates on stock availability so that I won’t waste time going in-store just to find out that everything is gone.”

Scenario
Katherine, age 32, photographer, moved to Vancouver 1 month ago and is looking for some home decorations for her new house. She has visited Main Street twice and is attracted by its quality and vibes. She prefers shopping in-store because she can feel the material and visualize how the products would go along with other decorations. But as Katherine is busy settling down, she spends more time shopping online, although she would still choose to pick up her purchases in-person to avoid dealing with delivery and returns.

03 Solution: Design

Stock Availability
To prevent the recurring problem of customers not knowing when the products are out of stock, I have created a stock availability update for each product. Customers could easily access the information when they hover over individual items on the items page.

Low- and high-fidelity prototype of the stock availability pop-up on the items page

3D Virtual Home Decoration
I have created a 3D virtual home decoration tool for customers to visualize how a product would appear in real-life settings e.g. their bedrooms. This helps compensate for the missing positive experiences e.g. feeling the material of a product, inspecting the size etc during in-store shopping.

High fidelity of the 3D virtual home decoration tool

Easy & Flexible Return Policy

I have designed a flexible policy that minimizes the friction and steps required to return any products. Customers can choose from multiple drop-off points including neighborhood convenience stores or at Amazon locker-type facilities or Uber Rush — a courier service for deliveries.

A user-friendly e-commerce website should provide users with the information of their concern before they are conscious and spend time looking for it. With that in mind, I have created a button that would attract users to land on the return policy page, and a tagline We Care with a heart-shaped logo.

High fidelity prototype of the return policy button on the check-out page

04 Prototype

You can also check out my prototype here.

05 Testing

I conducted 9 user testing using the low fidelity paper prototypes. 5/9 users were unable to find the shop menu from the front page. On top of that 7/9 thought an extra click to start shopping is rather unnecessary. I therefore reiterated the design by putting the product categories on the landing page.

Original (paper prototype) homepage
New (high fidelity) homepage

Ending Thoughts

From minimalist table lamps and locally sourced ceramics to handcrafts tote bags, Main Street is a shopper’s paradise. The success of Main Street is largely driven by bringing people together — whether it is shopping in a boutique store, chilling in a cafe on a Saturday afternoon or taking a stroll down the street, therefore it is even more important to make it as easy and friction-less as possible for users who is wishing to connect and engage with the community online. And sometimes a change as small as enlarging a button or changing the position of an icon can make a difference.