SHOP Main Street: A UX Case Study

The Challenge

With the ever-increasing online presence of large retailers and American-owned companies, small local stores are predicted to lose $1.6 billion in retail sales. Local Canadian shops are especially vulnerable as many of them have a weak online presence. One of Vancouver’s most distinct neighbourhoods, Main Street, aims to bring their unique shopping experience online in order to promote interest in shopping local, increase community engagement, and thus increase sales of its many eclectic boutique shops.

The Solution

We needed an integrated e-commerce shop that brings the Main Street shopping experience online, provides a platform for community and social engagement, and fulfills each of our user’s goals. We needed a truly customized online shopping experience.

Research

(For this project, we conducted the research portion in groups based on the product category we chose. My team member Elan and I worked with Women’s Clothing.)

We started our research by asking the question, “What is it about Main Street?”

Understanding the factors that made Main Street unique and the factors that kept drawing people back to Main Street was crucial in recreating the Main Street shopping experience online.

We found that Main Street is known for its many vibrant and eclectic shops, restaurants, cafes, and parks. It is also a hub for cycling activity, and the sidewalks are alive with community and local character. In short, Main Street is one of Vancouver’s most lively and sought-after neighbourhoods.

This uniqueness, which cannot be found elsewhere, is what draws people back to Main Street time and time again.

With this revelation in mind, we conducted contextual inquiries, interviews, and surveys in order to further understand the motivations of Main Street shoppers. Our questions focused on exploring the different motivations behind shopping on Main Street, such as fashion styles, the preference of boutiques over large retailers, and the community allure of Main Street.

“We hand write our receipts. It gives us an opportunity to chat with our customers at checkout. It’s what I would call ‘relationship marketing.’” — Storekeeper at Eugene Choo

Planning

Affinity Diagram

We sorted our data by using an affinity diagram and found the following key insights about our users:

  1. Our user has a busy lifestyle and doesn’t have too much free time.
  2. Our user wants fashion to reflect their individuality and personality.
  3. Our user likes the uniqueness of Main Street.
  4. Our user likes the personable and curated shopping experience that Main Street offers.
  5. Our user wants shopping to be easy.
  6. Our user shops with intent.
  7. Our user is price conscious.
  8. Our user likes to be fully informed about products before making a purchase.
  9. Our user supports local businesses.

(After the affinity diagram, the rest of the project was completed on an individual basis.)

With these insights in mind, I narrowed my user down to anyone who likes to shop on Main Street but do not have the time or convenience to do so. Next, I created my user persona.

User Persona

I used this user persona to guide the planning and design process of my project. This allowed me to make sure that my decisions were always user-focused and were based on my user’s goals and frustrations.

User Goals:

  • To browse and purchase clothes in an efficient manner.
  • To find clothing that reflects her individuality.
  • To support local businesses.

User Frustrations:

  • I don’t have time to shop on Main Street.
  • Online shipping and returns are hassle and takes a long time.
  • Large retailers and shopping malls are overwhelming.

Each feature of the website had to solve a specific problem and help the user achieve a specific goal. Utilizing a user scenario and user stories, I was able to clearly lay out what goals needed to be achieved, which then informed what features needed to be implemented.

User Scenario:

Sarah wants to shop from some of her favourite stores on Main Street. However, she is always busy during the day when the stores are open. She wants to buy a t-shirt and a pair of jeans for the best price possible.

In this scenario, we can conclude that Sarah:

  • likes Main Street shops
  • is busy
  • shops with intent
  • is price conscious

User Stories:

  • As a user I want to create an account, so that I can make a purchase.
  • As a user I want to search products by category, so that I can find what I’m looking for.
  • As a user I want to sort products by price, so that I can shop within my budget.
  • As a user I want to see photos and information about the products, so that I can be informed before making a purchase.
  • As a user I want to add an item to my cart, so that I can proceed to checkout.

With these elements in mind, I created a user flow and ran it through with my user persona in mind so that I could plan out the features needed in order for the user to complete each step. While the basic user flow was set early on, there were many features that I wanted to include. However, I quickly realized that by focusing on additional features and future considerations, I was neglecting the primary business goals.

Design

The primary business goal of this project was to increase the sales of boutique shops. Creating a seamless online shopping experience is the first step in achieving this goal. Creating a personable and curated shopping experience is my solution to achieving both the business and the user goal.

I incorporated a feature that would personalize clothing selections for the user following the user’s response to a short survey. This feature achieved the goal of creating a curated shopping experience for the user. I also included category filters, sort functions, and a simple and straightforward checkout flow in order to make shopping and searching for items as easy as possible for the user. This would ultimately help in achieving the goal of increasing sales.

Additionally, there were other business goals that needed to be addressed. These included increasing social media engagement, increasing community engagement, and educating shoppers on the basic information of each store.

To achieve these goals, I created a landing page that allowed the user to choose which of the following categories to shop for: women’s clothing, men’s clothing, furniture and antiques, home décor, and records. I also included an “About” page that included information on the SHOP Main Street initiative, each participating store, community events happening on Main Street, and lifestyle blogs relating to Main Street shops. There is also a sign up option for a newsletter that would detail news, events, and other happenings on Main Street. Lastly, I included social media icons that would link to the SHOP Main Street social media pages.

Keeping all of the goals and my proposed solutions in mind and closely following my user flow, I created paper sketches, which would then serve as physical prototypes that I could quickly iterate following testing feedback.

Paper Wireframes

After testing the paper prototypes on users, I received feedback on mainly two issues:

  1. Users were discouraged to proceed to the next step because the copy and call-to-actions were not clear enough.
  2. Inputting shipping address before choose shipping method did not make sense because there is an option for users to pick up their purchase in store, in which case they would not need to input their shipping address.

I rewrote the copy to make clearer what the incentives are for proceeding to the next step. I also swapped the Shipping Address and Shipping Method pages around, so users who choose to have their products shipped would be taken to the Shipping Address page, whereas users who choose to pick up their products in store would be taken directly to the Payment page.

With each user feedback addressed, I was ready to translate my paper prototypes into digital wireframes.

From Paper to Digital Wireframes

In terms of the interface design, I opted for a simple navigation bar at the top of the page that reoccurs on every page (except the landing page). It allowed the user to jump to other categories, access their account, and check their shopping bag with ease. As well, each page (except the landing page) has a footer that contains links to the “About” page, general shopping information, social media pages, and a newsletter sign up option.

Prototype

I used InVision to turn my digital wireframes into a clickable prototype.