SoundHub
Manage all streaming services and all devices in one single app: SoundHub is an app that fulfills all needs for best music experience at home. It’s designed to be the home audio terminal.
Motivation
We've noticed a growing issue of interruptions in today's music experience. Users find themselves constantly switching among various apps to manage their playlists and modify output devices, leading to a disruption in their immersive music enjoyment. This presents a significant opportunity for improvement, as we strive to enhance the seamless and uninterrupted music experience for our users.
A Terminal For
All You Need About Music
Plenty resources from one source
It’s not natural to jump between apps.
SoundHub is a generative platform that grabs music resources from the streaming services and integrates them into one local library. It allows you to focus on the music itself, not how to get there.
Better personalized library
You don’t need to transfer favors, history or personal playlists between platforms anymore.
Now all of them are integrated as one single library.
Soundtrack on the right track
SoundHub makes technology feel natural.
It’s easy to group, manage, and modify outputs in one-stop.
You can even let the music follow you - the signal is always delivered to the right device according to your location.
Immersed in the vibe
The adaptive interface varies based on what you are listening to. Colors and animations just reflect the vibe and create a better immersive experience than ever.
Design Process
Background
The global music streaming market 2020-2027 is expected to grow at a CAGR of 7.4%. The projected market size is $46.9 Billion by 2027.
Growth is expected to be driven by: increasing internet usage, rising use of smartphones and laptops, an increase in competing music platforms, and lower annual subscription costs to supplier solutions resulting in a rise in the number of subscribers.
Market growth due to Covid-19 - as the music industry (live performances) in general is impacted and experiencing challenges due to COVID19, additional streaming growth will be in the area of live shows.
Under this premise, I was asked to develop a digital interface for a Smart Home audio system controller supplier to extend their current market offerings and evolve their brand and product line.
Problem
Fragmentation stands out as the most frustrating pain point for music users. The ownership of songs by different platforms forces users to create multiple accounts on various music streaming services, leading to constant switching between different apps. This lack of shared libraries creates inaccuracies in everything related to their music experience, from recommendations to listening history.
Furthermore, for home audio users, the situation has become even more challenging as they now own multiple devices. This discontinuous experience requires them to constantly manage the output channels, diverting their attention away from the music itself.
Our mission is to address these issues head-on, providing a unified and seamless music experience. By offering a platform that bridges the gap between different music services and output devices, we aim to eliminate fragmentation and allow users to fully immerse themselves in the joy of music without any interruptions.
Solution
SoundHub serves as a versatile terminal, granting users access to all their online streaming services, local resources, and hardware setups through a unified and user-friendly interface.
Research
Competitive Research
User Research
Prototype
Low-Fidelity Mockup
Usability Test
I iterated my design by conducting informal usability testing with the low-fidelity prototype. My participants provided feedback on error-prevention methods, accessibility, and discoverability of the interface elements.
Iteration
Based on the insightful feedback obtained from the user tests, I made significant improvements to the original design, leading to more positive responses. Here are some examples of the changes I implemented:
During the user test, I observed that users are highly sensitive about what is owned by them and what is read-only. The first library design blurred the boundary between them. It’s simple but it’s not intuitive. So I splitted the library into two parts: online content and local library.
I wanted the first design to be super minimal so I used a lot of gesture operations and removed a lot of labels and descriptive texts. While during the user test I found that users were frustrated and confused on certain screens. I improved that a lot in the later versions.
I found users rarely use the ‘add new device function' because they are more comfortable to add new devices from system settings. I simplified the device management function by adding new ‘refresh’ and ‘auto’ functions.
I wanted to create a familiar feeling to lower the study cost so I made the first version highly similar to an iOS system app. The users were still obsessed with those apps with unique design languages. I took reference from neumorphism and did a lot of improvement on the new visual system.
Updated Version
Design Language Establishment
Logo
Integrated / Ultimate / Easy / Combination of Analog and Digital Signals
Color Palette
Friendly / Light / Fresh / Fragrant
Font
Modern / Elegant / Efficient
User Flows
Onboarding
A guide card shows up to inform the user that it’s searching and connecting to available resources from the current system environment.
Browsing
All contents retrieved from your streaming services are rearranged and integrated in one ultimate interface for you to browse.
Swipe left and right from the screen edge to switch between categories.
Library
Library is where users can manage offline resources and preference settings.
Playing
At any time users can call out the playing screen by swiping up or tapping on the playing bar on the bottom.
The overall atmosphere (UI color, animation speed etc.) is responsive to the specific song.
Tap on the album cover to see lyrics;
Swipe on the album cover to switch songs;
Swipe left and right to switch between playing screen and playlist screen.
Tuning
Tap on the ‘more’ button with three dots to call out the action sheet.
Device Management
Tap on the ‘output’ button on the left bottom corner to call out the device management card.
Here users can DIY output channels and combinations. They can also turn on ‘Follow Me’ function so the app will check the user’s location with a UWB signal and auto select the right output devices.
Tap on the device card to see more information and functions.
Tap on the device name to rename it; tap on the location label to reassign the location.