mint
Personalized EDM Music Discovery
mint is a personalized EDM app that syncs with your music accounts to recommend tracks, DJ sets, and events — built to showcase advanced design systems, variables, components, and prototyping in Figma.
EDM fans are juggling too many platforms just to stay connected to the music they love.
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?
Who are we designing for?
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."
Goals
- Discover Early Find new DJs and underground sets before they blow up.
- Curate & Share Create and share playlists that match his mood or upcoming festival.
- Real-World Connection Connect music discovery with events, merch, and 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.
Typography & Color
I first started by establishing my typography and color palette — a deliberate challenge, as I chose a far more diverse palette than my usual design flow.
Modern, legible typefaces that balance EDM's sleek, tech-forward vibe with a clean user experience.
Drawing from EDM's high-energy visuals — dark themes with vibrant neon accents.
mintnew.png)
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.
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.
Wireframes
Designing mint required a human-centered and iterative approach to address the unique needs of electronic dance music fans. These variables made it easy to manage both light and dark modes, ensure accessibility, and scale the design system efficiently across screens and components.
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.
High Fidelity Mockups
With the structure in place and components finalized, I brought mint to life through high-fidelity mockups. This included buttons, navigation bars, cards, and event tiles, all styled to match mint's visual language.
With the click of a button you can switch mockups from light to dark thanks to variables! My mockups are different sizes to incorporate scroll.
Advanced Prototyping
I used variables to allow conditional prototyping in my application for the onboarding experience.
Live Prototype
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.
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.
