Improving the Post-Purchase Experience

Dec/2021
Product: Ding App (iOS and Android)
My Role: Product Designer
Market: Worldwide

Summary

Ding is an international mobile top-up recharge platform with over 1 million customers globally. It enables users to send phone credit to over 150 countries and across more than 500 global operators.

 

How it started

The initial task seemed simple: improve the copy for the Ding App success page and reduce customer care contacts.

However, deeper investigation revealed that unclear post-purchase communication led to user frustration and unnecessary support inquiries.

 

Research & Insights

To understand the root cause of the issue, I collaborated with the product manager, UX writer, Operators and Customer support team. Together, we:

  • Analyzed customer support tickets to identify why users contacted support about their top-ups.

  • Identified key frustrations, such as users not knowing their top-up status or where to find order details.

  • Reviewed the existing success screen copy to pinpoint areas of confusion.

  • Understood the flow behind sending a top-up (back-end).

Competitive Analysis & UX Audit

  • I also conducted a competitive analysis to see how other platforms handle post-purchase communication.

  • Performed a UX audit of the post-purchase flow to uncover gaps and pain points in the user journey.

This research, combined with data analysis, customer complaints and what we already knew. It got us to the following key findings:

Problem Statement

How might we manage users’ expectations regarding top-up delivery and provide assistance when needed?

Validate

Once the improvements were designed, I created a prototype to validate the solution with users.

For the first round of user testing, we ran 15 remote tests with Ding Customers. Overall, we had positive feedback with the redesign, users understood their top-up status. But I still made a few changes to the copy after the testing:

  • There was some confusion about when exactly the top-up would arrive. A few minutes for some people means 10 minutes; for others, just a moment.

  • For the operator delay, the copy ”There's a delay” had a very negative impact on users, they seemed really frustrated when seeing the message.

  • It was not clear for some users where exactly they were in the stepper.

Design Improvements

After the user testing, to improve the post-purchase experience, I implemented the following solutions (view image below):

  1. Progress Bar:

    • Added a visual progress bar to show users where they were in the process purchasing process.

  2. Clear messaging:

    • Refined messaging on the success screen to communicate delivery timelines and direct users to their order details.

    • Ensured a concise, reassuring tone to reduce uncertainty and frustration.

  3. Order Details:

    • Made it easier to find and understand key details, including:

      • Amount sent

      • Recipient information

      • Estimated delivery time (or notes about potential delays)

  4. Easy Access to Help:

    • Added a prominent Help Center link on the success screen to address common questions and reduce unnecessary support requests.

Designing for iOS and Android

When designing the confirmation screen, I needed to ensure a native experience for both iOS and Android users while maintaining brand consistency.

Status bar and safe areas
• iOS: The status bar spacing follows Apple’s Safe Area guidelines.
• Android: It adapts to different status bar behaviours depending on the device.

Typography and components
• iOS uses SF Pro, while Android follows Roboto to maintain platform-native readability.
• I adjusted button sizes and spacing to meet Apple’s tap target recommendations (44px min) and Google’s touch target size (48px min).

Dark mode
• For Dark Mode support, both iOS and Android support Dark Mode, but the default system colours didn’t fully align with Ding's brand. So instead of relying solely on system-defined styles, we had a custom dark mode palette to maintain brand consistency across both platforms while still ensuring accessibility and contrast compliance (WCAG AA).

Cross-functional collaboration

• Worked closely with iOS and Android engineers to ensure design feasibility, maintaining consistency while respecting platform-specific behaviours.

Impact

  • Fewer support requests related to order tracking and top-ups.

  • More users engaging with self-service tools, such as order details and help articles.
    There was a noticeable change in support ticket, but still had few tickets that were related to operator issues.

  • But overall, the trends at the time showed clear improvements in efficiency and user experience.

 

Key learnings

  • A small-scope project, such as a simple copy update, can evolve into a major UX improvement with the right insights and approach.

  • Some product issues are beyond our control, but we must still find ways to support users effectively.

  • Advocating for user needs, especially when backed by data, is essential for driving better product decisions.

Confidentiality

The case studies in this portfolio are under non-disclosure agreements (NDAs). As such, I have masked some information to protect the confidentiality of the project.

Please refrain from sharing this portfolio since it contains some confidential information.

Previous
Previous

Simplifying Employee Survey Data with AI

Next
Next

Boosting Engagement, Strategy, and Design Systems