Case study: E-commerce solution for Main Street record stores

During Week 2 and 3 at RED Academy we worked on e-commerce websites for small local shops on Main Street in Vancouver. Along with a few of my classmates, I focused on vinyl record stores. Our goal was to create a website that would allow users to purchase from Main Street shops online while feeling connected to this unique experience and to the local community.


Canadian local stores risk losing customers to foreign e-tailers with a better online presence.

Shopping local is a growing trend at the moment, which is good news for small Canadian businesses. The bad news is that many local businesses in Canada still have a poor online presence, which places them at a disadvantage when competing against other online retailers and American-owned companies. As online shopping is becoming more and more widespread, small stores need to provide a way for their customers to make purchases both at the brick-and-mortar stores and from the comfort of their own home.

Main Street shopping

Along Main Street in Vancouver there is a cluster of small stores selling anything from antiques to designer clothing, from handmade soap to home decor. Browsing the Main Street shops while stopping for a coffee or an ice cream on your way on a summer weekend is an activity that is very distinct from your regular shopping in the mall.


Our task was to create an e-commerce website that would allow users to purchase from Main Street shops online while feeling connected to this unique experience and to the local community. This was an individual project, but we had an option to share our data in the initial stage of research. Therefore, a few of my classmates and I took a trip down Main Street one sunny afternoon to look into the local record stores.

User research

Our initial goal was to gain some insight into how people shop for records on Main Street, and what (if anything) makes this experience special for them. To minimise the experimenter effect, we began our research with an unlead contextual inquiry (which simply meant observing people as they browse through the store and make their purchases or leave). We were lucky to obtain permission to spend about 40 minutes in Dandelion Emporium and almost two hours in Neptoon Records.

To better understand visitor’s motivations and goals, we proceeded with in-person interviews which covered:

  • Our respondent’s record shopping habits
  • The place vinyls occupy in their life: their records collections, associations with vinyl, their preferred way of listening to records, etc.
  • Online shopping habits: how often they shopped online, what products they bought, which shipment methods they preferred, and what they liked and disliked about online shopping vs. physical stores
  • How closely they associated themselves with the local communities of small shop owners, artists and record lovers

With this data, we created an affinity diagram to organise our findings into meaningful patterns:

Key findings

Browsing vs. Searching

People usually spent about 20–25 minutes browsing through the store. However, in some cases, they came straight up to a staff member with a question (usually looking for a specific album).

Physical interactions

Visitors who came mostly to browse spent most of their time touching and flipping through records, picking them up, taking a closer look at the artwork and the back side of the sleeve, and putting the records back in the bin.

Social interactions

“It’s awesome having that relationship with store-owners”— interview with a store visitor

Some visitors interacted a lot with the staff members, often addressing them by name. Often they came in pairs, and, on one occasion, as a family (father, mother and a young child). Others preferred browsing alone and in silence.

Element of surprise

“See what you can find” — interview with a store visitor

Never knowing what treasures you may discover in the record store was a recurring theme in the interviews. It was an important contribution to the in-store experience.

Shopping online: convenient, but impersonal

Most respondents shopped online for various products, with some exceptions of older interviewees who mentioned they never shopped online or only bought “gadgets for their children”. All those who purchased anything online agreed that it was convenient and saved time, but it was very impersonal compared to in-store shopping. They mentioned that they did (or would) buy records online, from stores like Amazon, but only if the album was not available anywhere else.

“[I] bought a record off of Amazon once and felt like I had died a little inside” (sarcastic) — interview with a store visitor

Supporting local community

Giving back to the community came up as a shared value in most of the interviews, with reasonable consideration of quality and price. Many respondents also indicated that they bought records directly from the artist’s website, motivated by the belief that it was more beneficial for the artist.

Digital music vs. Vinyl records

Record lovers were in general not opposed to listening to digital music. Rather that having a clear preference, they reserved different types of music for different activities: MP3s for moving about and being active, records for pure enjoyment. They associated more emotional value with records; to them, vinyl was a tangible manifestation of music, art and feeling.

As a part of my independent work on the project, I synthesised these findings in a persona:

Competitive/comparative analysis

Having an idea of what the users might want from the website, I explored some websites already in the business of selling records. Those included one of the Main Street stores, Neptoon Records (the only store out of three that had an e-commerce element in their website). In addition, I looked at six other online vinyl stores, and expanded my comparison to include Amazon and iTunes (also selling records or digital music) and Indigo (to extend the juxtaposition between physical and digital beyond music, to books/texts).

The analysis helped me determine the most common information architecture patterns (in addition to some observations from the physical stores). I used these, together with a quick card sort, to lay out a site map (keeping it mostly horizontal for easier navigation):

I also identified some helpful features that I wanted to incorporate in my design:

  • User support live chat (as seen on, which could become the metaphor for the ready-to-help, friendly staff members in store. This would be particularly relevant to visitors looking for a particular record, as well as customers experiencing issues with the website, delivery or the product they purchased.
  • Digital download of all tracks available with the purchase of a record. This feature appeared on three out of seven online record stores, and it correlated neatly with people’s need for different types of music (digital and vinyl records) in different settings.


To start planning out other website features I drafted some user stories. Below are the two epic stories, to set the general intention, and a few examples of more detailed ones:

Having a clearer idea of how the users might interact with the website, I put together a user flow illustrating the log in/sign up process, as well as searching/browsing and checkout. (Warning: large image ahead).

User testing

I did several rounds of testing with a paper prototype, giving the same task to all participants: to find “The Dark Side of the Moon” by Pink Floyd and purchase it from any store where it is available. During the very first tests I observed some issues and made corrections to the prototype before the next test:

  • Order of the steps in checkout process: frequent online shoppers pointed out that they preferred to fill in their billing address first, and their shipping address after.
After user testing: Billing address comes before shipping address and card details
  • “Buy” button on top of the page: on the Album page, the user is presented with a choice of the three Main Street record stores to buy from. However, this section comes below the fold, and my participants mentioned that they expected to see the call to action on top. So I added a “Buy” button to the top right corner, which redirected shoppers to the appropriate section on the page.
After user testing: “Buy” button added to the top of the page

Digital prototype

The clickable prototype is available on InVision (please note that only some links are functional).


This was definitely a more challenging and comprehensive project than P1 that we had completed just two weeks earlier, and it felt like a constant race against the clock. I had to cut out some solutions and ideas (like 8tracks preferences sync) in favour of completing the project on time. Nevertheless, it was exciting to work on. There was a strong emphasis on research, and I feel that we learned a lot compared to the first project.