STAX OF WAX RECORD STORE
GENERAL ASSEMBLY | UX DESIGN PROJECT
Stax of Wax is a hypothetical local independent record store seeking to deliver an online alternative to loyal customers and expand customer base and sales through providing an online presence. This project from concept to completion was a solo 2 week sprint in delivering a responsive mobile experience that simplifies record shopping for all customers.
UNDERSTANDING THE USER
Stax of Wax serve professional millennials with a busy lifestyle and a passion for collecting records. As a bit of a wax head, I started with a strong connection to the project and a whole bunch of record collectors at close hand whose motivations and frustrations served as valuable guide in guiding my design decisions.
Finding many customers frustrated by an online experience that couldn’t measure up to the physical store, I shifted focus of the project to bridging the gap by breaking down the in-store experience into a few key processes: the feeling of flipping through records, admiring sleeve illustration and the possibility through browsing of discovering the unknown.
I prioritised customer needs in order to structuring the content hierarchy for interface. Testing paper prototypes on a representative audience allowed me to validate assumptions and quickly test and refine various concepts in response to user feedback. Taking users through three potential flows brought valuable feedback on the features below.
VIRTUAL RECORD COLLECTION
Many record collectors have a large collection and may not remember all their titles. This feature places customers virtual record collection and wantlist in one place for maximum accessibility.
Vinyl records are an investment and are often expensive. I found collectors aren’t always able to purchase all their wants at once. The ‘Wantlist’ means that you can save titles for future purchase.
SEARCH ALBUM BY SCANNING ARTWORK
Scanning by artwork simplifies customers search process. Adding records to ‘My Collection’ or ‘Wantlist’ could get very time consuming if the customer had to type each record into the search bar. This would be beneficial if the customer has access to a mobile device while shopping in-store and wants to add a record to their ‘Wantlist’, at home adding their collection to ‘My Records’ or simply want to know more information about an album.
Through interviewing an owner from a record store I learnt that the ‘New Release’ section was the most important part of a record store. Customers also loved personalised recommendations so I have included a ‘Handpicked’ section which is based on the customers collection, wantlist or past purchases.
With a focus for designing mobile-first, I developed a low-fidelity prototype using Axure and made sure that content was laid out in a modular fashion to simplify the process of scaling up the design later. I built in basic interactions around three user flows on the smallest screen size and constantly tested and iterated throughout this phase.
Scan album artwork and add to ‘My Records’
Browse records and add to ‘Wantlist’
Search for an album and purchase it
My goals in testing the prototype were to identify usability issues, test interactions, content hierarchy and device-specific functionalities. To simulate how well my prototype would fare in real-life, I presented the users with three tasks to complete using the live prototype on a mobile device. I was able to gain a lot of valuable feedback on usability and interaction issues through testing the prototype on a mobile device with users.
Users voiced their confusion when adding records to their wantlist or cart as the feedback notifications weren’t visible. I identified a problem with having the notifications display under the navigation bar as they move out of sight when a user scrolls down the screen. I addressed this issue by shifting the location of the notifications and pinning them to the bottom of the screen. I also had feedback on my low-fidelity prototypes to revisit my use of icons, and ensure contrast and size of content was suitable for use on a small screen. After improving the usability and interaction issues I received positive feedback that the site was easy to understand and navigate.
My main insight was that users were confused during the ‘Scanning Album Artwork’ process. I had initially tested this concept while paper prototyping but missed out on important interactions that became evident through user testing. Users told me that the scanning process was too quick and they expected more things to happen in between. I iterated on this by adding in a 3 second loading screen to show that the album artwork was being scanned.
SCALING THE DESIGN
I wanted to increase efficiency in the design process by ensuring that the mobile prototype was refined before scaling the design to suit larger screen dimensions. I had planned well for scaling content by designing in a modular fashion and using master templates in Axure which streamlined the process. The most significant difference between the screen sizes was the ‘Scanning Album Artwork’ functionality which is specific to mobile devices. The navigation structure also changed slightly for larger devices as there is more real estate to include menu items in the top header. I wanted to ensure consistency so I made sure that the content reflected that across all screen sizes. Towards the end of the prototyping process I started working on the visual styling of the website to reflect the Stax of Wax brand.
During my initial research phase I collated a lot of data which has the potential to be created into another persona for DJs where audio is very important to them. In the next iteration I would like to integrate an audio player into the website and also provide the ability to search for records by scanning audio much like Shazam. I also found that there was quite a large demand for record collectors to have a buy & sell marketplace and would also like to revisit this in the future.