THE PROBLEM: Music personality quizzes exist, but none meaningfully connect a user’s listening behavior to a visual identity. Most solutions feel generic, repetitive, or unpersonalized, leaving users wanting more playful, character-driven insight into their own music taste.
THE GOAL: Build an AI-driven web app that connects to Spotify, analyzes a user’s listening patterns, and matches them with a fitting character from movies, TV, anime, or games. Matches are based on audio traits, mood profiles, and listening patterns rather than surface-level genres.
MY ROLE: End-to-end product designer responsible for UX research, brand identity, wireframing, high-fidelity prototyping, and coding the full experience, including the character matching logic.
IMPACT: Audio Avatar turned music data into a personality-based visual result rather than a list of stats. The experience felt playful, expressive, and repeatable. Users described it as shockingly accurate, fun, and addicting to retry with different playlists.
WHAT I LEARNED: Designing with AI requires clear guardrails and human-centered logic. The matching system needed transparency and intentional scoring to avoid feeling random. Building the algorithm pushed me to balance creative interpretation with structured decision-making.
NEXT STEPS
Add a “playlist-based avatar” mode so users can generate different characters for specific moods or genres.
Expand the character library and improve accuracy using a more complex multidimensional scoring system.
Audio Avatar connects to the Spotify API and analyzes a user’s top tracks using audio features such as energy, valence, tempo, and danceability. These attributes are normalized and weighted to form a concise music personality profile.
Each character is defined using the same trait dimensions. The system compares the user profile against all character profiles and assigns a similarity score, selecting the character with the strongest overall alignment.
To keep results feeling intentional, the algorithm prioritizes consistency over novelty. Trait weights are constrained so no single attribute dominates, ensuring stable matches that do not shift dramatically with small listening changes.
I replaced traditional sketching with Algorithmic Logic Mapping. Using Euclidean Distance, the system treats music habits as a 5-dimensional vector. By calculating the mathematical "distance" between a user’s Spotify data and a character’s personality profile, I ensured every match was rooted in data rather than randomness.
Early wireframes focused on keeping the experience focused and lightweight. The flow centers on connecting Spotify, processing data, and revealing the avatar with minimal friction. I tested pacing and layout to ensure the reveal felt deliberate without over-explaining.
The visual system was designed to remain flexible and character-forward. Color, typography, and spacing were intentionally restrained to avoid overpowering the avatar while still supporting a distinct brand identity.
Load states were designed as intentional moments of anticipation. After Spotify authorization and filter changes, transitional states signal that analysis is in progress and reinforce the sense that a meaningful match is being computed. Subtle motion and minimal messaging helped maintain momentum while building suspense, turning wait time into part of the narrative leading up to the avatar reveal.
