Creating an E-Commerce Platform for a Local Shopping District — A Case Study

Joseph Jin Hyuk Lee
Oct 17, 2016 · 12 min read

UX Design | e-Commerce Website Design

About ShopMain.ca

The way consumers shop is changing and more people are finding themselves shopping online. Local retailers have poor presence online and it has been negatively impacting their business. The Main Street shopping district is represented online by ShopMain.ca and the current website is limited at creating awareness to the visitors by introducing the shops and engaging the community through blog posts. It wishes to implement an e-commerce platform into the website and we, the User Experience (UX) Design students at RED Academy were given the opportunity to create a customized online shopping experience based on shoppers’ unique interests.

The Research

Having never been to Main Street, I gathered some questions that I had for the shoppers and decided to visit the area to experience the district first-hand. After visiting some of the clothing stores and getting the feel of the area, I spoke to kind individuals who were willing to interview me by sharing their experiences in shopping for clothes on Main Street.

Proactively reaching out to my social network, I interviewed a total of six people and received 70 feedbacks on my survey. For the user interviews, I screened to interview people who had different perspectives about Main Street. As a result, my interviewees either currently lives, lives around, works on, or used to live on Main Street.

Key Findings

After conducting the user interviews and a survey, I found that my users were very busy and shopping was something that needed planning and required time. As a result, my users sought for alternatives by shopping for clothes online but generally had bad experiences. There were two main obstacles that kept my users away from purchasing online- sizing and returns. Users were hesitant to buy online especially from unfamiliar brands that carried inconsistent sizes. Also, the return procedures were a hassle as they had to go to the courier or the store, taking away the intentions of shopping for convenience that they were seeking for.

Interview Quotes

“Do you buy clothes on Main Street?”

“I don’t shop at boutique shops because I find it difficult to find the right size for me”

“Is there a reason why you buy less clothes online?”

“I’m finicky and I like to try stuff on. I don’t want the hassle of shipping stuff back if it doesn’t fit… even if the company pays for the shipping, sometimes I’m even lazy to go to Canada Post to ship it back.”

“Do you shop online?”

“Not so much, just because I made a lot of mistakes shopping online”

“What went wrong?”

“Wrong size, returns, it was too much of a hassle so I’d rather go there in person.”

Affinity Diagram

Affinity diagram from user interviews and survey

An affinity diagram brings together the user interview and survey insights by categorizing into common groups and topics. This exercise provided valuable insights on the pain points of the shoppers. For example, users were less likely to purchase from boutique stores compared to large corporation retailers as the sizing is not standardized. Also, the return procedures tended to be more strict or were at least perceived to be strict at boutique stores. As a result, my users found themselves shopping directly at the stores.

User Persona

The compilation of my research has led me to the user persona as shown above. Charmaine was born and raised in Vancouver and has been living in Mount Pleasant area after graduating from University. In addition to her exciting tech startup career, she serves at a local bar on the weekends as the extra income helps her to live in Vancouver without relying on her parents.

She prefers to shop at boutique shops where she is able to find unique clothes. She also believes that local businesses tend to be more invested in the community compared to multinational retailers. However, she doesn’t have the time to visit the stores and she finds the online shopping platforms to be very limited in finding the right size for her. In the past, Charmaine ordered clothes online from a local boutique store and had a frustrating experience as she had to skip lunch to go to Canada Post to return the item to the store.

Domain Research

Comparison of Vancouver shopping districts

To get a better understanding of what my users were exposed to when shopping local, I visited the competing shopping districts in Vancouver and analyzed what they offered. Through my competitive and comparative research, I quickly realized that none of the Vancouver shopping districts had an e-commerce platform. Shop West 4th had an intuitive mobile application that focused on introducing what’s going on in the neighbourhood, but after navigating the app, it didn’t seem to offer much value or incentive to use the online platform. To further my research, I looked into competitor e-commerce websites that my users were shopping at and inspected the features that they offered to the users.

Comparison of e-commerce websites

