Case Study: Shop Main St

Main St Shopping Mock Up


For my second UX Design project I was given the task to explore the design process further. Main St shopping was the focus of our assignment; creating a web app that encompassed the feel of Main St and resonated with the users. In two weeks I went through the design process: Research, Planning, Design, Testing/Iterations and finished with Presenting.

Car Free Day — Main St, Vancouver


Surveys, interviews, user persona, and domain research were covered in this stage of the process.


Affinity Diagram: Survey Question Pool

The survey questions were pooled into an affinity diagram created by the class.

The survey explored online and in-store shopping habits and preferences. Using social media, it reached 32 people in one and a half days. The results that came from the survey showed me gaps in my information gathering: questions I could have left out and had no use and questions I should have asked. For example, I wouldn’t have asked “ How often do you shop online?” because the results didn’t have an influence or impact on the project, as we had to create an online store anyways. It also did not influence any design decisions.

To explore what influences my users and what’s important to them I organized three short answer responses into affinity diagrams.

Left to right: Concerns of shopping online, Why they shop in-store, Why they shop online

The affinity diagrams showed me that there are three key themes that influence or are important to the user: the experience, price, and convenience.

The experience encompasses their sense of touch in store from the fitting of the item and other tangible aspects. It is also important for the user to find the best price that can get for the desired item. For the user, convenience means easy to navigate, speed, accessibility, and don’t have to be too involved in the process.

Another concern for the user is the relationship with the business, especially in the areas of trust and shipping. This is an area I want to make sure I include later in the process.


I began my interview process starting with a classmate in order to test out my questions. As I interviewed four more individuals, my questions developed and changed accordingly. The questions gave me better insight into the user and helped define what I should include in my User Persona.

Domain & Competitive Research

I looked into what other shopping areas in Vancouver were doing for their website. I found that they were very busy and held a lot of information. I wanted to narrow down the scope of my project by designing the shopping experience only. I also gathered information about Main St shops into an excel spreadsheet in order to see what kinds of things you could buy and whether they were capable or not to have e-commerce. I also talked with one of the staff at Barefoot Contessa about why they were not selling online. They said they don’t have the resources (time, money, stock) to go online with their shopping experience.

In order to design an online shopping experience catered to my user I looked into the favorite websites of my users (which I knew from interviews & the survey). I compared different features from the check out process, filters, etc and decided on what was the best fit for the Main St shopping experience.


The planning process I took covers my user persona, proposed scenario, user flow, and site map.

User Persona

Jessica Main was created using the information I gathered in my survey and my interview.

User Flow

In the user flow below, I’ve included a subflow where Jessica can get a size recommended to her. Through my research I encountered a general consensus that people want to try on clothes in store to see how they fit. Through this size recommendation feature, the user can input their shapes and have a perfect match with no worries about fitting on receiving their item. For men’s clothing, some of the information they need to input would be different.

Site Map

The site map enraptures all the unique things one can find on Main St, from clothing to decor. Some boutiques do not have the capability of e-commerce so they would be represented under “Feature”.

In addition, the user is always looking for deals so “Sales” has its own tab.

Building, Designing, & Testing

In this phase I built a paper prototype based on my user flow and tested it on five individuals.

Paper Prototype

During testing I found three major areas of improvement: check out process, navigation, and incorporating social media. I made the check out process more straight forward and conventional, I added forward and backward arrows to ease navigation, and I added a social media share button after Jessica purchases her dress.

Finally I was ready to begin my high-fidelity prototype which I created in Illustrator.

The home page has a hamburger menu that would expand into the parent site of ShopMain which was out of my scope. There is a search bar, featured collections, featured boutiques, a call to action on Instagram and some additional information on the footer about shipping etc. The flow follows Jesscia on her journey to buying her bridesmaids dress and going through the check out process.


My prototype walks you through the following scenario:

Jessica is a bridesmaid for her best friend’s wedding and she needs a fun pink bridesmaids dress to wear. She is familiar with Main St shopping as she grew up in the area but she doesn’t want to spend all day walking up and down main st trying on dresses. Her only concern is that she isn’t sure what size she is as she often fluctuates in weight.