UX Design Web Application: Pile — Solving a Lost Sound

Mark Richard Pagal
Mockplus
Published in
8 min readJan 29, 2018

Introduction

With the rise in tech becoming stronger and more evident with every passing day, the percentage of in-store sales continues to decline while the e-commerce sale percentages are hitting record highs.

“ In 2013, 51.6 percent of the Canadian population purchased their goods and services online. This percentage is expected to grow to 65% by 2019.”

-Statista.com (2015)

In an age where our consumption habits have an online presence, local businesses who rely on in-store conversion rates to meet their goals must adopt new technologies to compete in the current markets. The premise of our second project was to create a web application that could help boost social and community engagement with local businesses in the Main Street area of Vancouver, British Columbia. In my case, There were 3 record stores along Main Street that I had to focus on.

As an avid music listener and local business supporter, I wanted to build a web application that could provide an effective solution to the industry gaps by introducing a digital platform that can potentially revolutionize the record selling industry. However, I knew that I did not want to build a digital platform that would have taken away from in-store conversions, but a digital accessory that could help boost in-store activity and boost social engagement amongst consumers and business owners. In order to start looking for the best possible design choices for my project, I had to start by identifying the problems in order to deliver a viable answer that can benefit both consumer and business owners while retaining the record store experience.

Research

We started off by conducting research. Our team was assigned the task to identify the industry gaps that we could use to center our design choices and features around. After conducting contextual inquiries, reviewing survey submissions, creating an effective affinity diagram and going over recordings of multiple interviews, I finally gained enough insight to confidently move into choosing the features that we could implement into our product.

We were able to uncover a lot of insights throughout our research process.

We found out that 13 percent of responders prefer to purchase music in-store, 27percent prefer to purchase online and 60% of our responders prefer to purchase records both in store and online. From these findings, we branched off into understanding both of the benefits of In-Store purchasing vs. Online purchasing to gather enough information from both perspectives.

Benefits of purchasing online

Top 10 recurring words generated from our qualitative data.

“Time” and “Convenience” were the top recurring words from all of the gathered statements on the topic of benefits to purchasing online. This led me to make the decision to base my platform around an application that was conscious and provided convenience to consumers.

Benefit of purchasing in-store

Statements based on findings from survey

Statements such as “consultation from both employees and other consumers” as well as those centered around customer to customer interactions showed me the importance of social connectivity in the music culture. This helped me decide that I wanted to provide a social network for avid music listeners, along with a reviewing system that could help users share new findings amongst each other.

Indexing & Pain Points

Graph & statements from findings entailing the difficulties of record store indexing

From the data collected, we had also discovered the difficulties of finding a record in-store which leads consumers to find alternative methods of purchasing their music. This became an insightful piece of data that opened the gateway into several pain points for consumers. Supporting data came from our contextual inquires when we had spent time in the field of study with consumers.

Journey Map displaying the findings of pain points through contextual inquires.

After performing multiple contextual inquires, I developed a journey map of a persona’s perspective (representative of multiple findings). This helped me identify several pain points and opportunities to implement certain functionalities and applications to my product while observing a customers journey from point A to point B. Concepts such as an updated inventory list and a reliable search engine could eliminate the gaps that make record store purchasing more of a seamless experience.

After the research process was completed, the identified problems that we were going to tackle were that consumers would spend absurd amounts of time hunting for specific items in-store, there was a lack of convenience when purchasing items in-store, and that the wasn’t an efficient way for users to share music between each other and boost social engagement amongst the community.

Design & Planning

Design Focus/Features for the Pile Project

Once I had laid out the problems I had to solve, I created a set of features that I needed to implement in order to gain a sense of direction to begin the designing process.

Features:

  • Reliable search engine to give users the best experience when looking for a product.
  • Updated Inventory List to eliminate wasted time for consumers
  • Current listed prices from all store to allow easy product comparison across competetors
  • “Shuffle & PILE” buttons to retain the record store feel
    - “Shuffle” Button mixes product display in store front to give a sense of discoverability
    - “PILE” button allows users to hold items while browsing and review multiple items at a time
  • QR application after check out to allow users to pick up orders in-store (This feature negates the need to ship items so that in-store activity is promoted)
  • Profile that allows users to suggest music and review music in the community for social engagement

From the collected data and feature sets I managed to cultivate from my findings, I created a user persona to design my product around.

User Persona

User Flow & Site Map

Once I had a persona, I moved into my creating an effective User Flow and Site map to help with deciding how many pages I needed to section in order to complete a specific task. This became an integral part of my design process. I wanted to make sure that I was able to create a conversion in under 5 steps in order to benefit businesses as well as help make the experience convenient for consumers.

Pages for the web application:

  • Shop page that displayed up-to-date inventory from the Main Street Record Stores.
  • Shows Page, where consumers can see upcoming shows and purchase tickets to see shows.
  • Community Page that shows all of the upcoming community events, top staff picks and community picks, as well as verified reviews from owners.
  • About Page that entails all of the business hours and locations of the stores on Main Street.
  • Profile Page that allows users to post their favourite albums, currently owned albums, as well as a platform to suggest albums to other users.

Low Fidelity Design and Wire Frame

Wire framing brought a sense of visual mapping that became cohesive to my journey map from my contextual inquiry. This allowed me to take on the perspective of my user persona, thinking about the most efficient and effective way to become adopted as a service for record enthusiast.

Design Mock Up

Shop Page & Sketch Pages

I decided to take a minimal approach for my User Interface design. I wanted to modernize the record selling experience, giving the application a clean look allowed for every single button and every single title to be simple and concise so that user’s would have a sense of reliability and clarity when it came to site navigation. After my mock up was completed, I moved into identifying the scope of the test for usability.

Testing

Scope

The scope of my usability test was to test the shopping and checkout experience. As the main feature of my product, I wanted to make sure that conversions were seamless.

Scenario

I challenged my test subjects by setting an objective and provided them with a scenario. From there, I asked them to report their choices and actions as they were going through the shop functionalities. The scenario I gave is as stated:

“ You had just heard on twitter that the collector’s edition of an album you enjoy was just released in-stores. Your objective is to purchase an available copy of the item and to also choose the cheapest available option.”

Key Findings & Influences

As testing had occurred, several hurdle were faced by users. Those of which allowed me to create the best possible changes in order to create the best possible option.

  • Several of my users found themselves confused with the “Add to cart function” stating in 3 test that they had wished for a better notification when something had been added to cart.
Ver 01.00 (Left) and changes added to Ver 01.01 (Right)

Summery

After successfully conducting the necessary research needed to identify the industry gaps and consumer pain points, I was able to create a viable solution to help local businesses compete in the digital age, as well as potentially boost social engagement and in-store conversations. Processes such as creating a User Persona from the collected data, a building an effective and efficient User Flow, a Journey Map, and Wire Frame helped influence the direction of my user experience. Once, I had a solidified my foundation by taking consumer data and translating it into practical and effective design choices, I was able to build a prototype and brought it into the the testing phase to refine my product. Now I would like to introduce my solution to helping the the record-selling industry, PILE.

https://invis.io/DVFH8SJAQ75

--

--