This case study outlines the user experience process I used during my website development project as a student in RED Academy UX design programme. ‘Vinyl on Main’ brings the Main Street shopping experience online.


2 weeks


Create an e-commerce store for record shops on Main St. Increase sales, social media and online engagement while creating a customized experience for shoppers.


Web (Desktop)

Design methods & Tools:

Domain and organizational research, comparative analysis, user interviews, affinity diagram, user personas, user scenarios, storyboard, site map, user stories, user flow, paper wireframes, mid-fidelity prototype (InVision).


The opportunity:

Though shopping local is popular in Vancouver, independent retailers are steadily loosing out to large online e-commerce stores (Amazon, Ebay) due to their lack of online presence. Main St. Vancouver is lined with independent record stores who are loosing ther customer base for this reason.

Main St. Vancouver is lined with independent, locally owned shops whose customer base is under risk for this reason. Shop Main St aims to bring the ‘Main St’ shopping experience online, capturing the expected 50% increase in Canadian shoppers spending between 2014–2019. Throught this e-commerce platform they hope to recreate the in-store ‘shopping local’ experience online.

The Challenge

Many shoppers on Main St. shop locally because they love the experience and community feel associated with these stores. In order to target this customer base the e-commerce platform needs to capture this shopping experience while communicating that customers are still supporting local shops while buying online.

The Main St. e-commerce experience will have to compete with larger e-commerce retailers (like Amazon). In order to do this it needs incorporate all the advantages of online shopping including; increased efficiency and convenience for buyers, while integrating all Main St. shops seamlessly on a single website.

Project goals:

· Create an e-commerce store for record shops on Main St.

· Increase sales of the boutique shops

· Increase social media engagement

· Integrate all boutique stores with this new tool

· Increase online engagement

· Create a customized experience for shoppers Educate shoppers on basic info for each store

· Allow users to purchase items from all stores in your category within one e-commerce store


Organisational research

Where does Canada lie in the global vinyl industry?

I conducted some organizational research in order to help me get a better idea of where Canada and Vancouver were in this space.

Canada is ranked number five in top global vinyl sales, selling 1.3 million in 2015. Canadian as well as global vinyl sales increased by 32% in 2015, this revenue is higher than those from on demand, ad supported music streaming services including YouTube and Vevo. The increased popularity in Vinyl has meant that it is no longer just sold in independent retailers but chains have caught on to the ‘hispster’ trend including; Urban Outfitters, Barnes & Noble and Whole Foods.

This research indicates that the Canadian record market is strong and make’s a good case for trying to tap into this market through the creation of an e-commerce store.

Discovering possible users:

In order to best identify the primary user’s that would use this product I conducted a series of interviews, surveys and contextual enquiry.

User Interviews

Before interviewing anyone I asked a couple of screener questions to ensure they are interested in vinyl:

I was able to identify my target users before asking them for a 20 minute interview. The interviews focussed on asking open ended questions around three main categories; why they shop for vinyl, what do they like about the record buying experience and how do they find the online shopping experience.

Throughout the interviews I noticed some common motivations for shopping vinyl amongst the vinyl shoppers:

· To experience the personalized and customized vinyl shopping experience

· To be able to browse and discover new records

· To support local shops and integrate with the record community

Their main motivations for shopping online included;

- The efficiency

- Being able to do it from the comfort of your home

- Having items delivered easily


Using the answers from my interviews I formulated survey questions to help prove/disprove the assumptions I had formulated from my interview responses. I reached out to social media networks, Reddit groups as well as pushing them through record stores’ social media channels. The survey results revealed that:

- Shoppers were generally impartial to shopping online vs in store

- Shoppers that did prefer shopping in store said it was largely due to the tactile experience while being able to explore new records.

Contextual Inquiry:

Contextual inquiry locations

I conducted several unlead contextual inquiries within the Main St. record stores. They provided a greater insight into the way in which users browse through record collections. Most users did not come in with a specific record in mind, but instead meandered around the store, spoke to the store owners for recommendations or looked in the new releases section of the store.

The insights I was able to draw from the interviews, surveys and the contextual inquiry gave me a strong basis from which to base my primary user persona.

Identifying the primary user

Affinity diagram:

In order to help identify my target user and their motivations, challenges and characteristics I wrote down the insights from the interviews and surveys and grouped them based on similarity to determine the issues that were most in common:

Affinity diagram
Grouping information from my user interviews, surveys and contextual inquiry to determine my user’s main characteristics.

Defining my primary user persona:

User persona:

From all the interview and survey responses it was clear that there were two groups of users I could build this e-commerce store for. There were the users that preferred to shop in-store while supporting local shops on Main St., but were open to shopping online, or those that generally always bought vinyl online. I decided I would target the first user group and try to create an e-commerce store that would re-create the record buying experience they enjoy so much in-store while ensuring the advantages of online shopping were included.

Meet Jared:

Jared is a Communications manger who grew up in East Vancouver, he works to support his passion in music which lies is collecting records. He enjoys connecting with local record stores, browsing their latests vinyls and feeling a part of the community. He enjoys illustrating in his spare time and has a real appreciation for the art and work that goes into creating a record.

While creating Jared’s user persona it was evident that in order for his goals to be met there were a couple of main features the website would have to have:

1. It would have to have a ‘personalised’ feel to it.

2. The tactile experience and information about each record would have to be featured in such a way that it represents the in-store ‘browsing experience’.

Who’s in this space?

Competitive/comparative analysis

