top of page

melodive

JUL 2025 - AUG 2025
Capstone Project

Full UI/UX Design for a Music Review & Discovery App

ezgif-49f7f739847b5a0f.gif

Overview 📝

Melodive is a music review & discovery app that helps users connect and share their opinions, and to explore similar artists. A community with album reviews, lists, and options for how to listen. It was a mobile app created for my most recent capstone project, where I wanted to highlight wire flows, persona UX, & mobile hi-fidelity design skills.

Methodologies: Personas, Concept Design, Wire flows, Usability Testing, Hi-Fidelity Design, Competitive Analysis, User  Interviews

UI / UX Designer

Product Designer

📋Role(s)

Figma, Adobe Photoshop,
Adobe Illustrator, Notion

🔧Tools

Just Me ! (1)

👥Team Size

DISCOVERY

COMPETITIVE ANALYSIS | USER INTERVIEWS

Competitive Analysis 🔍

Screenshot_20251009_161601_Spotify.jpg
Screenshot_20251010_053212_YouTube_Music.jpg
Screenshot_20251009_161135_Letterboxd.jpg
Screenshot_20251009_160543_Chrome.jpg
Screenshot 2025-10-10 060458.jpg

I explored 5 applications; Spotify & Youtube Music as sources for how music libraries are displayed and how to access songs & albums, and LetterboxdBackloggd, & Rate Your Music for how profiles are made, reviews/lists are made, and the general experiences.

Context: 

  • Spotify is a music streaming application founded in 2006, and over the course of 2009-2018 expanded to become the largest platform for music almost fully worldwide. 

  • Youtube Music is also a music streaming  application launched in 2016 as a subsidiary of Youtube focused on connecting listeners from videos directly to music, and one of Spotify's biggest competitors.

  • Letterboxd is a social cataloguing network for movies & films, launched in 2016 with the core focus of writing and looking at film reviews, and recommending movies to friends.

  • Backloggd is a social cataloguing network for videogames, officially launched in 2019 for the dedicated fanbase of gamers, with a focus of reviewing, rating, and recommending videogames.

  • RateYourMusic is a social cataloguing network for music launched in 2009, with a focus on album reviews, and music forums, and promotion.

Insights 💭

  • RateYourMusic is a database first and more of a forum based community, versus to something like Letterboxd or Backloggd.​

  • There is a search trend for how to find music similar to X, and wanting to stay within genres & sub genre's.

  • There is a high desire for curated experiences first, before exploring out of a music genre.

User Interviews 🎙️

I hosted 5 remote interview sessions with users who had been screened for ideal behaviors; exploring music, reviewing music, and talking about music. I wanted to understand their current method of making & sharing reviews, how they want to discover music, and experiences with competitive products.

J. Valdez (21, Designer)

A. Malasan (23, Nutritionist)

D. Ngyuen (27, E. Engineer)

M. Delacruz (29, Artist)

J. Diones (23, Journalist)

"I hold a friend's review to a high regard."

"It isn't easy for me to find new music."

"I wish I can find reviews more similar to my taste"

"Finding a song that sounds like (x) is hard"

"I often enjoy making personal rankings"

Insights 💭

  • The current applications sharing and reviewing music feels outdated and non-curated. (5/5 agree).

  • Expressing opinions and interpretations of music is something highly valued (5/5 agree).

  • High desire for curated experiences first, before exploring out of a music genre. (5/5 agree).

  • Creating Lists & Rankings are really fun (5/5 agree).

  • Peers & Friends experiences are important to me (4/5 agree).

DEFINE

AFFINITY MAP, PERSONAS, POINT OF VIEW STATEMENTS

Affinity Map 🗺️

I used an affinity map to organize and synthesize insights gathered from user interviews and observations. By grouping related thoughts, quotes, and behaviors, I was able to identify recurring patterns in how users emotionally connect with music, as well as any arising questions.

Affinity Map - Melodive-dark.png

Themes 💭

  • Accords & Discovery

    • Interactions between person to product.​

  • Personal Investment

    • What do they get out of investing time into this?​

  • Style Experience

    • What is the general functionality, and how does it look?​

  • Sharing & Community

    • Interactions from peer to peer​

Personas 👥

xavierdavis.png

I created personas like Mikayla and Xavier to humanize user insights and represent distinct emotional relationships with music. These personas helped clarify design priorities by grounding decisions in real motivations and contexts—Mikayla embodying social connection and expression, and Xavier reflecting nostalgia and personal reflection. Together, they ensured the product experience balanced discovery, emotion, and storytelling in a way that felt authentic to different types of listeners.

mikaylawu.png

Point of View Statements 💬

  • A social sharer needs a space to see how others interpret the same song because connection through shared emotion validates their own experience.​​

  • A memory replayer needs a way to attach notes or moments to songs because music is how they track time, growth, and relationships.

  • A reviewer or journalist needs an integrated way to document thoughts while listening because their reactions are part of how they process and share music.

  • A discovery-driven user needs recommendations that feel personal and story-based because algorithmic suggestions often miss emotional depth.

  • A live music enthusiast needs a way to connect recordings and performances because concert experiences shape how they relate to songs.​​

DRAFTS

LOW-FIDELITY PROTOTYPE, WIREFLOWS

updatedstyleguide copy.png

Style Guide & Mood Board🎨

UI Style Guide, and Moodboard for color inspiration

MoodBoard.png
ezgif-80fe88cc9f63ebaa.gif
ezgif-8ea02a2364c75a73.gif
ezgif-80fe88cc9f63ebaa.gif

High Fidelity Prototype⚡

Prototype-HiFi_0009_Untitled3.jpg
Prototype-HiFi_0010_Untitled2.jpg
Prototype-HiFi_0002_Untitled10.jpg
Prototype-HiFi_0004_Untitled8.jpg
Prototype-HiFi_0006_Untitled6.jpg
Prototype-HiFi_0011_Layer 1.jpg
Prototype-HiFi_0007_Untitled5.jpg
Prototype-HiFi_0003_Untitled9.jpg

I designed high-fidelity prototypes by building on the initial wireframes, refining layout, visuals, and interactions to create a more polished, user-ready experience. This process allowed me to translate core structure into a realistic interface that reflected final branding, usability, and responsive design details.

REFLECTION

Working on Melodive taught me to refine both my design process and technical skills. I learned the importance of proper spacing, layout systems, and evolving from loose wireframes into high-fidelity designs supported by a self-made UI style guide. The project also helped me master auto layout, component-based prototyping, and mapping out user interactions within a faster-paced workflow.
 

After a peer review from my mentor, I received helpful feedback on improving color contrast and keeping spacing more consistent, which strengthened the overall clarity and accessibility of the design. While I liked the visual direction, this reminded me of the importance of balancing aesthetics with usability.
 

Through this process, I learned to iterate based on user feedback, design immersive user flows, and incorporate satisfying micro-feedback moments that make interactions feel natural. I also became more mindful of clear iconography, especially for less intuitive elements such as navigation bars. Overall, Melodive reshaped how I think about user experience and intentional design.

bottom of page