Back

Back

[Case 04]

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

March 2025- April 2025

View Live Project

View Live Project

View Live Project

[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]

[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]

[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

[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:

Got rid of confusing transaction home screen and made a dedicated home screen

Got rid of confusing transaction home screen and made a dedicated home screen

Got rid of confusing transaction home screen and made a dedicated home screen

Design Process

[Design Process]

[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]

[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]

[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.

Select this text to see the highlight effect