Context

Introduction

KKBOX, the flagship product of KKCompany, is a cross-platform music streaming service that provides a seamless experience across mobile, web, and desktop. It offers millions of songs, personalized recommendations, and exclusive artist content. Primarily serving users in Asia, it has over 2 million paying subscribers.

‍

Project Overview

The new feature, "Surprise Me" (SM), is a fully motion-driven AI playlist designed to offer users an innovative way to explore music. SM visualizes the algorithmic music generation process, allowing users to synchronize their auditory and visual senses to feel the rhythm.

As the lead for end-to-end product development, I managed both high-level strategy and hands-on design execution to launch the SM feature. My responsibilities included conducting user research, defining feature positioning through cross-functional workshops, and designing the user interface.

Problem

Users have lost confidence in our AI music playlists.

Our algorithm received little attention in the past, leading to inconsistent recommendations. Users rely on their own playlists or search, contradicting our positioning as a music streaming service, where AI-driven discovery should be a core experience.

Solution

Rebranding the AI music recommendation experience.

A new music discovery experience that:

• Redefines users' perception of AI-generated playlists, ensuring past negative experiences no longer discourage engagement.
• Aligns music discovery with our brand identity, enhancing user connection and acceptance of minor imperfections.

User interviews

"It takes too much time to find a suitable playlist to listen to!"

First, we conducted 6 user interviews to understand how users explore music and why they choose certain discovery methods. Findings showed that users struggle with decision-making when selecting AI playlist on the homepage.

Competitor analysis

Provide graphic playlist covers for a more visually balanced layout.

Compared to other music streaming services, our playlist covers rely heavily on album and artist images, while competitors use designed covers for better visual balance. Additionally, our homepage lacks brand identity and thematic visuals, making it less engaging and ineffective in encouraging further exploration.

The main insight

AI recommendations are judged as a whole, not by individual modules.

Based on the trends in the demographics from the interviewees and my analysis:

• The AI playlists on the homepage lack a cohesive design, reinforcing the perception of inaccuracy. Organizing them by complementary function can streamline exploration.
• The typical playlist interface creates high cognitive load. We should diversify playlist formats to boost engagement.
• Using user-focused playlist names makes recommendations feel more personalized.

Co-creating workshop

Brainstorming new ways to explore music.

To explore ways to transform music discovery, we conducted a cross-functional workshop, bringing together product, engineering, and marketing teams to brainstorm ideas. Additionally, the workshop provided insights into feasibility and business vision from a stakeholder perspective.

Ideating solution

Creating a personalized music playlist gift!

From our workshop, we aimed to repackage the AI recommendation experience in a simple, engaging way by designing a new playlist interface. Placing it at the bottom of the homepage, we saw it as a "special gift"—a fresh experience to re-engage users if earlier modules didn’t meet their expectations.

Additionally, we envisioned a motion-based music playlist, a first in music streaming. This was an opportunity to introduce a new way to explore music. I drafted concepts incorporating brand elements to seamlessly connect motion and user behavior.

Iterations

3 major improvements

Based on feedback, the designs continue to improve.

• Creating more negative space. Since this feature is surrounded by album covers, additional spacing made the design more readable and eye-catching.
• Reducing grayscale usage. Grayscale was used as the primary color to complement the product's palette. However, feedback indicated that the previous design had overly heavy visual weight.
• Simplifying graphic style to a line-based design. I used Lottie to transfer animations into code. However, it had many limitations, so I simplified the graphic style into a clean, line-based design to improve compatibility.

The final design

"Surprise Me" interactive music playlist

"Listen, and be heard" is our brand slogan, which I used as the core concept. I translated this slogan into a motion graphic, showcasing how we listen to users' preferences and recommend the most suitable playlists.

‍

More details...

This new feature consists of four interconnected motion UI elements, designed for both mobile and larger screens.

Key Takeaways

What I'd learned from this design process.

The perception of seconds can vary greatly among different users
‍After testing with team members, it was found that there was a significant variation in the acceptance of transition animation durations. After continuous testing, it was determined that most people found a completion time of within 4 seconds for the entire motion experience to be acceptable.

‍
Convincing stakeholders and team members to try new experiments may require extra preparation
‍One of the biggest challenges in this project was determining the brand voice beyond just the product color. As a result, there had been numerous doubts and questions raised during the progress of the project. To address this, we had created countless prototypes and interviewed team members, asking them to imagine what the motion brand voice of our product would look like. This process had led to the final decision and resolution for this project.