LiStyle is a music app concept that curates playlists based on mood and scene, helping users explore the right ambience without needing clear preferences. It surfaces hidden gems and niche tracks that match the moment — whether you're working, painting, or on the move.
Overview
TYPE
App Design Concept
ROLE
Product Designer
TOOL
Figma
SKILL
UX/UI Design
SPEAK TO ECHO
UESER BEHAVIOR ANALYSIS
Reading the Rings
Sectors = different life scenes
Outer glow = trending combinations
Distance from center = frequency of play
Radial bars = intensity of mood engagement
The Mood–Scene Constellation
This radial chart shows how moods and activities connect — the core of LiStyle’s music recommendations. It reveals how often certain emotions are linked to scenes.
Key Insight
Scenes like Fitness and Work lean toward energetic moods, while Painting and Reading often pair with calm or nostalgic ones. Party scenes show a wider range of emotions, suggesting more personal or mixed feelings.
Design
Emotive. Rhythmic. Cosmic.
LiStyle is a concept music app designed for those quiet, solitary moments, when you’re not sure what you need, only how you feel. Set in a universe of ambient gradients, dark star fields, and orbiting vinyl visuals, the interface becomes more than just a player—it’s a mood translator.
Whether you’re drifting through a nostalgic evening or charging into a focused work sprint, LiStyle reads your emotional state and chosen activity, then maps it to sound. Each playlist is a constellation—curated not by genre, but by feeling, timing, and unseen pulses.
01
Color Palette
A minimal, monochrome base lets vibrant album art and emotional cues stand out. Subtle gradients and shadows add softness without distraction.
02
Font
Pairing futuristic display type with clean sans-serif text creates visual rhythm while keeping emotional cues legible and expressive.
03
Iconography
Custom icons echo classic playback controls while feeling light, playful, and mobile-native.
04
Components
Widgets are modular and musical in form — from record-inspired controls to floating playback rings, designed for intuitive interaction and motion.
05
Onboarding
LiStyle’s onboarding doesn’t require strong music preferences—just a spark of feeling. Through four intuitive steps, users respond to subtle cues: mood, genre, vibe, and moment. Each answer becomes a coordinate in Echo’s universe, guiding her to compose a playlist that feels personally cosmic—unexpected, atmospheric, and full of hidden gems.
06
Music Player
The vinyl disc UI brings tactile nostalgia into a futuristic frame. It spins, pulses, and reacts to mood — turning passive listening into a visual experience.
07
Main Screens
Core screens are built for daily use, featuring smart playlists, modular widgets, and an immersive dark-mode interface. The starry, cosmic visuals aren’t just for looks—they echo the concept behind LiStyle: in a vast universe, every listener is a small star. You’re never alone. This design creates a calming space that matches your mood, supports self-discovery, and feels personal—even when preferences are vague or undefined.