top of page
  • Writer's pictureYiming Wang

Record Stores on Main Street E-commerce Project UX Study

My second project in Red Academy UX program. I was asked to make an E-commerce website for record stores on Main Street, Vancouver. As more and more people shopping online, we need to find a solution for our local businesses to help them catch up the trend.


When I knew my project is about record stores, the first thing I thought is: “ are there still record stores?” I bought many CDs in my high school, and vinyls for me are from my parents’ generation. Nowadays people, especially young people, listen to music mainly online, using Spotify, Itunes, Google music etc. As I do not have any experience of shopping records in stores in Canada, I went online to get a brief idea of what I could expect for my research.

For research, I did interviews, survey, contextual inquiry and domain research. The pain point of most people that shopping in record stores is that they need to spend a lot of time searching for a specific target, some even need to search all stores one by one. Most of them hope the stores can have better organization. However, customers like tactile experience and exploration, they enjoy the time they spend in the stores.

Later, affinity diagram and bucket prioritization method were made to help organizing all the information gathered to have clearer idea what the customers need and what I could do within the time frame. Then, customer journey map was made. As the class continued, I learned and did persona, site map, user stories, use cases and scenarios.

At last, user flow, hand sketches, digital wire frame and interactive prototype are made.

Usability testing is along the whole design process as well.

By using the e-commerce website I designed for record stores on Main St., people can find their target record easily and can still have similar exploration experience as in store. Saving their time from searching all stores one by one to find the target.


After a through research online, the reasons of why people still purchasing records (mostly vinyls) are likely as follow:

  • Sound quality

  • Nostalgia

  • Collectible

  • Arts

  • Tactile Experience

Based these information, I made a concept map to help design questions I would like to ask during my interviews and survey.

Concept Map

I used the lean survey canvas to help designing my survey using google form.

Lean Survey Canvas

The final survey version can be accessed through this link:

It has been posted on Reddit and Facebook, I also sent it to my friends. 31 responses have been collected.

On a Saturday, we went to Main street to conduct interviews and contextual inquiries. There are only three record stores on Main street, so I went to all of them.

Apparently people shopping there do not like to be disturbed. Most of them were wearing ear pods and very focused on “flipping” the vinyls. The first person I went for rejected my request directly with a short NO. Fortunately, people working for the record stores are willing to help except the last record store. The owner refused to answer my questions and did not allow me to disturb her customers. I felt upset but I can understand. At least I did contextual inquiries in all three stores. By the end of day, I successfully interviewed two people and have their consent form of recording. Thank you Skydawn and the gentleman in Red cat!

From all the information I gathered through research, an affinity diagram has been made to have better insight of what the customers really need.

Combined with my observations from contextual inquiries, here are my key findings:

  • 80% of customers are male

  • Most customers are in their 40s and 50s

  • Also some young people who like to follow the trend

  • People enjoy exploring in the stores flipping records

  • Some people hope the record stores can have better organization

  • One person searched all three stores but could not find one specific record

  • People tend to support local business when choosing a record store

  • Most people buy many records a year, some also buy record as a gift

  • In Red Cat, people look through new arrival bucket once they enter the store

  • At least half the records are used ones

I also did domain research. Both Popmarket and Amazon Vinyl Store are great websites for online record shopping, there is no local content though.


Considering the information from my research, a persona came out.

User Persona

And here is the customer journey map.

Jay wanted to buy a record. He went to a local record store. At first he enjoyed browsing in the store and searching for the target. After he spent too much but still could not find the record, he got upset. Luckily he found the record at last and go home with it happily.

The pain point is that he does not want to spend too much time searching for a specific record, even if he enjoys browsing in the store. Thus my website needs to be able to solve this problem and preferably give him similar exploration experience. This leads to my user flow below.

At the time of drawing user flow, I have so many ideas in my head that I want to add to my website whereas we only have limited time to accomplish it. I used bucket feature prioritization method to distinguish between must-haves and nice-to-haves of the features, which helped me pace out the project and not paying too much attention to unnecessary features.

I did the site map after the user flow.

The other planning methods I used are:

User stories. For example: As a music lover, I want to find the record online and pick up in store, so that I can have the record immediately when purchasing.

Scenarios. For example: Joanna is looking for vinyls of Janis Joplin, she wants to purchase it online and have it shipped to her place as she is very busy these days.

Use case:

Designing and Testing

I hand sketched the website first.

Hand Sketches Overview

I tested my hand sketches several times with my classmates. I gave them tasks to complete and improved my design after the testing.

First, I took out background music player, the red squared part of my original home page below:

I designed the music player as most people shopping in record stores enjoy listening to music in store. But according my testers, they do not like to listen to music when shopping online. Their answers proved that this is an unnecessary feature.

The other big finding is that there was wording/ sequencing problem with my checkout process. I originally had two check-out page, one of which was changed to cart page later.

Again, testing is so important and helpful!

After my classmates completed the tasks fluently, I digitalized my hand sketches using Sketch. This is the first time I used Sketch, and I found it so good and handy to UX designers.

Overview of Digital Wireframes

You can find the Sketch file here:

I spent lots of time making digital wireframes. Next time I will made all the symbols first, I think this can save lots of time when designing the pages.

After uploaded the digital wireframes to InVision, the interactive prototype is ready for testing.

Click here to the interactive project `Record Store`

If Jay would like to buy a record from Michael Jackson, he can go “shop by artist”, choose “Michael Jackson”, and results will show. He can use filters to narrow down the results and once he finds his target, he can go to the product page by clicking on “see details”. He can add it to cart and shop other records, or check out directly. He can also add it to wish list for future consideration. If he decides to check out, he can either has it shipped to his place or pick it up in store. Jay choose to pick up in store as he wants to have the record immediately when purchasing. He follows the instruction to the store and go home with his new record happily. Mission Succeed!

Some other details about the website:

One of the nice-to-have thing is exploration. I did not do a real page for it but you can see the hovering menu in the prototype, which allows future enrichment.

The product page will show prices and record conditions from all three record stores. Customers can compare and choose the one they like most directly.

To make my website bond closer to local businesses on Main Street, I have the Record Stores on Main Street page. It introduced local record stores with their business information and a map. It can remind the customers that the website is from their local community, not a normal online only shop.

I final tested my interactive prototype with a friend who knew nothing about my project. He can use the website with no problem and complete the task successfully.


Jay is happy with the website! It saved his time searching for a specific target and he can still browsing the store after picking up his record in store.

Also, this website should be able to help local record stores on Main Street grow and to have online access for their old and new customers.

What I Learned

It is important to distinguish the must-have features from all the ideas I have when there is a set timeframe.

Sketch is very helpful, I will keep practice using it.

Test is important, test is helpful and test more!

bottom of page