In particular, I was interested in finding out more about how the e-commerce websites were helping users to find the right size for the clothing. In doing so, all of the competitors had a ‘Sign In’ page that gave clothing suggestions to the user as well as a shortlist of clothes for online checkout. However, I thought this was a basic practice in today’s e-commerce websites and dug a little further and found out that the live chat was the most intuitive solution to help users to find the right clothes for them. As the live chat is not targeted specifically to solve sizing issues, I wanted to focus on coming up with a creative solution that didn’t require human interaction as my users valued the ability to shop online at their own pace at their convenience without the pressure of a salesperson.

In addition, online vendors offered free shipping with orders over a certain amount and tend to offer free online returns via mail. However, it still prompted the user to go to a courier and coordinate a return. Although the monetary pain of return has been solved, the inconvenience of returning items seemed to persist.

Research Conclusion

As a result of my research, I have defined two core pain points of my users:

  • Users have trouble finding the right size when shopping online
  • It is inconvenient for the user to visit the courier to drop a parcel when returning items.

The Plan

The Opportunity

Like any good UX design, the opportunity was in solving the user’s pain points. To solve the two pain points outlined above, I have implemented a personalized sizing guide as well as free delivery & return feature to the users in the Metro Vancouver area into my design.

Scenario

  1. Maynard would like to shop for unique clothes at boutique stores but finds it difficult to find the right sizing with so many different brands out there. From past experiences, he realizes that each brands have a different sizing guide and it is keeping him from shopping for clothes online.
  2. Charmaine prefers to support local businesses when shopping but is often faced with the frustration of the complicated return procedure when things don’t work out. She is extremely busy with two jobs and thinks that going to the courier to initiate a return is too much of a hassle and it defeats the convenience factor when shopping online.

Storyboard

User Flow

The user flow is separated into two scenarios:

  1. To the point that the user receives her order
  2. Return & exchange process.

Throughout the buyer’s journey, the user has the option to try the ‘Size for Me’ feature to find the clothes that fit her. If she has not used the feature, it is encouraged to do so to take full advantage of the website at the ‘Profile’ page after signing in.

Use Case

Goal: Purchase the Julian Trench Jacket by Only & Sons on ShopMain.ca website
Preconditions: The user does not have an account and creates a new account.

  1. The user scrolls down the ‘Home’ page and selects the ‘Women’s Fashion’ page under the ‘Explore’ section.
  2. The main section of the ‘Shop’ page prompts her to utilize the ‘Personalized Fitting Guide’ feature by entering her sizing dimensions.
  3. The user creates an account and enters her size dimensions.
  4. The user filters the category to ‘Coats & Jackets’ and filters the colour to ‘Black’.
  5. The user selects the Julian Trench Jacket that she is looking for, chooses the recommended size and presses ‘Add to Bag’.
  6. The user goes to ‘My Bag’ section and proceeds to ‘Checkout’.
  7. The user enters the shipping address.
  8. The user decides on the shipping method. As she is eligible for the ‘Local Delivery Access’ program, she is able to select the date and time of delivery that she prefers.
  9. The user enters the payment information.
  10. The user reviews her order and presses ‘Submit Order’.
  11. Confirmation popup appears and prompts her to go to her ‘Profile’ page where she is able to track her delivery process.
  12. The user receives a text message from the delivery team where she is able to make sure to be at home when the delivery arrives.
  13. The doorbell rings and she receives her new Julian Trench Jacket!
  14. She is happy that she is supporting a local business and that she can arrange a return or exchange pickup if things don’t work out.

Sitemap

After coming up with the user flow, creating a sitemap really helped to visualize the pages needed for design. The sitemap was a critical step in creating a minimum viable product (MVP) to focus on solving the user’s problem without getting carried away.

The Design

After the planning stage, I began the design process with sketches to transcribe by solutions onto the paper. The design implemented two main features to solve the user’s frustrations.

Feature 1: Personalized Fitting Guide

The user’s biggest frustration when shopping online was finding the right size. As a result, it reduced the confidence when shopping online and the users often had no choice but to make time to visit the stores to find the right sizes. To alleviate this pain point, the users are encouraged to enter their sizing dimensions. The users can either enter their own inputs or select sizing guides from their favourite clothing brands.