I conducted a competitive/comparative analysis looking at websites that were already meeting some of my user’s goals.

Within the analysis I not only wanted to compare current stores selling records online but also compare sites which are know for offering a true ‘personalised’ experience.

Some of the biggest players in ‘personalisation’ are Spotify and Netflix. Through understanding these sites better I became clearer on the ways in which and the benefits of personalisation. A website can either personalise content by asking the user for information through a sign up process, as Sage Project does, or through tracking the user’s behaviour and adjusting content based on this. Both Spotify and Netflix offer dynamic content elements throughout the site that are:

‘Recommended for you’
Because you liked….we think you would like…’

Using this method Netflix aims to capture the user’s interest within the first 12 seconds upon visiting their site. One thing I thought was important to consider was balancing this personalisation in a way that makes the user feel like the website ‘knows’ them and making the user feel uncomfortable if the website appears to intrusive. I wanted to ensure my design would meet this balance.

Interestingly both the main record e-commerce stores (Music vaultz and Discogs) both had few personalisation features. However they did have a stronger focus on community (forums and blogs).

Lastly I had a look at Etsy. I wanted to review Etsy as an online e-commerce store as it’s all about selling hand-made/alternate goods. It also sells products from multiple stores and amalgamates them into a ‘shopping local’ experience for their users. Their home page has a pinterest-like feed of items separated into categories that might attract the users attention including: “our latest collection”, “shops worth exploring”, “shop for gifts”, “fresh from the blog”. I like the layout of this store and I think it speaks to those who enjoy shopping local.

Main website features

Using my research I narrowed down the main functionality I wanted the e-commerce store to have. Throughout my process I wanted to ensure my design ideas were based on the ‘real’ user, so I went back through my interviews and checked this was the case.



Using my user persona I created a storyboard outlining my user’s main problem, his goals and possible pain points when buying records.

User Flow:

In order to ensure Jared’s goals could be met with these features in the simplest and most effective pathway I mapped out his user flow. In this user flow I wanted to ensure that he was able to accomplish all goals in his user story:

The user flow below can be broken into:

1. the sign-up process (in blue)

2. the process of discovering and buying a record to be delivered to his home.

Within the user flow I wanted to identify and ensure there were enough areas for the e-commerce platform to ‘learn’ and ‘understand’ the user in order to best offer a personalised experience. The main areas the website allows for this include:

This personalised experience would be present on several pages where records would be recommended to the user based on their activity. There would also be an entire page dedicated to ‘discovery’. Here all the records would be entirely customised based on the user’s login details but also based on their history of activity. This page would be dedicated to helping the user discover new music.

Ideas for creating a ‘browsing’ and tactile experience:

In order to recreate the store ‘browsing’ and ‘discovering’ experience online I decided to include the following features:

- I wanted the user to be able to scroll down endlessly while on the record listing page with a floating side navigation bar. I purposefully left out pagination on these pages so that they had a ‘pinterest’ type feel.

  • For each record the user would be able to find out more information about the artist, the album artwork, listen to the track and view recommended similar music. I wanted each record to have a dedicated page to this as in many of my interviews I identified that interviewees found this lacking online on most sites.

Site map

Once the user flow and e-commerce features were identified, I was able to create a site plan based on the pages required for the user flow to be successful.

Site map for Vinyl on Main E-commerce store


Paper wireframes:

I used an iterative design and testing process during my paper wire-framing in order to ensure the website functionality was understandable, easy to follow and the user’s goals could be accomplished.

User testing and iterations:

I tested my paper prototypes on several classmates, making iterations based on their feedback. The task I gave them to complete included:

1. Register and create an account providing your record buying preferences.

2. Discover a new record, find out about the artist and the record, purchase it and have it delivered to your home.There were several changes I made during this process (see above) including:

- Initially I made the user create an account before they could even access the home page, however, several testers said this may be annoying for the user, especially if they just want to buy a record and checkout as a guest.

- Initially after the user viewed more information about the album (artwork, artist etc) on the record page they could buy the record immediately. However they expressed an interest in being able to see price comparisons for different record stores on this page, rather than later on.

-In the first prototype user’s said they were surprised by how quick the checkout process was, and instead they would have preferred it if there was an extra confirmation screen.

  • In a few of the tests the users said that they found the homepage to be a little too busy. The navigation was also confusing. I decided to place the tabs at the top of the page into the primary top navigation instead and reduce the columns of records shown on each page.

Digital wireframes:

Based on my user tests for my paper prototype I developed digital wireframes in Sketch.

User testing:

- Initially on the record page the shopping cart icon was floating on the left of the page, however, this confused users as in most website it would be located on the right hand side of the page.

- Users were asked to login in and confirm their details before purchasing the record, however, this felt like an unnecessary step as they had already registered an account.

Mid-Fidelity Prototype:

Click here to view a mid-fidelity clickable prototype for the tasks I set my users.

Summary & Future considerations:

For this project, based on my user persona and interview research, I focussed on the personalisation and browsing aspect of the e-commerce store. I felt like the project went well in terms of applying these features to the store. The user testing definitely allowed me to streamline my user flow and make the browsing and purchasing aspect of the website more intuitive.

For the future it would be great to have more features to allow the user to engage with the local community including perhaps a forum or increased social media engagement. This will also raise awareness of the site and of the local vinyl stores.

The profile page for the user could have some more features including a way for the user to add records they currently own. It would also be great to allow the user to find and add friends so that they can share their music tastes and wish-lists.