Why
A 105-response survey revealed loading, discovery, advertising, and interface frustrations among a young, app-first listening audience.
Behance Project / 2022App Design · UI/UX · Music
Insic — Music Experience
A music app concept documented through a complete brand identity, sitemap, user flows, reusable interface components, and mobile screen layouts.
- Creator
- Jun Trần
- Published
- May 8, 2022
- Project Scope
- Identity, Sitemap & User Flow, Mobile UI
Executive Summary
What the original project actually presents.
Published Format
A long-form Behance presentation combining a motion module with one detailed visual board.
Five Chapters
Introduction, Logo System, Sitemap & User Flow, Design System, and Wireframe Design Layout.
Documented Output
Logo rules, navigation architecture, UI tokens, components, icons, wireframes, and polished mobile screen compositions.
Section 01
User Research & Personas
A 105-response survey mapped the core audience, current listening behavior, product frustrations, and the criteria people use when choosing a music app.
105
Survey responses
69.5%
Audience aged 12–24
53.3%
University students
68.6%
Listen through music apps
What people dislike about music apps
105 responses- Slow loading72.6%
- Infrequent music updates57.7%
- Too many ads45.3%
- Difficult interface / unattractive colors33%
- No offline listening28.3%
- No favorites section14.2%
Listening needs
64.8%
- Very important · 64.8%
- Average · 29.5%
- Not necessary · 5.7%
Audience profile
- Age
- 12–24 · 69.5%24–40 · 19%Under 12 · 5.75%Over 40 · 5.75%
- Gender
- Male · 55.2%Female · 43.8%Other · 1%
- Occupation
- University · 53.3%Students · 26.7%Working · 17.1%Other · 3.9%
Current listening platforms
App listeners · 68.6%- Spotify44.8%
- Zing MP323.8%
- YouTube17.1%
- Nhaccuatui7.6%
- SoundCloud5.4%
- Keeng1.3%
Music listening criteria
What listeners value most
- 01Fits personal taste, easy-to-use interface, and ads that don’t interrupt music
- 02Entertainment, better focus at work, stress relief, and relaxation
- 03Catchy or meaningful lyrics
- 04Convenient, diverse, and good melodies
- 05High sound quality with access to every music genre
Research synthesis
From evidence to product decisions.
The survey becomes actionable when each signal is connected to an interface response and a concrete product area.
FindingDesign decisionResulting screen
Finding
Slow loading · 72.6%
Design decision
Reduce navigation depth and prioritize lightweight, scannable content modules.
Resulting screen
Home & discovery
Finding
Discovery friction
Design decision
Combine category browsing, charts, voice search, and recent listening into multiple clear entry points.
Resulting screen
Search & library
Finding
Easy UI and uninterrupted music
Design decision
Use an OLED-first dark surface, persistent playback access, and restrained high-contrast controls.
Resulting screen
Player & tab bar
Survey data transcribed from the original Insic research board. Percentages are presented as documented in the source artwork.
Section 02
Sitemap & User Flow
The source project documents a broad product architecture spanning onboarding, discovery, recording, library management, playback, and account settings.
Search & Discovery
01Search & Discovery
The published sitemap maps voice search, conversation code, category browsing, top-up search, trending lists, charts, and regional music.
Voice Recording
02Voice Recording
A dedicated recording branch covers capture, playback, metadata actions, sharing, copying links, and adding tracks to playlists.
Library & Account
03Library & Account
Artists, albums, listening history, liked songs, playlists, audio settings, notifications, language, and premium access form the utility layer.
Section 03
Wireframe Design Layout
The wireframe board translates the sitemap into eight connected product areas, covering the full journey from first launch to discovery, creation, listening, and account management.
8 product flowsSwipe to explore
Section 04
Logo & Design System
The published system combines an audio-wave identity with Montserrat typography, warm gradient accents, reusable controls, form fields, tab bars, and an icon library.
Typography / 01
Montserrat
A compact mobile type system with bold display styles for hierarchy and regular weights for effortless reading.
Base grid
2px type rhythm
Music for every mood.
Aa Bb Cc 0123Bold 700Regular 400
StyleSizeLeadingWeightUsage
- Headline 24Size · 24pxLeading · 28pxWeight · 700Primary screen title
- Headline 20Size · 20pxLeading · 24pxWeight · 700Section heading
- Title 18Size · 18pxLeading · 22pxWeight · 700Card title
- Title 16Size · 16pxLeading · 20pxWeight · 700List and modal title
- Body 14Size · 14pxLeading · 18pxWeight · 400Primary body copy
- Body 12Size · 12pxLeading · 18pxWeight · 400Supporting copy
- Small text 10Size · 10pxLeading · 14pxWeight · 400Caption and metadata
Color System / 02
Warm, energetic, focused.
Coral drives interaction while amber creates warmth and musical energy. Dark neutrals preserve contrast on OLED displays.
Brand / Primary
Active states · Primary action
#EC4045Brand / Secondary
Highlights · Secondary action
#FAB25BBrand / Gradient
Hero accents · Playback emphasis
#EC4045 → #FAB25BTonal ramps
Dark → Light
NeutralSurface & content
12345
AccentInteraction states
12345
HighlightFeedback & emphasis
12345
Text / Primary#F4F4F5
Surface / Base#090A0C
Component Library / Live
A mini UI playground.
Interact with production-style controls, then switch views to inspect the component contracts and design tokens behind them.
4 live componentsSwipe to test
Section 05
High-Fidelity UI Mockup
The final interface applies the brand system across the complete mobile journey—from onboarding and music discovery to account management and a dedicated audio-editing workspace.
4 product journeysSwipe to explore
Section 06
Builder’s Retrospective
A 2026 perspective on turning the original product concept into an intelligent, testable music experience.
2026 Perspective
If I built Insic today as an AI-Native Builder:
Context-aware discovery
Replace static filtering with an AI Music Agent that recommends tracks from real-time context, listening intent, and time of day.
A testable MVP in days
Ship the core experience in React Native and Expo, connected to an Audio API, so gesture flows can be validated on a real device within days.