Ekaterina Kachavina
Product Designer / Brand Designer

Bandcamp
App

Bandcamp — A Platform for Discovering and Supporting Independent Artists

Role: UI Designer
Timeline: 2024
Tools: Moodboarding, Brand Analysis, Style Tile, Style Guide, Figma, High-Fidelity Prototypes, Interactive Prototyping, Micro-Interactions

OverviewI led the redesign of the Bandcamp app, a platform revolutionizing the way music enthusiasts discover and support independent artists. Founded in 2008, Bandcamp connects musicians directly with their audience, offering a diverse array of music beyond the mainstream. My goal was to enhance the user experience while preserving the platform's unique, artist-friendly ethos.

Problem Statement The existing Bandcamp app, while functional, faced several challenges in user experience and visual design. Users reported difficulties in navigation, inconsistency in the user interface, and a lack of engaging interactions. These issues detracted from the app’s usability and did not fully align with Bandcamp’s brand ethos, which emphasizes a direct connection between artists and their audience. The goal of this redesign was to address these challenges by refining the user flow, enhancing visual consistency, and introducing engaging micro-interactions that resonate with the platform’s unique identity.

Redesign Process
The Bandcamp app redesign involved a comprehensive and methodical approach, beginning with an in-depth brand analysis to ensure alignment with Bandcamp’s core identity. This was followed by extensive research and moodboarding, which informed the creation of a style tile and style guide that preserved the platform’s unique visual language. The process then moved into wireframing, where user flows were meticulously reviewed and key screens were redesigned for improved usability. Finally, the development of interactive prototypes, complete with micro-interactions, brought the redesign to life, adding nuanced functionality and enhancing the overall user experience.

Research and MoodboardingTo ensure the redesign aligned with Bandcamp’s identity, I began by analyzing its brand essence. This laid the foundation for cohesive visual and functional improvements that resonate with the platform’s core values.

I conducted research on current audio player apps and modern design trends, then created a moodboard that encapsulated the desired look and feel for the redesign. This moodboard incorporated elements like typography, color schemes, and imagery that reflect Bandcamp’s editorial vibe and focus on niche music labels, home studio producers, and edgy album art.

Moodboard

Style Tile DevelopmentUsing insights from the moodboard, I developed a style tile that featured a minimalistic redesign approach, retaining key aspects of the existing user flow. The style tile included the black and white Bandcamp logo, Helvetica Neue typeface, primary colors, and UI elements such as buttons and the player

Style Tile

Style Guide DevelopmentBuilding on the style tile, I expanded these elements into a comprehensive style guide. This guide covered logo usage, typography, color palette, and detailed specifications for UI components, ensuring consistency and cohesion across the redesigned app.

Style Guide

Wireframing and Interactive PrototypingI analyzed the current user flow and selected screens for redesign, focusing on improving usability. In Figma, I designed reusable components using auto layout and pre-set styles, refining them iteratively. The high-fidelity wireframes showcased a new layout for the player and featured screens, balancing innovation with established UI standards.

Current Design Bandcamp App

Components for reuse in Figma Bandcamp App

Micro-Interactions
The final prototype included two key micro-interactions:

Add to Wishlist: A tap animation that enhances user engagement.
Player Swipe: A sliding effect that transitions between "playing now" and "queue," improving navigation.

These interactions were designed to elevate the overall user experience, despite the challenges encountered in Figma during their implementation.

High-Fidelity PrototypeAfter finalizing the wireframes, I moved on to developing the high-fidelity prototype using Figma. This stage was crucial for transforming the conceptual designs into a polished, pixel-perfect representation of the final product. I carefully integrated all the redesigned UI elements, ensuring they aligned with the established visual guidelines and maintained consistency across the app. The prototype reflected the updated user flow, designed to be intuitive and user-friendly, and incorporated the refined color palette, typography, and UI components identified in the earlier stages. Each screen was crafted with meticulous attention to detail, ensuring that the aesthetic and functional aspects of the design were well-balanced.

Redesigned screens Bandcamp App

In addition to visual refinement, the high-fidelity prototype featured interactive elements that allowed stakeholders and users to engage with the app’s intended user journey. This included key micro-interactions, such as the "Add to Wishlist" tap animation, which provided immediate visual feedback to enhance user engagement. Another notable feature was the "Player Swipe" effect, which enabled seamless transitions between the "playing now" screen and the "queue," improving navigation and overall user experience. By incorporating these interactions, the prototype became a valuable tool for testing and gathering feedback, ensuring that the final design was not only visually appealing but also aligned with the needs and expectations of Bandcamp’s user base.

High Fidelity Prototype

Key Learnings:

Brand Cohesion: Preserving Bandcamp’s brand identity was crucial to ensuring that the redesign remained true to its core values.
User-Centric Design: Prioritizing user flow analysis allowed for targeted improvements that significantly enhanced the overall user experience.
Iterative Design Process: The steps of moodboarding, style tile creation, and wireframing facilitated thorough exploration and refinement of design elements.
Consistency Through Style Guide: Leveraging the style guide ensured a uniform visual language across all UI components, reinforcing Bandcamp’s distinct identity.
Challenges in Micro-Interactions: Developing micro-interactions highlighted the importance of continuous learning and iterative testing, particularly in prototyping tools like Figma.

ConclusionThis project provided valuable insights into the intricacies of UX/UI design, particularly the importance of balancing visual appeal with user-centered functionality. The Bandcamp app redesign exemplifies a harmonious blend of creativity, usability, and brand integrity, aimed at enhancing the music discovery journey for users worldwide.

Realm

Content Inventory, Heuristic Evaluation, Market & Competitor Research, High-fidelity Prototypes, Visual Design, User Testing
Previous Case Study

FeelQ App

Affinity Diagram, Empathy Map, Mood Board, High-fidelity Wireframes, Prototyping, Product Design, User Testing
Next Case Study