Once the user provides her sizing dimensions, she can either select ‘Size for Me’ on the sizing filter or browse for clothes. Once she selects the clothes that she likes, the system is able to recommend her a size based on what she has entered earlier. The user can regain the confidence in buying online as the system recommends the size after comparing the item to her sizing dimensions.

Feature 2: Free Local Delivery & Returns

The second biggest pain point for the users was the inconvenience of the return procedure. The users found themselves having to visit the courier to drop a parcel to initiate a return and it seemed to defeat the purpose of seeking for convenience when shopping online. To solve for the user’s frustrations, I implemented free local delivery & returns to the shoppers in metro Vancouver.

When eligible for free delivery, the user is able to select the preferred date and time of the delivery. On the day of the delivery, she receives text messages on the estimated time of arrival from the delivery team. This was an important feature as the users found themselves having to guess and staying home all day for delivery.

Despite having the right size of clothing, things don’t always work out and we understand that. Even if the vendor covered for the return shipping, users had the inconvenience to go to a courier to drop the parcel. When asked on the motivations behind shopping online, convenience was the single most important factor and the hassle of going to the courier took away the convenience of shopping online.

To solve this inconvenience, the users can go to their profile page to initiate a free return. When returning, the users have the leisure to choose the date and time that the delivery team can pick up the item.

What About The Business?

The free local delivery & returns feature also took into the consideration of the business as it is only available in metro Vancouver. With a dedicated delivery team, the business can coordinate item delivery and returns effectively as the date and time is predetermined by the users. By offering such service to the shopping district on Main Street, the shops can have the competitive edge to improve their market share.

The Test

Usability Testing

User testing first with paper prototypes immediately gave me some valuable design insights. The user was navigating through the task without even noticing the personalized fitting guide feature! I made the ‘Size for Me’ button on the ‘Shop’ page larger and highlighted it in green so it was more apparent. Another issue was the ‘Sign Up’ page. The user found that the sign up was too long and that he did not see the value of sharing his information. To solve this, I’ve added in a ‘Sign in with Facebook’ button and integrated the prompt to fill in the user’s sizing dimensions into the user flow, but made it optional in case the user already knows their sizes.

Here is my classmate @hugoatRED testing out my prototype

The Final Prototype

User Tasks

  1. You want to purchase a Julian Trench Jacket by Only & Sons on ShopMain.ca but aren’t sure of the sizing. Navigate the website to find the right size and have the item delivered to your home.
  2. You purchased a medium Julian Trench Jacket by Only & Sons on ShopMain.ca and the jacket was delivered to your home. You tried on the jacket but it’s too big and would like to return it! Sign into the website and arrange a return pickup.

Try it yourself! the final prototype made with InVision can be found below.

Please feel free to leave a comment below or message me directly! I’m always open for feedback and gaining more insights from my users :)

The Recap

Having no design or artistic background, the learning curve was at times overwhelming to finish the project on time. After doing progress evaluations with my instructors, it was apparent that I wasn’t fully grasping the concept of user experience design and I found my self having to constantly revisit the previous lessons. With an undergraduate degree in Psychology, I was confident coming into the program that I was able to draw the key insights from my users through research, but rather found myself dwelling on the research step when I should be moving onto the next step.

The agile methodology was something that was completely new to me and it made sense to implement as I went along the UX design process. I learned the hard way that despite the drive for perfection in every step, user testing will provide insights that will implement changes. Scrambling through finishing the project, I was disappointed in myself and received some constructive criticisms from the panels after my presentation. Regardless, I want to take this opportunity as a wake up call to rise up stronger to develop my skills to become a competent UX Designer. I will end this post with an inspiration quote (cheesy I know) to encourage myself and any other aspiring UX Designers that are faced with roadblock on the process.

“We learn wisdom from failure much more than success. We often discover what we will do, by finding out what we will not do.” — Samuel Smiles

Joseph Jin Hyuk Lee

Written by

Product UX/UI Designer | Portfolio: jhlee.ca

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade