Advanced UX/UI Design Bootcamp — Behind the Beat: Redesign of an E-Commerce Music Platform
Get an inside look at my process of redesigning Bandcamp, an e-commerce music platform for independent artists, and follow the beats that shape a better user experience.
Wondering about the title “Advanced UX/UI Bootcamp” and what that is supposed to mean? Well, unlike typical courses, every participant here brings prior experience as a UX/UI Designer or Product Designer, infusing this Bootcamp with diverse expertise.
Project Brief
Choose a well-known online shop and redesign it according to data collected from user research. You are to consider making changes to the existing:
- Information Architecture
- Checkout process
- Layout
- Visuals
One of my team members, who is a Berlin-based DJ and Music producer, suggested working on Bandcamp because he is currently using it to explore new music and encountered several issues in terms of user experience.
Research
Having someone on our team who was already familiar with the platform was extremely helpful in the discovery phase. On the other hand, we needed to remind ourselves that he could be biased for a good reason because he already had his own experience with the music platform.
So we started working together on the lean survey canvas to prepare survey questions, based on the information we already had. For example, taking a first look at the website, we realised that it's quite difficult to navigate through all the contents of artists, labels and lists.
We knew Bandcamp would be too niche to reach a broad audience in a short time given for this project, so we decided to send the survey to our friends who are more into music than the average and post it on a subreddit called r/bandcamp with 21,000+ subscribers.
Since we only had 24 hours to let the survey run, I decided to do additional desktop research on surveys for the music platform. While checking our survey on the mentioned subreddit, I found another survey concentrating on the exact same fields that we were working on. This was a useful add-on to our research and gave us a better understanding of the behaviours of Bandcamp users.
The following interviews with actual users gave us more in-depth insights on topics like commitment, the main usage of Bandcamp, the likes and dislikes, and even what the interviewees would like to see as improvements on the platform.
We interviewed mostly DJs, Producers and Musicians and learned a lot about their usage and dedication to the platform.
Affinity Map
To become a better overview of all our findings and to create a clear picture to see patterns of pain points and needs of the users, we decided to work with the affinity map.
After clustering all the results and insights into different categories like look and feel, motivation, the discovery of music, information architecture, checkout, payment & downloading, we concluded about each topic and started to phrase out HMW statements.
User persona
At this process stage, we have gathered enough insights from our quantitative and qualitative survey to create a provisional user persona.
Alex is a London-based DJ who travels a lot between gigs and is constantly searching for new music to build unique sound experiences for his audience.
The newsletter function of Bandcamp is his on-the-go way to find out about new label releases from his favourite artists (this was something we learned from the interviews).
Flow Chart
Alex receives a newsletter with a suggestion based on an artist he follows on Bandcamp. He makes several purchases at once on the desktop version because he needs his music on his laptop, therefore he uses the download function.
Mid-Fidelity
Due to time constraints in this project, I jumped directly into creating wireframes for the product page, wishlist page and checkout process. I knew from the research that the look and feel of the product page needed a redesign (46% say that the look and feel is not their favourite).
You can see the actual product page has an outdated look with no real call-to-action buttons, so I decided to create a new one based on e-commerce best practices, to enhance usability and therefore increase sales.
My goal here was to keep it as minimal and simple as possible, to not lose the visual character of Bandcamp.
In terms of the checkout process, I designed a new cart with a preview/relistening option of the music, which Alex is going to buy.
Buying music online is different to “real products” which you can see and know what you can expect after purchasing.
For music, it's only covers that can not remind you what the actual music sounds like.
After testing the mid-fi prototype and receiving feedback, I made some changes in different areas such as notifications (system feedback) after putting a track on the wishlist and selecting several tracks on the wishlist page before adding items to the cart.
Moodboard
This mood board was created to define the first steps of how I would treat the visual aspect of the redesign. The intention was to communicate the following brand attributes:
- Straight Forward
- Alternative
- Informed
- Supportive
- Editorial
I have sent this mood board out in a survey mixed with different attributes to check if I am going in the right direction with the defined brand attributes and overall visual mood.
The survey had 17 participants and the most selected attributes were:
- Straight Forward
- Underground
- Supportive
- Alternative
- Informed
The results of the mood board survey convinced me to move further in this visual direction because almost every attribute that I was looking for was validated in this survey.
Style Tile
The final step to getting closer to the Hi-Fi Prototype was creating a style tile to lean towards final visual design decisions.
As stated in the HMW Question, I tried to keep Bandcamp's minimalistic look and feel to move not too far from its DNA.
Redesigns should always be treated carefully because long-term users could experience a feeling of disconnection from the platform.
Hi-Fi Prototype
Take a look at this Hi-Fi Prototype with a redesigned product page, wishlist and checkout process. A clear and minimalistic visual approach combined with e-commerce best practices to enhance overall user experience.
Next Steps
- More user testing with designed solutions for the Product Page, Wishlist and Checkout process, due to the limited time of this project.
- Analysing and improving the whole customer journey with every touchpoint of the users.
- Check with development what changes can be done shortly without major expenses.
Final Thoughts
- Product Pages and Checkout are one of the most important areas for E-Commerce Business.
- There is a huge potential for Bandcamp because they already have strong brand loyalty within their user base.
- The platform should consider adapting to current best practices to ensure growth & financial security for the future.
I appreciate all the ones that come so far and read through this article. Any feedback on this case study is more than welcome. And you should definitely check out bandcamp.com if you are a music enthusiast like me.
