Case Study

Product Design


Musical version of TikTok

Project Type

Invidual project

My role

Product Designer
UI/UX Designer


1 month

UX Method

User Interview
User Flow
Competitive & Comparative Analysis
Heuristic Analysis
Information Architecture

Let's start with a question…

Is there a way to make music composition as simple as drag-and-drop filters, similar to the TikTok version of a music composition platform?


The musical infusion

Imagine an indie electronic song by The XX, infused with traditional Chinese martial arts (xianxia) melodies… How complex it will be of the compositing process for a non-professional music lover?

User Motivation

People want a music composition application with 0 technical requirements, and therefore to create & share their creation easily

Some design thinking beyond the user motivation

Current music streaming platforms including Spotify prioritize mainstream pop music over all other underrepresented music genres including regional music, classic music, experimental underground music, etc. And therefore, one of the measures to protect music diversity and increase the impact of underrepresented music is to involve more enthusiasts in the creation.

Therefore, SoundFlow aims to lower the threshold of music composition to revitaize musical creation community.

Final Design

Visual design system

I adopted the gradient color patterns to envoke certain emotions and moods just like music does. The color palette dynamics strongly ties with the tension, rythm, and emotional feeling of the music pieces.


The components are designed to be interchangeable. which covers the main functions including the soundtrack compositing, templates library, music discovery, and user's home.

🎶 SoundFlow 🎚️



Input the personal music preferences to better train the algorithm by creating personalized playlists and recommendations



Understand users' music preferences through the data sediment



The ‘music filters’ works as combos of different music effects including echo, reverb, distortion, or vocal tuning which can be applied to the original music clips with efficiency



Part of the ‘music filters’ are derived from multiple famous movies so that users intuitively experience the rhythm of the music before even using the filter



Find nearby listeners according by the musical compatibility, and therefore build up a tightly connected musical sharing community

Design thinking behind the scene

Research Analysis

1/ Competitor's user journey

2/ Competitive feature analysis

3/ Wireframing and low-fidelity sketching

Competitor's user journey

To begin the research, the first thing I did was conduct a competitor's user journey analysis to better identify the core user logic of the current music streaming platform

First, in order to get a comprehensive picture of the product logic, users' friction, and painpoints, I conducted competitive user journeys toward Spotify, Audio Editor, and Splice to identify the market gaps and find opportunities. This is also a learning opportunity for a junior designer like to to gain more context.

Competitive feature analysis

For the second half of our research process, I did comparative research by comparing the top 3 music apps and describing their features in a tabular form.

Wireframing and low-fidelity sketching


This system aims to assist you in familiarizing with / collecting the instruments and music effects commonly used in composition, thereby helping you in your own creative endeavors.

Unlike conventional music streaming platforms that solely offer recommended songs based on users' listening history, Based on your listening history, SoundFlow's homepage provides alternative open-source music clips and instrumental sounds that make up the compositions you enjoy.


In addition to offering a seamless music composition experience, SoundFlow places a strong emphasis on social features that are often lacking in other streaming music platforms.

We have incorporated comment, love, and collect sections below each music clip, allowing users to interact with one another. These interactions serve as valuable data for music creators, helping them gauge the popularity of their creations.

This addresses one of the shortcomings I observed during my audit of Spotify's design. The interface lacks metadata that indicates the presence of social features as a means of reflecting the user-creator dynamic.


Traditional or retro music encompasses various nuanced subcategories that are not adequately represented in existing music platforms. However, our system collects and categorizes these songs based on different regional styles and instrument types. This allows users to easily discover and explore lesser-known tracks that align with their preferences.


The music editing is primarily based on remixing, rather than creating new music from 0-1.

I took inspiration from TikTok, where there's a rising user demand to remix the most trendy music for use as background tracks in short videos. Based on this thinking, I envision the music remixing process to be as easy as editing photos on a phone. Users can simply drag and drop 'music filters' to adjust the tempo, pitch, or arrangement of a song, and therefore generate an entirely new vibe for their clips.


Since this is the first self-initiated UX project, starting the concept from research, stratch, iterations, and final design wasn't a easy thing. I self-taught my self for the UX design procedure from Google Bootcamp to establish a good working pipeline as an UX designer.

During the process of refining my design, there're constantly new issues arising as I pushed the design to the next level. For example, when I first started the wireframing I didn't utilize auto layout or any other properties to properly treat the padding & spacing since I aimed for a quick draft. But later when I dive deep into the design, I realized that scaling up is easy, but scaling down is hard. - The design can eventually turn into a chaos if I don't lay a good foundation from the start.

The scond thing I can feel of working as a UX designer is that, beyond paying attention to pixels and details, the sharp sense to identify good problems is a strong capability for a professional designer to own. Designers aren't merely illustrators; they are catalysts for next-generation products that have the potential to improve the world by solving problems, and I want to be a strong product designer who can shape others life by building meaningful products.