AUG 2024
MIXTAPE
YOUR MUSIC, YOUR WAY!
PROJECT TYPE
COURSE PROJECT
SCOPE
2 Weeks
Services
UX and UI design
TOOLS
Figma, Procreate, Photoshop
YOUR MUSIC YOUR WAY!
OVERVIEW
Mixtape is a music-sharing app designed to give users control over playlist creation and personalization. It allows users to share their playlists with friends and collaborate on them, fostering a sense of community around music.
What Is the Need for It?
Music apps today often focus on promoting content rather than understanding user preferences. Mixtape fills this gap by offering personalized and collaborative playlist experiences.
How Might We Questions
How might we design a music app that allows users to create, share and discover playlists seamlessly with friends?
How might we personalize the content on the home page based on user preferences and listening habits?
How might we foster a sense of community within the app through playlist collaboration and sharing features?
How might we offer users more control over playlist customization to reflect their personal style and taste?
Project timeline
The project was completed within a tight two-week timeline, encompassing discovery, definition, ideation, and design.
Design process
Emphatize
User Research
User Interview
Competitive analysis
Define
User Persona
Empathy Map
User Needs
Ideate
User Flows
IA
wireframing
Design
Moodboard
Visual Design
Prototype
A back-and-forth journey between ideation and design to address emerging challenges in building a user-centric music app.
Research & Key Takeaways
Methodology:
Conducted user surveys and competitive analysis to explore user needs and frustrations. The survey asked participants how they use current music apps, what features they value, and where these apps fall short in terms of user experience
Key Insights from Research
Hard to discover
Lack of a sense of community
No personalization available
Hard to navigate
Community engagement is not available
Pushing generic content
competitor analysis
Our competitive analysis revealed that major music apps like Spotify and Apple Music offer little to no home screen customization, making user experience feel impersonal. Collaborative features are scarce, and discovering user-created playlists is challenging.
Existing apps are great at curating music but tend to overwhelm users with recommendations. - There is a significant gap in offering personalized home screens that can be customized by users. - Collaborative features (like playlist co-creation) are not fully utilized, leaving an opportunity for Mixtape to focus on community-driven music sharing.
Chart visualising the features different music apps on the market provide.
Main insights drawn from the competitor analysis
DEFINE
EMPATHY MAPS
Empathy maps helped identify user pain points and motivations, guiding our design decisions.
MEET THE USERS
Three distinct user personas guided our design: a casual listener seeking ease of access, a passionate fangirl eager for community connection, and an event manager needing flexible playlist customization.
IDENTIFYING THE MAIN REQUIREMENTS
After developing empathy maps, personas, and journey maps, we were able to solidify the key features that would directly address user needs
The home page should display playlists, user activity, and song recommendations tailored to individual preferences. Users can modify and personalize the content they see.
Personalized Home Screen
A discovery feature that lets users find playlists based on mood, activity, or genre. The app provides suggestions that feel more aligned with their tastes.
Enhanced Playlist Discovery
Users should have the ability to collaborate on playlists with friends. Community features, like sharing playlists and making collaborative edits, help foster a social music experience.
Community and Social Features
Prioritize a clean and minimalistic design, ensuring that the navigation is straightforward and doesn’t overwhelm the user with too much information or content.
Simplicity and Intuitiveness
INFORMATION ARCHITECTURE AND USER FLOW
The app’s content is divided into key areas like the home screen, playlists, collaboration features, and the user profile. The structure ensures ease of navigation and seamless discovery of content.
BRAINSTORMING IDEAS
After defining the requirements and mapping the user flows, I moved on to brainstorming and sketching initial design ideas. This phase allowed me to rapidly explore different layouts and concepts before finalizing the direction for the app's UI.
Initial sketches
I translated the ideas from brainstorming into rough sketches to explore different layouts and user interactions. This stage helped in visualizing the overall structure of the product.
I also explored different ideas for the playlist creation screen, simplifying the process into a few steps while allowing users to easily share and collaborate with others.
These early sketches focused on the home screen's personalized experience, enabling users to quickly access their favorite playlists, discover new music, and see updates from their community.
WIREFRAMES
With the sketches refined, I moved on to create low-fidelity wireframes. These black-and-white wireframes illustrate the app’s basic layout and key features without focusing on visual elements like color or typography.
I simplified the app's layout by incorporating a bottom navigation bar for easy access to Home, Search, Playlists, and Community sections. The wireframes also focused on the personalization aspect of the home screen, enabling users to customize their experience.
VISUAL DESIGN
With the ideation phase complete, I moved into the Visual Design phase, where I focused on selecting colors, typography, and refining the UI to bring the wireframes to life.
Mixtape blends retro nostalgia with modern design. The warm color palette and bold Fredoka One for headings add a playful, inviting vibe, while Lato ensures clear readability for body text. Following Apple’s iPhone font guidelines, the design offers a seamless and user-friendly experience, balancing fun with functionality.
Main user flow
Creating a playlist is seamless, from adding custom covers to easily searching and organizing songs.
Main user flow: Onboarding
You’re greeted with a fun, vibrant screen that sets the mood right away. From there, you quickly fill in your basic details—simple and hassle-free.
Welcome screen
Basic details
After a quick "Thanks for the details!" message, you dive into picking your favorite genres and how you listen to music. Then, it's time to choose your top 3 favorite artists—super quick and fun!
Message from mixtape
Music preferences
Choose artists
Now, you get to choose what shows up on your home screen—personalized content or suggestions, it’s totally up to you. Once that's done, you wrap up by signing up!
Home customization
Sign up
Main user flow: Creating a playlist and sharing
After onboarding, you land on your personalized home screen. From the bottom nav bar, you head to the library and hit "Add a Playlist" to start building your music collection.
Home screen
Your library
First, you upload an image, name the playlist, add a description, and tags for easy discovery. Then, you can add songs from Mixtape's suggestions based on your tags or current songs, refresh the list, or search for tracks.
Add a playlist: details
Add a playlist: add songs
After onboarding, you land on your personalized home screen. From the bottom nav bar, you head to the library and hit "Add a Playlist" to start building your music collection.
Playlist screen
Playlist: More options
Invite a collaborator
You view your playlist with its mixtape-style image. You can play, shuffle, reorder songs, or add more. The 3-dot menu offers options like sharing, inviting a collaborator, or starting a live session. When you click "Invite a Collaborator," an overlay lets you choose how to send the invite—WhatsApp, Instagram, Twitter, and more
Your community feed
Add a post
Your post
In the community feed, you find the option to start a discussion. You post, "Hey, I created a playlist about missing the love of your life.. Share your thoughts and suggest fitting tracks!" After posting, you can view replies with feedback and song suggestions.
Notifications
Check your notifications to see who responded to your post—likes, comments, and new song suggestions, all in one place.
Other Key features and screens
A quick look at other screens to show features and screens like home customization, artist page etc.
Screens: Home customization, search, artist page (respectively from left to right)
CONCLUSION AND LEARNINGS
The Mixtape project brought a fresh, personalized approach to music apps by solving a key gap in user experience—true customization. By diving into user research and competitor analysis, I created an app that feels nostalgic, fun, and genuinely tailored to each user’s music taste. With its retro-inspired design and easy-to-use features, Mixtape empowers users to create, share, and collaborate on playlists in a way that feels effortless and personal. This project highlights the impact of user-focused design, making the music experience feel more meaningful and engaging.