Context

‍How I increased the purchase conversion rate by 3.8% in 2 months?

KKBOX, KKCompany's flagship product, is a cross-platform music streaming application.

Over time, the product developed various purchasing options and user plans, but these alone weren't enough to drive revenue growth in a competitive market. The marketing team turned for design support, and I simplified complex processes by integrating business and user needs, ultimately boosting revenues.

I began with competitive research and heuristic evaluation to identify usability issues and collaborated with data analysts to assess their severity. I then led design sprints to ideate, prototype, and conduct hallway usability testing, iterating based on feedback.

Problem

App subscription effectiveness is low.

"After launching new user plans, we observed an increase in users. However, most subscriptions still come through the website, even though the app is the primary platform. Furthermore, the app's outdated interface makes it challenging to maintain and promote plans." - Marketing Team

Solution

Creating a delightful and scalable experience to boost engagement and efficiency.

The new subscription experience (1) clarifies the information structure, (2) provides a visually compelling interface, and (3) enables teams to easily add new plans.

Competitor analysis

Inconsistent subscription options across platforms.

Among competitors, we offer the most diverse but also the most complex plans, making it difficult to maintain uniform subscription options on both mobile and web. (We offer 17 options on the web.) As a result, users naturally choose the web as the primary subscription entry point since it offers the most comprehensive options.

We couldn't resolve the cross-platform subscription inconsistency issue, as it was beyond the scope of this project. However, I proposed focusing on improving the app subscription experience, ensuring key plans are well presented and delivering effective results.

Heuristic evaluation

The page looks like a settings page!

I then conducted a usability heuristic evaluation with 6 internal experts on the previous pages. The findings were categorized by user tier, revealing significant issues with unclear user status and unintuitive interactions.

Data analysis

Users spend 5 seconds on the subscription page on average.

Before designing anything, I wanted to confirm the need for a major revamp. Collaborating with business analysts, I found that users quickly exited the page, suggesting the design failed to meet expectations upon arrival. The drop-off occurred at entry, not later in the process.

The main insight

The subscription experience should be user-friendly for both users and the product team.

Based on data trends and evaluation results, I proposed:

• Improving content structure and writing to help users quickly find key details.
• Restructuring the visual layout to clearly communicate that the page is designed for subscription.
• Enhancing interface scalability to ensure easier management for future updates.

Ideating Solutions

Making the app subscription experience just like shopping!

As I began brainstorming possible solutions, I drew inspiration from the 'shopping experience,' aiming to make it enjoyable for users to find the most suitable plan.

I clarified users' motivations at each stage of their journey and designed relevant features to seamlessly connect the process, while also considering technical limitations to ensure feasibility.

Eventually, this concept evolved into designing pages that guide users through three key stages: (1) Before Shopping, (2) During Shopping, and (3) After Shopping.

Iterations

3 major improvements.

Based on feedback, the designs continue to improve.

• Narrowing down the use of color, applying it only to the subscription plan cards. Initially, I used various colors to highlight information, but I received feedback that the previous designs were overly colorful, making it difficult for users to focus on selecting a plan.
• Enlarging the space between modules. Since this page is filled with a large amount of text, the use of negative space makes related information visually easier to read.‍
• Hiding the comparing details with an accordion design. With three key stages on the screen, balancing the proportions makes it easier for users to find the right features.

Hallway Usability Testing

+1 more major improvement.

Before development, I conducted usability testing to validate the usability of different tiers pathways.

• Appropriately adding contextual triggers (popups and automatic redirection). I received feedback that users felt unsure about the next steps when subscribing to a Family Plan or changing tiers, resulting in a lack of trust or abandoned subscriptions.

The Final Design

The new subscription experience.

The key aspects of this revamp include reorganizing the information layout to help users better understand the benefits and the purpose of each section. I also incorporated brand-style illustrations to make the comparison process feel more like shopping. Lastly, I used card and accordion designs to support expanded plans and reduce users' reading burden.

More details...‍‍

Key Takeaways

What I'd learned from this design process.

‍Strengthening user trust through design
During usability testing, we discovered that the lack of task completion pop-ups and unclear marketing copy caused users to feel hesitant and reduced their trust in the product. This highlighted the importance of focusing on micro-interactions and clear communication, especially when designing processes related to payments.
‍

The advantages of scalable design
‍The redesigned subscription page used a card-based layout with flexible content areas and consistent backgrounds, enabling efficient updates. For example, a new subscription plan was launched within a month without design team involvement, showcasing the scalability of the design.