SoundFlow
Musical version of TikTok
Project Type
Invidual project
My role
Product Designer
UI/UX Designer
Strategist
Timeline
1 month
UX Method
User Interview
User Flow
Competitive & Comparative Analysis
Heuristic Analysis
Information Architecture
Prototyping
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?
Concept
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.
Components
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 🎚️
01
VIBES SETTING
Input the personal music preferences to better train the algorithm by creating personalized playlists and recommendations
02
PERSONALIZED ARCHIVE
Understand users' music preferences through the data sediment
03
MUSIC FILTERS
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
04
MUSIC FILTERS
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
05
SOCIAL CONNECTIONS
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
Home
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.
Social
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.
Library
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.
Editing
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.
Takeaways
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.