Melodia
Music, Memory, and Duration
“Duration is the continuous progress of the past which gnaws into the future.”
— Henri Bergson
Music rarely exists only in the present moment. A single song can recall places, emotions, or periods of life that listeners carry with them over time. Philosopher Henri Bergson described memory as a continuous flow—an interaction between past experiences and the present moment.
Melodia was designed with this idea in mind.
Rather than functioning solely as a music player, Melodia explores how digital interfaces can support the emotional and temporal nature of music listening. The app focuses on intuitive discovery, immersive playback, and personal music collections that allow users to reconnect with songs that shape their memories.
Through curated discovery, seamless listening, and an elegant visual environment, Melodia creates a space where music is not just consumed but experienced—allowing listeners to move fluidly between discovering new sounds and revisiting meaningful ones.
The design combines a refined black-and-gold visual identity, clear navigation structures, and carefully balanced layouts to ensure that interaction remains effortless while the music itself remains central.
Melodia therefore positions music listening not simply as a functional activity, but as part of a continuous personal experience where songs, memories, and moments intersect.
Overview
Melodia is a mobile music app designed to help users discover, stream, and organize their favorite songs through a visually refined and emotionally engaging interface. The app focuses on creating a seamless listening experience where music exploration feels intuitive, personal, and immersive.
Music often carries personal memories—moments, places, and emotions that resurface when a familiar song begins to play. Melodia embraces this connection between music and memory, allowing users to revisit songs that resonate with their personal experiences and emotional history.
This idea is conceptually inspired by the philosophy of Henri Bergson, who described memory as a continuous presence that interacts with the present moment rather than a static record of the past. In a similar way, music listening often brings past experiences into the present, allowing memories to unfold through sound.
Rather than presenting music as a static library of tracks, Melodia encourages discovery through mood-based navigation, curated playlists, and personalized recommendations. By organizing music around emotional tone and listening context, the app helps users find songs that connect with their feelings and memories.
As the UI/UX designer, I led the end-to-end design process—from user research and information architecture to wireframing, visual design, and interactive prototyping in Figma. The goal was to create an interface that balances aesthetic clarity with emotional engagement, allowing users to move effortlessly between discovery, listening, and personal music collections.
The final design integrates a modern visual identity with smooth interaction patterns, creating a digital environment where music flows naturally through exploration, memory, and emotional experience.
Context & Design Objective
Music listening has become deeply integrated into everyday life, yet many digital music platforms primarily focus on large content libraries and algorithmic recommendations. While these systems provide access to vast catalogs of songs, they often treat music as a collection of isolated tracks rather than as a meaningful listening experience connected to personal moments and memories.
For many listeners, music is closely tied to emotion, memory, and atmosphere. A familiar song can instantly evoke past experiences, places, or relationships, transforming listening into something more than simple entertainment. However, many music apps emphasize efficiency and scale over emotional engagement, making it difficult for users to rediscover songs in ways that feel personal and meaningful.
Melodia was conceived as a response to this gap. The objective was to design a music listening experience that prioritizes discovery, emotional connection, and personal memory. Instead of presenting music solely through genres or large libraries, the app encourages exploration through moods, curated selections, and intuitive navigation.
By combining refined visual design with a smooth and immersive listening flow, Melodia aims to transform music streaming into a more reflective and emotionally engaging experience—one that allows users to rediscover songs not only as sound, but as part of their personal history and memories.
Design Objectives
The design of Melodia was guided by a set of strategic objectives aimed at creating a more intuitive, emotionally engaging, and personalized music listening experience. Rather than simply presenting a large catalog of songs, the goal was to design an interface that supports discovery, memory, and meaningful interaction with music.
1. Make Music Discovery More Intuitive
Many music platforms rely heavily on large libraries and algorithmic lists, which can feel overwhelming for users. Melodia focuses on simplifying discovery through clear navigation, curated playlists, and mood-based exploration. This approach allows users to find music more naturally and effortlessly.
2. Strengthen the Connection Between Music and Memory
Music often carries personal memories and emotional associations. The design encourages users to revisit songs that resonate with their experiences by supporting personal collections, favorites, and listening histories. In this way, Melodia treats music not just as content, but as part of a user’s personal story.
3. Encourage Emotional and Contextual Listening
Instead of organizing music solely by genre or artist, Melodia emphasizes exploration through mood, atmosphere, and listening context. This allows users to discover songs that match their feelings, environments, or moments in daily life.
4. Create a Seamless Listening Experience
The interface prioritizes clarity and smooth interaction, allowing users to move effortlessly between discovering music, playing songs, and organizing their personal collections. Clean layouts, intuitive navigation, and clear visual hierarchy ensure that the experience remains fluid and immersive.
5. Balance Aesthetic Design with Usability
Music is both an auditory and emotional experience, so the visual design aims to support that atmosphere. Melodia integrates a refined visual identity with balanced colors, typography, and layout, creating an interface that feels modern, expressive, and enjoyable to use without distracting from the listening experience.
Conceptual Inspiration
Music, Memory, and the Experience of Time
The conceptual foundation of Melodia draws inspiration from the philosophy of Henri Bergson, particularly his reflections on duration and memory. Bergson argued that lived time is not composed of isolated moments but unfolds as a continuous flow in which past and present interpenetrate.
Music offers a powerful example of this experience. A familiar melody can instantly evoke memories, emotions, and personal moments, allowing the past to resonate within the present. In this way, music becomes more than sound; it becomes a medium through which time, memory, and feeling intertwine.
Melodia translates this philosophical perspective into the design of a digital listening experience. Rather than presenting songs as isolated tracks, the interface emphasizes continuity, discovery, and personal connection. Through mood-based exploration, curated playlists, and personal collections, users can navigate music as a living archive of sound and memory.
User Hypothesis
Before developing the design solution, an initial hypothesis was formed to guide the direction of the product and frame assumptions about how people interact with music in digital environments.
We observed that while music streaming platforms offer access to vast libraries of songs, the experience of discovering and revisiting music often feels impersonal and overwhelming. Users may struggle to navigate large catalogs or rediscover songs that resonate with their emotions and memories.
At the same time, music listening is deeply connected to personal experiences. A familiar song can evoke specific moments, places, or feelings, transforming listening into something more meaningful than simply playing tracks from a playlist.
Based on these observations, the hypothesis was:
If music discovery is organized around mood, personal collections, and intuitive exploration rather than large static libraries, users will feel a stronger emotional connection to the music they listen to and will engage more deeply with the platform.
In other words, by designing a listening experience that emphasizes discovery, emotional resonance, and personal memory, Melodia can transform music streaming from passive consumption into a more personal and meaningful interaction with sound.
This hypothesis informed key design decisions, including mood-based exploration, curated playlists, and features that allow users to collect, revisit, and rediscover songs connected to their personal listening history.
Problem Analysis
Although music streaming platforms provide access to vast libraries of songs, many digital music experiences still struggle to support meaningful discovery and personal engagement. Through research and analysis of existing music platforms, several key challenges emerged that affect how users explore, connect with, and revisit music.
1. Overwhelming Music Libraries
Modern streaming services offer millions of tracks, but this abundance can make discovery feel overwhelming rather than inspiring. Users often rely on algorithmic recommendations or popular playlists, which may limit exploration and make it difficult to find music that truly resonates with their personal tastes.
2. Discovery Feels Impersonal
Many music platforms emphasize efficiency and scale, presenting music primarily through charts, genres, or automated recommendations. While these systems help surface popular songs, they often overlook the emotional and personal dimensions of listening, making the experience feel less meaningful.
3. Weak Connection Between Music and Memory
Music is strongly connected to memory and emotion, yet most streaming platforms treat songs as isolated pieces of content. Users may remember songs associated with particular moments in their lives, but existing interfaces rarely support rediscovering music through these personal connections.
4. Fragmented Listening Experience
Navigating between discovering music, playing songs, and organizing personal collections can sometimes feel fragmented. Users may need to move between multiple screens or menus, which interrupts the natural flow of listening.
5. Core Insight
The central challenge in digital music platforms is not simply providing access to music, but creating a listening experience that feels personal, intuitive, and emotionally engaging.
Music is not only sound—it is often tied to memories, moods, and personal experiences. Designing for music therefore requires more than organizing tracks; it requires supporting discovery and listening in ways that resonate with how people emotionally experience music.
Melodia addresses these challenges by designing a music experience centered on mood-based exploration, intuitive discovery, and personal music collections, allowing users to reconnect with songs not only as content, but as part of their personal listening journey.
Target Users & User Needs
Melodia is designed for a diverse group of music listeners who share a common goal: discovering and enjoying music in a way that feels personal, intuitive, and emotionally meaningful. While users may differ in their listening habits, preferences, and musical knowledge, many encounter similar challenges when navigating modern music platforms.
The design of the app focuses on understanding these user groups and supporting their needs during music discovery, listening, and personal collection.
1. Explorative Listeners
Profile:
Users who enjoy discovering new music and exploring different sounds, artists, or moods.
Challenges:
Overwhelming music libraries with too many choices
Difficulty finding music that matches a specific mood or atmosphere
Repetitive algorithmic recommendations
Needs:
Intuitive discovery tools
Curated playlists and mood-based exploration
A visually engaging interface that encourages exploration
For these users, the platform should feel like a space for discovery, where music exploration becomes enjoyable rather than overwhelming.
2. Memory-Driven Listeners
Profile:
Users who associate music with personal memories, emotions, or moments in their lives.
Challenges:
Difficulty rediscovering songs tied to past experiences
Limited tools for organizing music based on emotional connection
Listening histories that feel impersonal
Needs:
Personal collections and favorites
Easy ways to revisit previously loved songs
Features that support emotional and memory-based listening
For this group, music is more than entertainment—it is part of their personal narrative and memories.
3. Casual Everyday Listeners
Profile:
Users who listen to music throughout daily activities such as commuting, working, studying, or relaxing.
Challenges:
Navigating between discovery and playback quickly
Interruptions in the listening flow due to complex navigation
Difficulty finding music suited to different daily contexts
Needs:
Seamless listening flow
Quick access to favorite songs and playlists
Context-based recommendations (mood, activity, atmosphere)
For these users, music should integrate naturally into their daily routines without requiring unnecessary effort.
Shared Core Needs
Across all user groups, several consistent needs emerged:
Intuitive Discovery
Helping users find music naturally without overwhelming them with choices.
Personal Connection
Supporting the emotional and memory-based relationship people have with music.
Seamless Listening Flow
Ensuring smooth transitions between discovery, playback, and personal collections.
Meaningful Organisation
Allowing users to organize and revisit songs that resonate with their experiences.
Melodia’s design addresses these needs by combining mood-based exploration, personalized collections, and a clean listening interface, creating an environment where users can rediscover music not only as sound, but as part of their personal experiences and memories.
Design Strategy
To address the challenges identified in the problem analysis, the design of Melodia focuses on creating a music listening experience that feels intuitive, emotionally engaging, and personally meaningful. The strategy emphasizes seamless discovery, memory-driven interaction, and a fluid listening flow that allows users to move naturally between exploring music, listening to songs, and organizing personal collections.
Rather than presenting music as a static library of tracks, the design reimagines music streaming as a dynamic experience where songs connect with moods, memories, and everyday moments.
1. Intuitive Music Discovery
With millions of available tracks, discovery can often feel overwhelming. Melodia simplifies this process by organizing music through curated playlists, mood-based exploration, and clear visual categories.
This approach allows users to discover songs naturally, without needing to navigate complex menus or search through large libraries. The goal is to make exploration feel effortless and inspiring rather than overwhelming.
2. Music as Personal Memory
Music often carries emotional memories and personal associations. The design therefore encourages users to collect, revisit, and rediscover songs that resonate with their experiences.
Features such as favorites, listening history, and personal collections allow users to organize music in ways that reflect their emotional connections rather than simply storing songs in static playlists.
This strategy aligns with the idea that music listening is not only about sound, but also about memory and personal meaning.
3. Seamless Listening Flow
Listening to music should feel continuous and uninterrupted. Melodia prioritizes smooth transitions between discovering music, playing songs, and managing personal collections.
The interface is designed with clear navigation, minimal friction, and consistent interaction patterns so that users can focus on the listening experience rather than navigating complex interfaces.
4. Emotionally Engaging Visual Design
Because music listening is closely tied to mood and atmosphere, the visual design aims to support an expressive and immersive environment.
The interface combines refined typography, balanced colors, and smooth transitions to create a calm yet engaging visual identity. These design choices reinforce the emotional tone of music while maintaining clarity and usability.
Strategic Outcome
Together, these strategies create a music experience that feels fluid, personal, and emotionally resonant. By emphasizing discovery, memory, and intuitive listening, Melodia transforms music streaming from simple content access into a more meaningful and immersive interaction with sound.
Information Architecture & App Structure
The information architecture of Melodia was designed to support a smooth and intuitive music listening experience. Because modern music platforms often present large and complex libraries, the structure focuses on simplifying discovery while allowing users to easily navigate between exploring music, listening to songs, and managing personal collections.
Rather than organizing the interface around technical music categories or dense menus, the architecture prioritizes clarity, discovery, and personal connection with music.
The primary navigation is structured around four core sections:
Discover
Library
Player
Profile
Each section represents a different listening intention and supports a natural flow between discovering music and revisiting personal favorites.
1. Discover — Music Exploration
The Discover section serves as the main entry point for exploring new music. Instead of presenting overwhelming lists of tracks, this area focuses on curated and mood-based discovery.
Users can explore:
Curated playlists
Mood-based music categories
Featured artists and albums
Personalized recommendations
This approach helps users find music in a way that feels intuitive and inspiring rather than overwhelming.
2. Library — Personal Music Collection
The Library module allows users to organize and revisit songs that are meaningful to them.
This section includes:
Saved songs
Favorite artists and albums
Personal playlists
Listening history
By structuring the library around personal collections, Melodia supports the idea that music is closely connected to individual experiences and memories.
3. Player — Seamless Listening Experience
The Player module is the core listening interface where users interact with the music itself.
Key features include:
Playback controls
Album artwork display
Queue management
Song information and quick actions
The design prioritizes clarity and minimal interaction friction so that users can focus on the listening experience.
4. Profile — Personal Preferences
The Profile section allows users to manage their listening preferences and personalize their experience.
This module includes:
Account settings
Listening preferences
Notification settings
Recommendation adjustments
Providing user control ensures that the app adapts to individual listening habits.
Structural Design Principles
The architecture of Melodia is guided by three key principles:
Clarity
Each section has a clear purpose, reducing navigation complexity.
Discovery
Music exploration is designed to feel intuitive and inspiring rather than overwhelming.
Personal Connection
The structure supports collecting and revisiting music that resonates with personal memories and emotions.
Architectural Outcome
By organizing the app around the natural flow of discovering, listening to, and collecting music, Melodia creates a structure that feels both intuitive and personal.
This architecture allows users to move effortlessly between exploring new music and revisiting meaningful songs, supporting a listening experience where music becomes part of everyday moments and memories.
User Flow
The user flows in Melodia were designed to support a smooth and immersive music listening experience. Because modern music platforms often present vast libraries of content, the interaction flows prioritize clarity, intuitive discovery, and uninterrupted listening.
Rather than forcing users through complex navigation paths, the system allows listeners to move naturally between discovering new music, playing songs, and organizing their personal collections. Each flow corresponds to a different stage of the listening experience.
1. Discovery Flow — Exploring New Music
Intent: Find new songs through curated and mood-based exploration.
Flow:
Home → Discover → Browse Curated Playlists / Mood Categories → Select Song → Start Listening
The discovery flow introduces users to new music through visually organized playlists, featured albums, and mood-based categories. Instead of overwhelming users with large lists of songs, the interface highlights curated selections that encourage exploration.
This flow allows users to quickly move from discovery to listening while maintaining a sense of curiosity and engagement.
2. Listening Flow — Playing and Experiencing Music
Intent: Enjoy a seamless and uninterrupted listening experience.
Flow:
Home / Discover → Select Song → Open Player → Play / Pause / Skip → Continue Listening
The listening flow centers around the music player, where users can interact with playback controls while remaining immersed in the listening experience.
The interface prioritizes clarity and minimal interaction friction so that users can focus on the music rather than navigating complex controls.
3. Collection Flow — Saving Meaningful Songs
Intent: Save and organize songs that resonate with personal taste and memory.
Flow:
Discover / Player → Save Song → Add to Library / Playlist → Access in Library
This flow allows users to collect songs that feel meaningful to them. By saving favorites or creating playlists, listeners can build personal collections that reflect their musical preferences and experiences.
These collections make it easy to revisit songs connected to particular moods, moments, or memories.
4. Library Flow — Revisiting Personal Music
Intent: Return to saved songs, playlists, and listening history.
Flow:
Home → Library → Browse Saved Songs / Playlists → Select Song → Start Listening
The library flow supports rediscovery. Users can easily return to previously saved music and revisit songs that are meaningful to them.
This reinforces the idea that music listening is often connected to personal memory and emotional experience.
Flow Design Principles
Several design principles guided the structure of the user flows:
Clarity
Each flow has a simple and clearly defined path, minimizing unnecessary navigation steps.
Continuous Listening
The interaction design ensures that users can move between discovery and playback without interrupting the listening experience.
Personal Connection
Flows support saving and revisiting music, reflecting the strong relationship between music, memory, and emotion.
Seamless Interaction
Navigation remains intuitive so users can explore music naturally without feeling overwhelmed by large content libraries.
Flow Outcome
The resulting user flow system creates a listening experience that feels fluid and intuitive. By supporting effortless discovery, smooth playback, and meaningful personal collections, Melodia allows users to move naturally between exploring new music and revisiting songs connected to their memories and emotions.
Wireframes
The wireframing phase translated Melodia’s design strategy and user flows into clear screen structures. At this stage, the focus was on defining layout hierarchy, interaction logic, and content organisation before introducing visual styling.
The process progressed through two stages: low-fidelity exploration followed by mid-fidelity refinement. This iterative approach allowed the core learning journey to be validated and simplified before moving into the final visual design.
Low-Fidelity Wireframes
Low-fidelity wireframes were created to quickly explore layout possibilities and test the fundamental structure of the learning experience. These early sketches focused purely on functionality and user flow rather than visual details.
Key screens explored during this phase included:
Home Dashboard
Lesson Selection
Practice Interface
Progress Tracking
User Profile
The Home Dashboard was designed as the central hub of the app. It provides quick access to current lessons, practice exercises, and progress updates. The layout prioritises immediate visibility of the user’s next learning step, ensuring that learners can begin practicing without navigating through complex menus.
The Lesson Selection screen introduces a clear progression system. Lessons are organised by levels and skill categories, allowing users to easily understand their learning path and select the next activity.
The Practice Interface focuses on simplicity and concentration. During early exploration, multiple layout options were tested to determine the most effective way to present musical exercises while keeping interaction controls accessible.
The Progress Tracking screen was designed to visually summarise achievements, completed lessons, and learning milestones. This layout reinforces motivation by making progress visible and easy to understand.
Because low-fidelity wireframes remove visual distractions, they helped validate the clarity of navigation and ensure that users could complete core tasks with minimal steps.
Mid-Fidelity Wireframes
Once the core layout and navigation patterns were established, the design progressed to mid-fidelity wireframes. At this stage, the interface incorporated clearer typographic hierarchy, refined spacing, and more defined UI components while still remaining visually neutral.
Mid-fidelity wireframes allowed the design to test:
Information hierarchy within music discovery screens
Placement of playback controls and song metadata
Interaction patterns for saving songs and creating playlists
Consistency across navigation and browsing structures
These refinements helped ensure that the experience remained intuitive while supporting the primary user goals of discovering, listening to, and organizing music.
Discover Screen
The Discover screen was refined to present curated music content in a structured and visually scannable layout. Playlists, albums, and recommendations were organized into card-based sections that allow users to quickly browse and select music.
Typography hierarchy and spacing were adjusted to ensure that song titles, artist names, and playlist categories remain easy to read without overwhelming the interface.
Music Player Interface
The Music Player evolved into a more focused listening environment. The mid-fidelity design clarified the placement of key elements such as album artwork, playback controls, song information, and queue management.
Interaction elements such as play, pause, skip, and save were positioned within comfortable thumb reach to support seamless interaction during playback.
This layout prioritizes simplicity so users can remain immersed in the listening experience.
Library & Playlist Management
The Library screen was refined to support easy browsing of saved songs, playlists, and favorite artists. Clear section divisions help users quickly locate music they have previously saved.
The playlist management flow was also tested during this stage, ensuring that users could easily add songs to playlists or organize their music collections with minimal steps.
Structural Consistency
Throughout the mid-fidelity stage, particular attention was given to maintaining consistency across navigation patterns and screen layouts. Standardized spacing, card structures, and interaction patterns were introduced to ensure a coherent experience across all sections of the app.
Mid-Fidelity Outcome
By the end of the mid-fidelity stage, the structural foundation of Melodia was clearly defined. The design successfully balanced music discovery, seamless playback, and personal collection management within a unified interface system.
This stage confirmed that users could move smoothly between discovering new music, listening to songs, and organizing their personal libraries before progressing to the final visual design.
Wireframe Outcome
The wireframing process confirmed that Melodia’s music discovery and listening experience could be presented through a clear and intuitive interaction flow. By validating layout decisions early in the design process, the structure ensured that users could easily move between exploring new music, playing songs, and saving favorites to their personal library.
This stage helped refine the hierarchy of key screens—including Discover, Player, and Library—while minimizing navigation complexity and interaction friction.
The wireframes established the structural foundation of the app, which would later be enhanced through colour, typography, and visual styling during the final UI design phase.
Color Strategy
The color strategy for Melodia was designed to create a visually immersive music environment that balances elegance, clarity, and emotional atmosphere. Because music is closely connected to mood and memory, the palette aims to evoke a sense of depth and refinement while maintaining strong readability across the interface.
The visual identity of the app is built around a luxurious black-and-gold palette, where deep black backgrounds highlight refined golden accents. This contrast creates a cinematic listening environment that draws attention to album artwork, typography, and interactive elements while reinforcing Melodia’s premium character.
The primary palette includes:
Deep Black — #050101
Gold Accent — #CDA052
Soft Light Grey — #DCD6D6
Warm Bronze — #A06909
The dark background provides strong contrast for text and interface elements, while the gold accents introduce warmth and sophistication reminiscent of classic music instruments and stage lighting.
1. Premium Visual Identity
The black-and-gold foundation establishes Melodia’s distinctive visual identity. The deep black interface creates an immersive backdrop that allows music content—such as album artwork and artist imagery—to stand out clearly.
Gold accents are used selectively to highlight key interactions including:
Primary action buttons
Active playback indicators
Navigation highlights
Interactive controls
This restrained use of gold reinforces the premium aesthetic while ensuring that the interface remains visually balanced.
2. Supporting Neutral Colors
To maintain readability and visual balance, a set of neutral tones supports the primary palette.
These include:
Soft Grey — #DCD6D6
Warm Neutral — #C1B6A1
White — #FFFFFF
These colors provide visual breathing space within the interface, ensuring that song titles, artist names, and navigation elements remain clear against the dark background.
3. Functional Accent Colors
Additional accent colors are introduced sparingly to support interaction feedback and content categorization.
These include:
Vibrant Purple — #6752CD
Warm Red — #BF282A
Cool Blue — #529ACD
These tones help differentiate playlists, highlight active states, or provide subtle interaction feedback while maintaining harmony with the overall palette.
4. Color as Atmosphere
Beyond functional clarity, color in Melodia also contributes to the emotional tone of the listening experience. The dark interface creates a focused and intimate environment, similar to the atmosphere of a concert hall or late-night listening session.
By combining deep blacks with warm metallic accents, the design encourages users to remain immersed in music while allowing visual elements to remain calm and uncluttered.
Color Outcome
The final color system creates a refined and immersive environment that reflects the emotional depth of music while maintaining clarity across the interface.
The luxurious black-and-gold palette establishes Melodia’s premium visual identity, while supporting neutral and accent tones ensure usability and visual balance.
Together, the color strategy transforms Melodia into an elegant digital space where music discovery and listening feel both immersive and personal.
Typographic Hierarchy
Because Melodia presents multiple layers of music content—from playlists and albums to individual tracks—a clear typographic hierarchy is essential for guiding user attention.
The hierarchy is structured as follows:
H1 — Primary Titles
Used for major headings such as playlist titles and featured music sections.
These titles use the display typeface and create a strong visual anchor within the interface.
H2 — Section Headers
Used for categories such as Discover, Library, or curated playlists.
These elements help organize content into clearly structured areas.
Song Titles — Primary Content
Song titles are designed to be highly readable and visually prominent, allowing users to quickly identify tracks within lists and playlists.
Metadata — Artist Names, Album Info
Artist names and album details are presented in a lighter visual weight to support quick scanning without distracting from the main content.
UI Labels — Navigation & Controls
Navigation labels and system controls use compact typography optimized for clarity and quick recognition.
This layered hierarchy ensures that users can easily browse music collections and identify important information at a glance.
Readability in Dark Interface Environments
Because Melodia’s interface uses a dark visual theme, careful attention was given to contrast and spacing. Typography is rendered in light tones against deep black backgrounds to maximize legibility while maintaining visual comfort during extended listening sessions.
Key considerations include:
Balanced contrast between headings and body text
Comfortable line spacing for song lists
Controlled text width for readability
Clear distinction between song titles and metadata
These adjustments ensure that the interface remains clear even when browsing large music libraries.
Emotional Tone
The typographic system reflects the expressive nature of music itself. Elegant headings evoke the atmosphere of live performance and musical artistry, while clean body text introduces clarity and structure.
This balance mirrors Melodia’s overall design philosophy: creating a listening experience that feels both refined and effortless.
Typography Outcome
The final typography system strengthens both the visual identity and functional usability of the app. By pairing expressive display headings with highly readable interface text, Melodia maintains a premium aesthetic while ensuring that music browsing and playback interactions remain intuitive.
Typography therefore becomes not only a visual element but also a structural guide that helps users navigate and experience music naturally.
Layout & Grid
The layout system of Melodia was designed to create a structured yet immersive listening environment. Because the app presents large amounts of music content—such as playlists, albums, and song collections—the interface needed to balance visual elegance with clear information hierarchy.
The layout emphasizes rhythm, spacing, and alignment, reflecting the flow and structure of music itself. Through a disciplined grid system, the interface allows users to move smoothly between discovering music, playing songs, and managing personal collections without visual clutter.
1.Structural Grid Foundation
Melodia’s interface is built on a modular grid system that ensures consistency across screens and device sizes.
Key structural principles include:
Consistent horizontal margins
Predictable vertical spacing intervals
Aligned content modules
Responsive layout behaviour across screen sizes
This grid structure allows music content—such as playlists, albums, and song lists—to remain visually stable and balanced while supporting flexible placement of interface components.
The modular system also supports scalability, allowing additional music collections, playlists, or recommendation sections to be integrated without disrupting the overall layout.
2.Card-Based Content Structure
Because Melodia presents multiple types of music content, the interface uses a card-based layout to organize information clearly.
Cards are used to present:
Playlists
Albums
Artist highlights
Recommended tracks
Each card maintains consistent proportions and spacing, ensuring predictable interaction patterns across the app. This structure allows users to quickly scan music selections and identify content they want to explore.
Album artwork and cover images are given visual prominence within these cards, reinforcing the emotional and visual identity of the music.
3.Generous Use of Space
Spacing plays an important role in maintaining clarity and visual comfort. Rather than compressing large lists of songs into dense layouts, the design introduces breathing space between elements.
This approach helps to:
Improve readability of song titles and artist names
Support comfortable browsing through playlists
Highlight key interactive elements such as playback controls
The controlled use of spacing also enhances the premium visual identity established by the dark interface and gold accents.
4.Hierarchy Through Layout
Visual hierarchy is reinforced primarily through layout structure rather than heavy visual decoration. Key elements such as playlist titles, album artwork, and playback controls are positioned strategically to guide user attention.
Primary content—such as featured playlists or currently playing tracks—appears in prominent central areas, while supporting information is placed within secondary modules. This layered structure allows users to quickly understand each screen’s purpose and navigate naturally through the interface.
5.Responsive Adaptation
The grid system adapts fluidly across different screen sizes while maintaining the visual rhythm of the interface.
Key layout elements—such as playlist cards, album covers, and playback controls—retain consistent proportions and alignment across devices. This ensures that the listening experience remains stable and intuitive regardless of screen dimensions.
Layout Outcome
The final layout and grid system establishes a clear visual rhythm that supports Melodia’s music discovery and listening experience. By combining modular structure, balanced spacing, and disciplined hierarchy, the interface remains visually refined while allowing users to explore and interact with music effortlessly.
This structured foundation helps Melodia maintain its premium visual identity while ensuring that music content remains the central focus of the interface.
Iconography
Iconography in Melodia was designed to support intuitive navigation while reinforcing the app’s refined visual identity. Because the platform focuses on music discovery and listening, the icon system needed to balance clarity, simplicity, and visual elegance.
Rather than relying on decorative graphics, the iconography emphasizes clean, recognisable symbols that guide interaction and communicate meaning instantly.
1.Minimal and Recognisable Forms
The icon set uses simple geometric shapes and minimal visual detail to ensure immediate recognisability. Each icon communicates its function clearly without requiring additional explanation.
Common interface actions such as:
Play / Pause music
Skip tracks
Save songs
Add to playlists
Search music
Access profile settings
are represented through familiar symbols that users can easily recognise across different screens.
This simplicity reduces cognitive load and allows users to focus on discovering and enjoying music rather than interpreting interface elements.
2.Visual Consistency
All icons follow a consistent design language based on:
Uniform line weight
Rounded geometric forms
Balanced spacing within icon frames
Maintaining consistent proportions ensures that icons remain visually harmonious across the interface. This consistency supports the layout system and contributes to the app’s polished and professional appearance.
3.Integration with the Color System
Icons are primarily displayed in light neutral tones or white against the dark interface to ensure strong contrast and visibility. For active or highlighted states, the gold accent color (#CDA052) is applied to reinforce interaction feedback.
For example:
Active navigation icons appear in gold
Playback controls highlight when selected
Saved or liked songs are visually emphasised
This subtle use of color helps users quickly recognise interactive elements while preserving the elegant atmosphere of the interface.
4.Supporting Music Interaction
Icons also play an important role in guiding the listening experience. Clear visual symbols help users understand different actions within the music interface and navigate the app effortlessly.
Examples include icons representing:
Music playback controls
Playlist management
Song saving and favorites
Music discovery and search
Library and personal collections
These icons provide quick orientation within the interface, allowing users to interact with music naturally and confidently.
Iconography Outcome
The final icon system strengthens both usability and visual identity. Through minimal forms, consistent structure, and subtle integration with the gold-accent color palette, the iconography supports navigation without competing with the music content.
By guiding interaction clearly and maintaining visual elegance, the icon system contributes to Melodia’s goal of creating a refined and immersive environment for discovering and enjoying music.
Imagery & Illustration
Imagery in Melodia plays an important role in shaping the emotional atmosphere of the listening experience. Because music is closely connected to mood, memory, and personal identity, the visual language was designed to complement the expressive nature of music while maintaining the app’s refined aesthetic.
Rather than relying heavily on decorative illustrations, the design emphasizes album artwork, artist imagery, and subtle visual accents that enrich the interface without distracting from the listening experience.
Music-Centered Visual Language
The primary visual elements within Melodia are album covers, artist images, and playlist artwork. These visuals naturally represent the identity of each piece of music while creating a visually engaging browsing experience.
Album artwork functions as the central visual anchor throughout the app. It appears prominently in several areas, including:
Discover playlists
Featured albums
Song cards
The music player interface
By allowing album artwork to remain visually dominant, the interface ensures that music content becomes the focal point of the experience.
Mood and Atmosphere
Because music listening is strongly connected to emotion and memory, imagery also supports the atmosphere of the interface. Curated playlists and discovery sections often incorporate subtle visual themes that reflect musical moods or genres.
For example:
Soft gradients and abstract backgrounds suggest ambient or atmospheric music
Darker imagery supports late-night listening environments
Warm tones may accompany energetic or upbeat playlists
These visual cues help users intuitively associate music with particular moods and listening contexts.
Balanced Integration with the Interface
Melodia’s dark interface allows imagery to stand out without overwhelming the layout. Visual elements are carefully integrated into the structure of the interface through card-based layouts and balanced spacing.
Key visual considerations include:
Clear framing of album artwork within cards
Consistent proportions across playlist and album visuals
Controlled contrast against the dark background
This approach maintains the premium aesthetic established by the black-and-gold visual system while ensuring that imagery remains harmonious with typography and layout.
Subtle Illustrative Elements
While album artwork serves as the primary visual element, subtle graphic accents are occasionally used to enhance the interface. These may include:
Abstract sound wave motifs
Minimal geometric shapes inspired by music rhythm
Soft visual transitions between sections
These elements add visual depth while remaining understated, ensuring that the music content remains the central focus.
Imagery Outcome
The final imagery system creates a visually rich yet balanced environment that reflects the emotional depth of music. By allowing album artwork and artist visuals to take prominence, the interface celebrates the visual identity of music itself.
Combined with the dark, elegant interface and refined color palette, the imagery contributes to an immersive listening experience where music discovery feels both personal and atmospheric.
Final UI Screens
The final UI of Melodia brings together the app’s discovery strategy, interaction flows, and visual system into a cohesive and immersive listening experience. Each screen was designed to support effortless music exploration while maintaining a refined and atmospheric interface.
The design combines the luxurious black-and-gold visual identity with clear layout hierarchy and intuitive interaction patterns. This balance ensures that the interface feels visually distinctive while allowing music content—such as album artwork and playlists—to remain the central focus.
1. Discover
The Discover screen acts as the primary entry point for exploring music. It introduces curated playlists, featured albums, and mood-based recommendations that help users navigate a large music library in an intuitive way.
Key elements include:
Featured playlists and albums
Mood-based music categories
Personalized recommendations
Visually prominent album artwork
The layout prioritizes visual scanning and quick exploration, allowing users to move naturally from browsing to listening. The dark interface enhances the visual impact of album artwork while maintaining a calm and immersive atmosphere.
2. Music Player
The Music Player screen provides a focused listening environment where users interact directly with the music.
Important elements include:
Large album artwork display
Playback controls (play, pause, skip)
Song title and artist information
Save and playlist actions
The interface emphasizes clarity and simplicity, ensuring that essential controls remain accessible while keeping visual distractions to a minimum. The combination of dark backgrounds and subtle gold accents reinforces the premium aesthetic while maintaining focus on the music itself.
3. Library
The Library screen allows users to access and organize their personal music collections. This section provides quick access to saved songs, playlists, and favorite artists.
Users can easily browse:
Saved songs
Personal playlists
Favorite albums and artists
Listening history
The structured layout helps users quickly locate previously discovered music, reinforcing the idea that music collections often reflect personal taste and memory.
4. Playlist Management
Playlists allow users to curate their own listening experiences. The Playlist interface enables users to create and organize collections of songs based on mood, genre, or personal preference.
Key features include:
Playlist creation and editing
Adding songs directly from the player or discovery screens
Visual playlist artwork
Easy song reordering and organization
This feature encourages users to build meaningful music collections that can be revisited over time.
5. Profile & Personalization
The Profile screen provides access to account settings and personalization features that adapt the listening experience to each user’s preferences.
Users can manage:
Account information
Listening preferences
Notification settings
Recommendation adjustments
Providing these customization options ensures that Melodia can adapt to individual listening habits and music tastes.
Final Interface Outcome
The final interface successfully integrates music discovery, seamless playback, and personal music collections within a refined visual environment. Through clear navigation, balanced layouts, and the distinctive black-and-gold aesthetic, Melodia creates a listening experience that feels both elegant and intuitive.
By combining immersive visuals with simple interaction patterns, the design encourages users to explore new music while easily revisiting songs that resonate with their personal memories and emotions.
Music Play
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.
Search
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.
Design Impact
The design of Melodia transforms music listening from a purely functional activity into a refined and immersive digital experience. By combining intuitive music discovery, seamless playback, and a distinctive visual identity, the app creates an environment where users can explore, enjoy, and reconnect with music effortlessly.
The design decisions throughout the project focused on simplifying interaction, enhancing emotional engagement, and creating a visually memorable listening atmosphere.
1. Improved Music Discovery
One of the key outcomes of the design is a clearer and more intuitive music discovery experience. By organizing content through curated playlists, mood-based categories, and visually structured browsing sections, users can explore new music without feeling overwhelmed by large libraries.
This structured discovery approach allows users to quickly find songs that match their taste while encouraging exploration beyond their usual listening habits.
2. Seamless Listening Experience
The music player interface was designed to minimize interaction friction and maintain focus on the listening experience. Clear playback controls, prominent album artwork, and simplified navigation allow users to interact with music effortlessly.
This streamlined interaction ensures that listening remains fluid and uninterrupted, allowing users to remain immersed in the music itself.
3. Stronger Emotional Engagement
Music often carries strong emotional and personal associations. The design therefore emphasizes visual atmosphere and mood, creating an interface that supports this emotional connection.
The dark interface, combined with warm gold accents and prominent album imagery, creates an intimate listening environment reminiscent of a concert hall or late-night listening session.
This visual atmosphere helps reinforce the emotional depth of the music experience.
4. Clear Navigation and Reduced Cognitive Friction
Through simplified navigation, balanced layouts, and consistent visual hierarchy, the interface minimizes cognitive load during browsing and playback.
Users can easily move between discovering new music, playing songs, and managing their personal library without navigating complex menus.
This clarity allows users to focus on the music itself rather than the interface.
5. Scalable Design System
The modular layout and consistent visual language provide a flexible foundation for future expansion. Additional playlists, recommendation systems, or social features could be integrated while maintaining visual coherence across the interface.
This scalability ensures that Melodia can continue evolving as a modern digital music platform.
Overall Impact
Melodia demonstrates how thoughtful UX design can transform music listening into a richer digital experience. By combining intuitive discovery, seamless playback, and a refined visual identity, the app creates a space where users can explore music naturally while building personal connections to the songs they love.
The result is a listening environment that feels immersive, elegant, and emotionally resonant—encouraging users to discover new music while revisiting the sounds that shape their memories.
Reflection
Designing Melodia required balancing two important aspects of digital music experiences: intuitive interaction and emotional atmosphere. While music platforms must provide efficient navigation and playback controls, they should also create an environment where users feel immersed in the music itself.
Throughout the project, the main challenge was ensuring that the interface remained simple and functional while still conveying the emotional richness associated with music listening.
Balancing Simplicity and Atmosphere
One of the central design considerations was how to create a visually distinctive interface without overwhelming the user. The black-and-gold visual system was introduced to evoke a refined and immersive listening environment, but it required careful control to maintain clarity and usability.
Through multiple iterations of layout and hierarchy, the design gradually evolved into a balanced system where visual atmosphere enhances the listening experience without distracting from navigation or playback interaction.
This process reinforced the importance of visual restraint in interface design, particularly in content-rich environments such as music platforms.
Designing for Discovery
Music platforms often contain large libraries of content, which can easily become overwhelming. A key design challenge was creating a discovery system that encourages exploration while keeping navigation intuitive.
By organizing content through curated playlists, mood-based categories, and structured browsing sections, the interface helps users move naturally between discovering new music and revisiting familiar songs.
This approach highlighted how information architecture plays a crucial role in shaping how users explore digital content.
Music, Memory, and Emotional Experience
Another important insight during the project was the close relationship between music and memory. Songs often carry personal associations, connecting listeners to specific moments or emotions.
This perspective influenced several design decisions, including the prominence of album artwork, the structure of personal music libraries, and the emphasis on building meaningful song collections.
Designing for music therefore became not only a technical challenge but also an exploration of how digital interfaces can support emotional and reflective experiences.
Key Takeaways
This project strengthened my understanding of how interface design can shape both functionality and emotional engagement. In music applications, visual identity, layout structure, and interaction design must work together to support a seamless listening experience.
The process also reinforced the importance of designing systems that remain visually calm and intuitive even when managing large amounts of content.
Looking Forward
If the project were developed further, I would explore additional opportunities to deepen personalization and discovery. Future iterations could include more adaptive music recommendations, memory-based listening features, and social music discovery tools.
These developments would allow Melodia to evolve into a more intelligent and emotionally responsive music platform while maintaining the refined visual identity established in the current design.
This project also reflects the philosophical idea that music is closely connected to memory and lived experience. As Henri Bergson suggested, memory is not a static archive but something that continuously interacts with the present moment. In this sense, Melodia aims to create a listening experience where music becomes part of the user’s ongoing flow of memory and emotion.
Future Improvements
While Melodia establishes a strong foundation for a refined music discovery and listening experience, there are several opportunities to further enhance the platform through deeper personalization, intelligent recommendations, and richer social interaction. Future development would focus on strengthening long-term engagement while allowing users to build more meaningful relationships with the music they discover.
1. AI-Powered Music Recommendations
Currently, Melodia introduces music through curated playlists and mood-based discovery. Future iterations could incorporate AI-driven recommendation systems that adapt to individual listening behavior.
By analyzing listening history, saved tracks, and playlist interactions, the system could suggest music tailored to each user’s evolving preferences. These recommendations might include:
Personalized daily mixes
Mood-based suggestions
Artist discovery based on listening patterns
This approach would allow users to discover new music naturally while maintaining a sense of personal relevance.
2. Memory-Based Listening Experience
Music often carries strong emotional and personal associations. A future version of Melodia could introduce features that highlight these connections by organizing music around listening memories.
Possible features include:
“On This Day” listening history
Memory playlists generated from past listening habits
Timeline views of favorite songs over time
This feature would reinforce the emotional dimension of music listening, allowing users to revisit songs connected to specific moments or experiences.
3. Smart Playlist Generation
Playlist creation could be expanded through intelligent automation. Instead of manually building playlists, users could generate collections based on mood, genre, or listening context.
Examples might include:
Late-night listening playlists
Focus or relaxation music sets
Automatically updated favorite tracks
Smart playlists would simplify music organization while encouraging users to explore different listening environments.
4. Social Music Discovery
Music discovery often happens through social interaction. Future versions of Melodia could introduce optional social features that allow users to share and discover music through their networks.
Potential features include:
Sharing playlists with friends
Collaborative playlist creation
Discovering trending music among connections
These social interactions could create a sense of community while expanding opportunities for discovering new music.
5. Cross-Device Listening Experience
To support modern listening habits, Melodia could expand into a multi-device ecosystem. Future iterations might include seamless transitions between devices such as smartphones, tablets, and desktop platforms.
Users could begin listening on one device and continue on another without interrupting the playback experience.
Strategic Outlook
The long-term vision for Melodia is to evolve from a beautifully designed music player into a personalized music discovery companion. By combining intelligent recommendation systems, memory-based listening experiences, and social discovery features, the platform could support deeper emotional engagement with music.
Through these future developments, Melodia would continue to enhance how users explore, experience, and remember the music that shapes their lives.
Sign in
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.
Signer Selection
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.
Create an account
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.
Home Page
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.
Home Page
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.
Collection
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.