shippedJOOX
Music streaming player
I was the UI/UX designer for a major mobile music product, contributing to the art style, interaction design, and mascot. I also created icons, logos, buttons, and supported app updates and optimizations
Product
JOOX
Skills
- Brand Consistency
- Visual Design
- Motion Design
- User Interface Design
My role
UI/UX Designer co-op
Timeline
Q2 2021
What's JOOX?
A music streaming service
JOOX is a music streaming service owned by Tencent, launched in January 2015. It is the biggest music streaming app in Asian markets such as Hong Kong, Indonesia, Malaysia, Myanmar and Thailand.
Background
In the previous design, JOOX's product structure and visuals did not fully showcase its unique features. With a diverse user base and evolving trends, a refined design became necessary. This redesign optimizes the product architecture and visual representation, enhancing user experience while strengthening brand identity and functionality.
Continuing the “youthful, fresh, and dynamic” philosophy, the redesign expands the music experience beyond sound, exploring sight, interaction, and rhythm. By offering a richer, multi-dimensional experience, JOOX aims to deepen users’ sensory connection to music.
Problem
UI Design
With the rise of flat design, many apps have adopted similar visual styles, so we sought to find JOOX's unique personality in our design. Centered around the keywords "youthful, fresh, dynamic," we experimented with the recently popular light and transparent design language, incorporating subtle skeuomorphic textures. To create a strong sense of change, we focused on key interfaces and prominent areas such as the "My" page, Music Library, Playback page, App bottom tab, and the iconic brand green, maximizing the highlights and features of the light and transparent design.
"My" Page
The two most significant changes to the "My" page are the user info card and the asset accumulation area.
The design goal for the user info card is to enhance transparency and usability. We rearranged the original information, ensuring that elements are no longer crowded together. Each element block is clearly defined, with appropriate white space between areas, creating a stronger sense of space and clear hierarchy throughout the card.
User Asset Accumulation Area
In the user asset accumulation area, the conventional approach is to use icons as entry points. However, this time, we made a bold attempt by using a transparent magical color gradient combined with album cover art, creating a visual effect resembling a vinyl record wrapped in translucent tracing paper. Additionally, we added quick play and pause actions to streamline the user's music listening experience, shortening the core path to playing songs.
Icon Update
- Shape: We optimized unclear symbols and made the overall icon shapes lighter and more rounded.
- Color: The original dark green highlight of the UI was adjusted to a more youthful and dynamic fluorescent green.
- Texture: We broke away from the flat, single-texture design by introducing a dual-color scheme with fluorescent green and gray. This includes a transparent, semi-gradient effect, and for the bottom tab, we added subtle gradient textures and shadows. This gives the icons a richer, more three-dimensional appearance with more details and highlights.
Icon Update - Actionsheet page
We also optimized the icons on the Actionsheet, unifying their style.
Icon Update - Playback page
The icons were updated with a simpler, clearer, and more polished look, featuring rounded edges and subtle gradients. This modern design enhances both aesthetics and usability across the playback page.
Playback Page
To further expand and enrich the multi-sensory experience of "seeing" and "listening," and to enhance the immersive music experience, in the new version , we explored more dynamic effects on the playback page background.
Seeing the Colors of Music – Colorful Gradients
The rich and smooth gradient colors can create an atmosphere and convey emotions. The colorful gradient light effects are composed of a two-layer structure to ensure a clear and vibrant color hierarchy:
- Upper Layer: All control information is in bright magic colors.
- Bottom Layer: Dynamic colorful gradient effects.
Minibar
Seeing the Rhythm of Music
The magic colors are mapped to dynamic assets, allowing each album's colors to flow and blend with the music.
