Experiencing music beyond sound

About
Muze is more than a music player. It's an art-driven sound journey. Muze is your muse, turning your favourite songs into visual poetry, morphing and changing with the shifts of your emotional landscape. Muze creates a sonic atmosphere that harmonises with your mood and surroundings.
Responsibilities
Founder, Product Design, 3D Motion Design, Brand Strategy and Identity, Front-end
Tools
Figma, Webstorm
Period: 2024 (In development)
Muze Logo
Challenge
Searching for that creative outlet with music, I finally dove into music production. Subconsciously, I knew it wasn't just about making music. I aimed to find refuge and meaning through the creation of sound. This call became the challenge: How do I provide a musical experience beyond just listening to music and bringing back the nostalgia Windows Media Player left us with? How would I create an app that would visualise users' moods while listening to music? Something that resonated with other artists and music lovers, finding a space where creativity and emotion could flourish.
Solution
An interactive music experience integrating with Spotify, letting users sync and explore their collection of liked songs. Muze leverages Three.js to morph music into an interactive visual adventure of discovery in an environment where sound and visuals come together to create emotion and connection. Aiming for personalisation, users can engage with their music through mood-based playlists and visualisations that update in real-time based on their emotional state, social setting, or preselected vibe for an immersive experience.
Process

Discovering the soundtrack for my creativity and inspiration

I wanted a name that would resonate deeply with artists and music lovers, reflecting the app's purpose as a companion for creativity and self-discovery. The name Muze felt perfect because it evokes the concept of a "muse", which is a source of inspiration for artists, musicians, and creators alike. A reflection that music may lead your emotions, inspire your creativity, and allow you to reach new artistic levels. It is not only about listening. It is about feeling, creating, and being thrown into sound as an art form.
Muze Brand Value
Development Decisions
When implementing Muze's cross-platform capability, Ionic Framework and Vue were a natural choice, allowing flexibility in focusing on core app features and maintaining a seamless user experience across devices. By combining these technologies with my experience, I could balance creativity with functionality, assuring that music lovers and artists could find a source of connection and inspiration in the Muze platform.
The Tech Art Experience Complexity
My initial design for Muze was to focus on creating an immersive and interactive platform that couples the power of sound and visual art. Three.js generates dynamic, real-time 3D graphics fluent enough to respond to music and create engaging visualisations that poetically resonate with the user's emotions. The Spotify API allowed me to bring a user's existing music library and seamlessly enable personalised music experiences.
Muze Mobile Design

Features

Mood-Driven Animations
The themes include "Club," "Night Sky," and "Wavy," each matching the Energetic, Relaxing, or Balanced mood of the users. Each animation dynamically responds to the music beats, pitch, valence, tempo, and danceability for a seamless integration of sound and visuals.
Playlists Based on Favourite Songs
The app curates playlists for the moods a person can be in by syncing users' favourite songs from Spotify, as they are the main source to begin the visual journey. Additionally, users can refresh the list, shuffle tracks, and organise the tracks as they like.
Immersive Experience
Muze will adapt to personal moments of relaxation or energetic preference in solitary and social contexts. A minimalistic design that focuses on the ease of interaction, making it an intuitive and user-friendly experience. The interface hides after a few seconds of inactivity for immersion.
Muze Wavy ThemeMuze Club Red ThemeMuze Club Purple ThemeMuze Night Sky Theme

Animations

Club
This theme reflects high-energy dynamic, vibrant visuals pulsating and moving with the rhythm. The animations go big, considering bright lights and strong beats to create an atmosphere from a lively club. It's just perfect for tracks that sound upbeat, fast-paced, and fully filled with energy.
Night Sky
This is for quiet, calm moments. The feel has been inspired by a starry night sky to invoke openness and space. The animation is very soft and slow, effectively flowing without effort, much as lying on your back, staring up at the night stars and floating through a tranquil, thoughtful space. It perfectly fits some mellow and chill tracks.
Wavy
Fluid with rhythm, this theme is about the motion of distorted waves that flows freely and well suited for mid-energy tracks. It's all about movement, undulating to the pulse of the music while being able to capture the ebb and flow of the sound in visually captivating but not overwhelming ways, hence ideal for reflective or balanced songs.
Muze Player

It's a journey, not a sprint.

The app performs well, but the work is far from the benchmarks I am looking to achieve, especially regarding 429 request errors due to Spotify rate limits on dev mode. It has been two months since I started this project and I am currently gathering feedback from user testing groups to ideate and improve it before its official launch.

With exciting new visual themes and animations, I aim to refine the music experience on an evolving road. From capturing raw, abstract, scientific, and art-driven interpretations of sound, the upcoming themes will further expand the notions of what music could look like for different people, including personalising colours, shapes, movement, accessibility, and improving mood-based playlist accuracy and ideas.

Mood-based features
Personalisation
Real-time experience
What have I learned?
  • Acquired technical skills in Spotify API integration and real-time synchronisation of audio-visual elements using Three.js, and optimisation techniques using Ionic and Vue for improved cross-platform performance.
  • Learned to craft visuals that amplified the emotional depth of music experience.
  • A new way to understand the role of empathy in design, focusing on users' emotional journeys and creating experiences that resonated on a personal level.
  • Discovered the balance between technical precision and creative expression. Building tools that inspire and connect beyond functionality.
  • A lot of fun! ...and hair loss. But I'm proud of what I have achieved so far.

Next up

Dystopia

EmailLinkedin
© 2024