Where Timeless Hits Resonate With You.

Objective

The Melodia app was designed to help users learn, practice, and enjoy music in a more interactive and personalized way, combining structured lessons with playful, gamified elements to make music education engaging and accessible for learners of all levels. As the UI/UX Designer, I led the end-to-end process—from user research and wireframing to visual design and prototyping in Figma—while shaping the learning journey, creating clear and intuitive interfaces, and integrating features like progress milestones and badges to motivate users. I also refined the app’s visual identity to strike the right balance between educational clarity and a fun, inspiring experience.

LOGO

The Melodia app logo features graceful golden musical notes arranged to resemble a pipe organ, symbolizing harmony, elegance, and the app’s premium music experience.

USER RESEARCH

Why

• To design a music app that feels premium yet personal, helping users curate their experience, discover global singers, and enjoy tailored music mixes, ensuring higher engagement and user satisfaction.

Who 

• Global audience interested in personalised music recommendations, artist discovery, and luxury music experiences

What

• Research aimed to understand how users discover music, select favourite artists, and engage with personalised playlists

When

• Included 2 weeks of surveys and 1 week of remote interviews, followed by usability testing of early wireframes

Where

• Online research via music forums, social media groups, and remote user testing sessions with participants from multiple regions

USER HYPOTHESIS

We believe that music lovers who enjoy discovering new artists and personalised playlists need a premium, visually rich app where they can select favourite singers, explore tailored music mixes, and enjoy an elegant listening experience.

By offering intelligent recommendations, curated global singer selections, and a luxurious black-and-gold interface, we expect to enhance user satisfaction and retention, making music discovery feel effortless and immersive.

USER FLOW

LO-FI WIREFRAMES

MID-FI WIREFRAMES

The Melodia app features a luxurious black-and-gold colour palette, where deep black backgrounds highlight golden accents (#CDA052), creating an elegant and immersive music experience.

COLORS

TYPOGRAPHY

The Melodia app embraces a classical yet modern typographic style using the Libre Baskerville font throughout its interface. This serif typeface delivers an elegant and timeless feel, perfectly aligning with the app’s premium black-and-gold aesthetic.

• Headings & Titles: Libre Baskerville is used in bold uppercase for a sophisticated, high-end look, ensuring strong visual hierarchy.

• Body Text: The regular weight maintains readability and balance, giving a sense of luxury and warmth to the listening experience.

• Buttons & Labels: Styled in golden hue (#CDA052) with subtle letter-spacing for a refined, approachable touch.

This typographic choice enhances Melodia’s identity as a luxurious, immersive music platform, where every note and word resonates with elegance.

REFLECTION

Designing the Melodia app was a rewarding challenge, as it combined my passion for user experience with the complexity of music education. One of the key successes was creating a gamified structure that made learning feel less intimidating and more motivating, especially for beginners. I was particularly pleased with how the progress milestones and badges added a sense of achievement without distracting from the educational purpose.

The most challenging part was finding the right balance between clarity and creativity—ensuring the app was intuitive enough for first-time learners, while still offering depth and flexibility for more advanced users.

If I were to iterate further, I would conduct more user testing with different age groups and skill levels to fine-tune the onboarding experience. I would also explore integrating adaptive learning features, so the app could better personalize lessons and practice sessions to each user’s pace and goals.

  • Melodia is a sleek, mood-driven music app that lets users discover, stream, and organize their favorite tracks through a beautifully intuitive interface tailored to emotion and sound.

  • The Melodia sign-in page exudes a luxurious black-and-gold aesthetic, designed to capture the elegance of music. At its center, the Melodia symbol logo gleams in radiant gold, surrounded by a cascade of floating musical notes that bring the interface to life. Behind the logo, a textured backdrop evokes the grandeur of a pipe organ, adding depth and sophistication to the scene. The sign-in button, matching the logo’s gold tone, stands out boldly against the sleek black background, creating a harmonious and visually striking composition that feels both modern and timeless.

  • The Singer Selection page invites users into a world of music discovery, showcasing a curated list of global singers in a visually rich, scrollable interface. After signing in, users are prompted to pick at least three favorite artists, highlighted with elegant gold accents against a sleek dark background. This personalized selection powers Melodia’s smart recommendation engine, instantly generating a custom music list tailored to each listener’s unique taste. With its stylish black-and-gold theme and intuitive multi-select interaction, the page makes personalization feel effortless and immersive.

  • The Create an Account page of Melodia combines elegance and usability, designed in a striking black-and-gold theme. Users can smoothly enter their name, birthday, email, and password into sleek input fields framed with golden outlines, while matching golden icons beside the name and birthday fields add a refined touch. A visually dynamic golden button bar shifts in tone when tapped, providing tactile feedback and guiding users effortlessly through the sign-up process. The luxurious color palette and minimalist layout echo Melodia’s identity, making onboarding feel premium and intuitive.

  • The Melodia Home Page is designed to immerse users in a personalized music experience while maintaining the app’s luxurious black-and-gold aesthetic. At the top, a Spotlight Singers carousel showcases featured global artists on elegantly styled scrollable cards, drawing immediate attention. Below, curated sections like Pop Singers and Personal Mix present tailored recommendations in a sleek horizontal scroll layout, blending selected artists from the user’s chosen favorites. The structured, card-based design ensures easy navigation, while the golden highlights and smooth scrolling interactions add a sense of premium fluidity, making music discovery both intuitive and visually engaging.

  • The Personal Mix page in Melodia delivers a fully tailored listening experience, automatically generating a custom music list based on each user’s favorite singers. A sleek mini player sits at the bottom of the screen with intuitive Play and Shuffle buttons for effortless control. Users can tap the View More icon to access additional playback options and manage tracks within their mix list. Designed in Melodia’s signature black-and-gold theme, this page combines elegance with functionality, making personalized music playback simple and engaging.

  • The Collection page in Melodia elegantly organizes all of a user’s favorite singers into a visually rich, scrollable gallery. Each artist is displayed on a stylish card with golden accents, set against the app’s signature black background for a premium feel. Users can easily browse, search, and tap on any singer to explore more music, albums, and related recommendations. Designed for clarity and personalization, the Collection page serves as a central hub where users can quickly access and manage their curated lineup of beloved artists.

  • The Music Play page offers a sleek and immersive listening interface, designed with Melodia’s signature black-and-gold aesthetic. At the center, a large playback control panel features intuitive Play, Forward, and Backward buttons for effortless navigation between tracks. A stylish golden progress bar visually represents the song’s timeline, allowing users to scrub through the track with precision. Complemented by clean typography and smooth animations, this page delivers a premium, user-friendly music experience while keeping essential playback controls always within reach.

  • The Search page in Melodia provides a dynamic and colorful way to explore music. At the top, a sleek search bar allows users to quickly input keywords to find songs, singers, or albums. Below, a vibrant music categories list is displayed on multi-colored cards, making it easy to browse different genres and themes. Interactive shorts enable users to instantly preview short music videos, while curated collections like ‘Chill Summer 2025 Songs’ help listeners discover trending tracks. With its lively design and intuitive layout, the Search page transforms music exploration into a fast, engaging, and visually rich experience.