[Case 02]
mint Music App
Music Tech
Design Systems, Variables, and Prototyping
[Project Overview]
mint is a personalized EDM app that syncs with your music accounts to recommend tracks, DJ sets, and events. Incorporates advanced design system, variables, and advanced protyping skills.
[Problem Statement]
EDM (electronic dance music) fans often struggle to manage multiple platforms to discover music, track live sets, follow festival lineups, and stay updated on news. This results in a fragmented, frustrating experience with no central hub tailored to electronic music culture.
How might we create an all-in-one mobile app that streamlines music discovery, festival planning, and social connection for EDM fans?
[Industry]
Music Tech
[My Role]
Lead Designer
[Platforms]
iPhone
[Timeline]
March 2025- April 2025
[Persona]
John Roberts
Marketing Associate (entry-level)
"I want music discovery to feel exciting again—like stumbling into a set at 2 AM that changes how I see a whole genre."
Age: 23
Location: Chicago, IL
Tech Proficiency: Moderate
Gender: Male
[Goal]
Discover new DJs and underground sets before they blow up.
Create and share playlists that match her mood or upcoming festival.
Connect music discovery with real-world experiences (events, merch, communities).
[Frustrations]
Overwhelmed by the sheer volume of new music on streaming platforms.
Struggles to keep track of different festival apps, ticketing platforms, and set-time PDFs.
Feels like Spotify’s algorithm repeats the same mainstream tracks, missing niche discoveries.
[Process]
[01] User Research
Comepetive Analysis
Reviewed features from Spotify, Resident Advisor, Dice, SoundCloud, and more
Key Insights: Users juggle 4–6 apps to manage their music and festival needs Top frustrations: missing DJ set drops, overlapping artist schedules, and lack of personalized curation There’s a desire for social features to connect with friends or fellow fans at festivals
[01] User Research
Comepetive Analysis
Reviewed features from Spotify, Resident Advisor, Dice, SoundCloud, and more
Key Insights: Users juggle 4–6 apps to manage their music and festival needs Top frustrations: missing DJ set drops, overlapping artist schedules, and lack of personalized curation There’s a desire for social features to connect with friends or fellow fans at festivals
[01] User Research
Comepetive Analysis
Reviewed features from Spotify, Resident Advisor, Dice, SoundCloud, and more
Key Insights: Users juggle 4–6 apps to manage their music and festival needs Top frustrations: missing DJ set drops, overlapping artist schedules, and lack of personalized curation There’s a desire for social features to connect with friends or fellow fans at festivals
Platform | Music Discovery | Festival Planning | DJ Sets | Social Features | Key Gaps |
|---|---|---|---|---|---|
Spotify | ✅ Yes – strong recs, playlists | ❌ None | ❌ None | 🟡 Basic sharing | No live sets, no event planning, not EDM-specific |
Resident Advisor | 🟡 Some – editorial content | ✅ Yes – event listings | ✅ Some – mixes | ❌ None | No personalized music, no live social chat |
SoundCloud | ✅ Yes – user-uploaded music & sets | ❌ None | ✅ Yes – live & studio sets | 🟡 Comments on tracks | No event tracking, not curated for festivals |
Beatport | ✅ Yes – top charts, genres | ❌ None | 🟡 Limited previews | ❌ None | No social, no event support |
Dice | ❌ No | ✅ Yes – ticketing & event discovery | ❌ None | 🟡 Event sharing only | No music features, no EDM-specific sets |
Bandsintown | 🟡 Some – syncs with artists | ✅ Yes – alerts & tracking | ❌ None | ❌ None | No discovery beyond live events |
YouTube | ✅ Yes – mixes, live sets | ❌ None | ✅ Yes – massive set archive | 🟡 Comments only | No event/festival structure, hard to curate |
Platform | Music Discovery | Festival Planning | DJ Sets | Social Features | Key Gaps |
|---|---|---|---|---|---|
Spotify | ✅ Yes – strong recs, playlists | ❌ None | ❌ None | 🟡 Basic sharing | No live sets, no event planning, not EDM-specific |
Resident Advisor | 🟡 Some – editorial content | ✅ Yes – event listings | ✅ Some – mixes | ❌ None | No personalized music, no live social chat |
SoundCloud | ✅ Yes – user-uploaded music & sets | ❌ None | ✅ Yes – live & studio sets | 🟡 Comments on tracks | No event tracking, not curated for festivals |
Beatport | ✅ Yes – top charts, genres | ❌ None | 🟡 Limited previews | ❌ None | No social, no event support |
Dice | ❌ No | ✅ Yes – ticketing & event discovery | ❌ None | 🟡 Event sharing only | No music features, no EDM-specific sets |
Bandsintown | 🟡 Some – syncs with artists | ✅ Yes – alerts & tracking | ❌ None | ❌ None | No discovery beyond live events |
YouTube | ✅ Yes – mixes, live sets | ❌ None | ✅ Yes – massive set archive | 🟡 Comments only | No event/festival structure, hard to curate |
[02] Defining the Solution
Based on the research and my own personal experiences, I focused the app around four key features:
1. Music Discovery & AI-Powered Playlists 2. Festival & Concert Tracker with Itinerary Builder
3. Live DJ Set Integration (YouTube, SoundCloud) 4. Social Community & Event-Based Chatrooms
[02] Defining the Solution
Based on the research and my own personal experiences, I focused the app around four key features:
1. Music Discovery & AI-Powered Playlists 2. Festival & Concert Tracker with Itinerary Builder
3. Live DJ Set Integration (YouTube, SoundCloud) 4. Social Community & Event-Based Chatrooms
[02] Defining the Solution
Based on the research and my own personal experiences, I focused the app around four key features:
1. Music Discovery & AI-Powered Playlists 2. Festival & Concert Tracker with Itinerary Builder
3. Live DJ Set Integration (YouTube, SoundCloud) 4. Social Community & Event-Based Chatrooms
[Click image to make larger and click image again to zoom out]
[Click image to make larger and click image again to zoom out]
[03] Typography and Color Theory
First started establishing my typography and color pallete
For typography, I chose modern, legible typefaces that balance EDM’s sleek, tech-forward vibe with a clean user experience:
For the color palette I wanted to draw inspiration from EDM’s high-energy visuals, combining dark themes with vibrant neon accents:
[03] Typography and Color Theory
First started establishing my typography and color pallete
For typography, I chose modern, legible typefaces that balance EDM’s sleek, tech-forward vibe with a clean user experience:
For the color palette I wanted to draw inspiration from EDM’s high-energy visuals, combining dark themes with vibrant neon accents:
[03] Typography and Color Theory
First started establishing my typography and color pallete
For typography, I chose modern, legible typefaces that balance EDM’s sleek, tech-forward vibe with a clean user experience:
For the color palette I wanted to draw inspiration from EDM’s high-energy visuals, combining dark themes with vibrant neon accents:
[04] Variables
To streamline theme switching and maintain visual consistency, I used design variables for colors, typography, spacing, and states.
These variables made it easy to manage both light and dark modes, ensure accessibility, and scale the design system efficiently across screens and components.
Using variables made all of my screens responsive
[04] Variables
To streamline theme switching and maintain visual consistency, I used design variables for colors, typography, spacing, and states.
These variables made it easy to manage both light and dark modes, ensure accessibility, and scale the design system efficiently across screens and components.
Using variables made all of my screens responsive
[04] Variables
To streamline theme switching and maintain visual consistency, I used design variables for colors, typography, spacing, and states.
These variables made it easy to manage both light and dark modes, ensure accessibility, and scale the design system efficiently across screens and components.
Using variables made all of my screens responsive
[05] Wireframes
Designing mint required a human-centered and iterative approach to address the unique needs of electronic dance music fans.
I created low-fidelity wireframes to map key user flows like music discovery, event tracking, and itinerary planning.
These helped me focus on layout, hierarchy, and navigation before moving into visual design. Early feedback ensured the structure aligned with user needs.
[05] Wireframes
Designing mint required a human-centered and iterative approach to address the unique needs of electronic dance music fans.
I created low-fidelity wireframes to map key user flows like music discovery, event tracking, and itinerary planning.
These helped me focus on layout, hierarchy, and navigation before moving into visual design. Early feedback ensured the structure aligned with user needs.
[05] Wireframes
Designing mint required a human-centered and iterative approach to address the unique needs of electronic dance music fans.
I created low-fidelity wireframes to map key user flows like music discovery, event tracking, and itinerary planning.
These helped me focus on layout, hierarchy, and navigation before moving into visual design. Early feedback ensured the structure aligned with user needs.
[Slide the black middle bar to see before and after results]
[06] Components
To ensure consistency and streamline design, I built a reusable component library in Figma.
This included buttons, navigation bars, cards, and event tiles, all styled to match mint’s visual language
These components supported faster iteration and a scalable UI system and allowed for advanced prototyping.
[06] Components
To ensure consistency and streamline design, I built a reusable component library in Figma.
This included buttons, navigation bars, cards, and event tiles, all styled to match mint’s visual language
These components supported faster iteration and a scalable UI system and allowed for advanced prototyping.
[06] Components
To ensure consistency and streamline design, I built a reusable component library in Figma.
This included buttons, navigation bars, cards, and event tiles, all styled to match mint’s visual language
These components supported faster iteration and a scalable UI system and allowed for advanced prototyping.
[06] Light/Dark Mode High Fidelity Mockups
With the structure in place and components finalized, I brought mint to life through high-fidelity mockups
With the click of a button you can switch mockups from light to dark thanks to variables
My mockups are different sizes to incoraprate scroll
[06] Light/Dark Mode High Fidelity Mockups
With the structure in place and components finalized, I brought mint to life through high-fidelity mockups
With the click of a button you can switch mockups from light to dark thanks to variables
My mockups are different sizes to incoraprate scroll
[06] Light/Dark Mode High Fidelity Mockups
With the structure in place and components finalized, I brought mint to life through high-fidelity mockups
With the click of a button you can switch mockups from light to dark thanks to variables
My mockups are different sizes to incoraprate scroll
[07] Advanced Protoype
Click through embedded prototype
Includes smart animations and conditional prototyping with variables.
Dark Mode
[07] Advanced Protoype
Click through embedded prototype
Includes smart animations and conditional prototyping with variables.
Dark Mode
[07] Advanced Protoype
Click through embedded prototype
Includes smart animations and conditional prototyping with variables.
Dark Mode
[Outcome]
10/10 Users gave the app a 99% user satisfaction score
100% Users said they would share with their friends
Users expressed expanding it to other genres of music
[Key Learnings]
Mastering Scalable Design Systems
I strengthened my skills in systems thinking by setting up design variables and component libraries, which helped me efficiently support both dark and light modes while keeping the UI consistent.
Mastering Scalable Design Systems
I strengthened my skills in systems thinking by setting up design variables and component libraries, which helped me efficiently support both dark and light modes while keeping the UI consistent.
Mastering Scalable Design Systems
I strengthened my skills in systems thinking by setting up design variables and component libraries, which helped me efficiently support both dark and light modes while keeping the UI consistent.
Advancing Prototyping Techniques
I pushed myself to experiment with advanced prototyping in Figma, simulating dynamic interactions like theme switching, music playback, and multi-step flows.
Advancing Prototyping Techniques
I pushed myself to experiment with advanced prototyping in Figma, simulating dynamic interactions like theme switching, music playback, and multi-step flows.
Advancing Prototyping Techniques
I pushed myself to experiment with advanced prototyping in Figma, simulating dynamic interactions like theme switching, music playback, and multi-step flows.
Expanding Creative and Technical Growth
This project encouraged me to think beyond individual screens, sharpen my technical design abilities, and explore future opportunities such as social features and real-time data integration.
Expanding Creative and Technical Growth
This project encouraged me to think beyond individual screens, sharpen my technical design abilities, and explore future opportunities such as social features and real-time data integration.
Expanding Creative and Technical Growth
This project encouraged me to think beyond individual screens, sharpen my technical design abilities, and explore future opportunities such as social features and real-time data integration.