.png)
Melodify was inspired by my frustration with how my favorite music platforms began to rely too heavily on AI to curate my music, causing generic music suggestions. I wanted to reimagine music discovery and organization by making it a more visual and interactive experience. Drawing inspiration from platforms like Pinterest, I set out to create a space where users could curate playlists as personal reflections of their taste. Melodify isn’t just another music player—it’s a creative hub for self-expression and exploration, designed to make discovering music fun, personal, and engaging.
One of the biggest challenges I faced was balancing functionality with creativity. I wanted the platform to feel intuitive, but also visually engaging, which meant rethinking how users interact with traditional music tools. Implementing smooth genre scrolling and dynamic music banners required fine-tuning JavaScript for a smooth experience.
Despite the challenges, Melodify came together as a platform that merges my passion for music and design. I developed a music platform with a fresh perspective on finding new music. The usability testing helped refine these features, making sure the platform was not only engaging but also easy to navigate. Through this project, I was able to push my front-end development skills and deliver a product that’s both innovative and user-centered.
Type
Web Development, Front-End
Role
Research, Development, UX/UI
Timeline
Sep-Dec 2023
Understand how users currently discover and organize music.
Identify what makes the process engaging and intuitive.
Develop features that balance functionality with personalization.
%20(3).png)
.png)
01 Choice FatigueWith so many playlists, genres, and recommendations available, users often feel paralyzed when trying to decide where to start.
02 Lack of PersonalizationGeneric suggestions fail to reflect users' unique tastes, leaving them disengaged. Users want recommendations tailored to their listening habits and preferences. A “one-size-fits-all” approach makes platforms feel impersonal.
03 Navigation FrustrationCluttered layouts and unclear paths make it difficult for users to explore content effectively.Users struggle to locate specific genres or tracks, leading to wasted time.Features like saving or organizing music are often buried, discouraging long-term use.
%20(1).png)
01 Lack of Visual AppealMost platforms prioritize function over form, resulting in uninspiring and repetitive designs. Static visuals fail to create an engaging experience that feels personal or creative.
02 Limited CustomizationUsers have little control over how their playlists or collections look, reducing their sense of ownership.
03 Missed Engagement OpportunitiesStatic layouts don’t encourage users to interact or explore beyond the basics.Features that could promote creativity, like interactive visuals, are often missing.
%20(2).png)
01 Impersonal Playlist CreationThe process of building playlists often feels mechanical rather than enjoyable or expressive. Limited tools for adding context (e.g., mood, stories, or visuals) reduce emotional connection.
02 Fragmented ExplorationPlatforms recommend only the most popular artists and songs, even to playlists that may be different genres. The overuse of AI algorithms also makes song recommendation repetitive.
03 03 Lack of ExpressionFew tools allow users to showcase their playlists as reflections of their personalities or tastes.
.png)
Current platforms are losing audience attention through their overuse of AI and static designs. There is a space for a solution that’s both intuitive and fun, giving users the freedom to explore and curate music in a way that feels uniquely theirs.
Researching the challenges music listeners face revealed key barriers to discovering and organizing music. To better understand these pain points, I collected a sample of 15 people—my friends and their friends—who are passionate about music. Their insights into their needs, motivations, and frustrations helped me design a solution that makes music discovery simple, engaging, and uniquely personal.
Interview Goal 01
Who are the Users?
Understanding their listening habits, music preferences, and how they currently discover and organize their music.
Interview Goal 02
What Drives Them to Explore Music?
Uncovering the key motivations behind why users search for new tracks, create playlists, and share music with others.
Interview Goal 03
What Challenges Do They Face?
Exploring obstacles like overwhelming recommendations, lack of visual customization, and frustration with cluttered or uninspired platforms.
Interview Goal 04
How Do They Interact with Music Tools?
Learning about their experiences with current platforms, including what features they use, what feels intuitive, and what they wish worked better.
To better understand user frustrations and needs, I interviewed the 15 participants. These conversations revealed key insights into the challenges of music discovery and playlist creation. Here are the recurring themes:
"I often get stuck listening to the same songs because finding new music takes too much time and effort."
"I like making playlists but they start to feel repetitive. It would be cool if there was a way to make it more engaging."
"Most music apps focus on recommendations, but they don’t help me rediscover songs I already love."
"I use multiple apps to discover and organize music, and it feels disconnected—I wish everything was in one place."
Moving forward, I focused on brainstorming and refining my ideas to make music discovery easier, adding more ways for users to personalize their playlists, and designing an experience that’s both simple to use and fun to explore.
To step further into the user’s shoes, I developed a persona based on insights from the 15 participants I interviewed. That’s how Samantha came to life—a reflection of the music lovers I spoke to, whose habits, frustrations, and needs I quickly came to understand. Samantha is 25 and works as a freelance graphic designer. Music plays a huge role in her life, whether she’s working, commuting, or relaxing at home.
She loves discovering new tracks but often finds herself overwhelmed by the endless recommendations on music platforms. “I just want a space where I can organize my music without digging through so much clutter,” she shared, echoing a common sentiment from the group.
Samantha also wishes she could make her playlists feel more personal. For her, playlists are more than just lists of songs—they’re snapshots of her mood, memories, and creativity. But most platforms limit her ability to customize, leaving her collections feeling flat and uninspired. Like many others I interviewed, Samantha is looking for a tool that’s simple to use, helps her discover music without stress, and gives her creative freedom to make her playlists truly her own.
The layout was the foundation of Melodify's user experience. I wanted it to feel both inviting and functional, serving as the central hub for exploring music and managing playlists. To achieve this, I created a site map to map out how users would access key features like genre boards, playlist creation, and music discovery.
%20(1).png)
Melodify Site Map
To begin my design phase, I started by creating low-fidelity wireframes to map out key screens like the homepage, explore page, and playlist creation flow. This helped me quickly test ideas, identify potential pain points, and iterate early without overcommitting to a specific design.
.png)
Once my wireframes were ready, I started turning the designs into a functional app. I focused on building a clean, modular codebase that was easy to refine and scale as the project evolved. Using HTML for structure, CSS for styling, and JavaScript for interactivity, I broke down the interface into reusable components. This approach made it easier to test, tweak, and add features without overcomplicating things. For example, I used a flexible grid system to organize the homepage layout, making it visually clean and viewport friendly.
<div class="homepage">
<header>
<input type="search" class="search-bar" placeholder="Search for music...">
</header>
<section class="playlist-section">
<h2>Your Curated Playlist</h2>
<div class="playlist-board">
<img src="images/playlist-cover.png" alt="Playlist Cover">
<p>Music Board #1</p>
</div>
</section>
<section class="discover-music">
<h2>Discover Music</h2>
<div class="grid">
<div class="album-card"><img src="images/album1.png" alt="Album"></div>
<div class="album-card"><img src="images/album2.png" alt="Album"></div>
</div>
</section>
</div>
To structure the homepage, I used a grid layout to organize content like playlists and the discovery section.
.discover-music .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.album-card img {
width: 100%;
border-radius: 8px;
transition: transform 0.3s ease;
}
.album-card img:hover {
transform: scale(1.05);
}This CSS made the "Discover Music" section look polished and responsive.
const pinnedContainer = document.querySelector('.recently-pinned ul');
const boards = document.querySelectorAll('.board-card');
boards.forEach(board => {
board.addEventListener('click', () => {
const boardTitle = board.textContent || 'Untitled Board';
const newPinnedItem = document.createElement('li');
newPinnedItem.textContent = boardTitle;
pinnedContainer.appendChild(newPinnedItem);
});
});Using JavaScript, I let users pin their favorite boards dynamically to a "Recently Pinned" section
<footer class="music-player">
<div class="now-playing">
<p>Now Playing: Clair De Lune - Debussy</p>
<input type="range" class="progress-bar">
</div>
</footer>.music-player {
position: fixed;
bottom: 0;
width: 100%;
background-color: #1f1f1f;
color: #fff;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.music-player .progress-bar {
flex: 1;
margin: 0 1rem;
}The global footer player keeps the music controls visible no matter where users are in the app.
With the foundational code in place, I was ready to test Melodify with users. Building the app with a modular structure ensured that any feedback could be quickly addressed without overhauling the entire design. Whether it was tweaking the layout, improving navigation, or enhancing interactive features, the flexibility of the code allowed me to adapt efficiently. This next phase of testing would focus on how users interacted with the app, where I look for opportunities to refine the experience and ensure Melodify met their expectations.
Goals for Testing
01: Evaluate how effectively users can create, customize, and save music boards as a personal expression of their music taste.
02: Test the ease of discovering new music through the visual layout, exploring recommendations, and interacting with curated content.
03: Assess the clarity of navigation, with a focus on whether users can intuitively access features like saved boards, search, and recently pinned content.
.png)
These insights directly shaped the final product, resulting in a cleaner, more intuitive design that makes sharing and discovering music seamless and personal.
.png)
%20(1).png)
01 Design & Code Should Evolve Together
Creating Melodify taught me the importance of designing with flexibility. A clear structure in both design and code allowed me to test ideas, gather feedback, and make quick improvements without breaking the flow of the product.
02 Over-design Leads to Overload
Initially, I included too many features, assuming more options would make the app better. Testing revealed the opposite—users felt overwhelmed. I simplified the interface by focusing on core actions: creating music boards, pinning favorites, and discovering new music. This shift made the app cleaner and easier to navigate.
03 Personalization Is More Than Just Features
At first, I thought customization meant giving users endless options. Through testing, I learned it’s about relevance. Small changes, like allowing users to merge boards or pin favorite albums, made the app feel more personal without adding complexity.
Melodify started as a response to my frustration with generic, AI-driven music recommendations. Through this project, I learned that users share the same desire for a platform that feels personal, creative, and intuitive. The journey from ideation to testing showed me how to transform those frustrations into a solution that resonates—focusing on visual discovery, flexible customization, and a space for self-expression. It wasn’t about overwhelming users with features; it was about creating a tool that felt theirs, where every playlist is more than a collection of songs—it’s a reflection of taste, mood, and personality.