Candy Crush Gift Card Redesign

Reimagining the experience of purchasing and redeeming giftcards with joyful UI and simplified flows

My role

Visual Design

UX Strategy

User Flows

Dev Handoff

End- to - end ownership

Year

2025

Category

Consumer experience

timeline

3 weeks

Project link

Coming soon

Summary
Summary
Summary

Redesigned the Candy Crush gift card redemption and purchase experience for web and mobile. The goal was to simplify complex user flows, ensure brand consistency, and improve the overall user experience by creating a clear, intuitive, and delightful journey from login to reward redemption and purchase.

Redesigned the Candy Crush gift card redemption and purchase experience for web and mobile. The goal was to simplify complex user flows, ensure brand consistency, and improve the overall user experience by creating a clear, intuitive, and delightful journey from login to reward redemption and purchase.

KPIs
KPIs
KPIs

Improving user confidence

Improving user confidence

Reducing friction

Reducing friction

Drive higher conversion rates

Drive higher conversion rates

Problem Statement
Problem Statement
Problem Statement

The existing Candy Crush gift card flow was confusing and inconsistent, leading to user frustration and abandoned purchases.
Key issues included unclear redemption steps, inconsistent UI elements across platforms, and a lack of clear visual queues and redirections. This negatively impacted user trust and conversion rates.

Pain Points

Confusing redemption process causing drop-offs

Confusion due to inconsistent UI and terminology

Uncertainty about account login requirements

Difficulty verifying if users had a King account

Poor visibility of benefits and incentives

Solution Overview

The redesigned experience introduces a cohesive end-to-end flow for both gift card purchasing and redemption. Key improvements include:

  • A simplified 3-step redemption flow with upfront clarity

  • A structured purchasing journey, optimized for mobile and web

  • Clear CTAs, feedback states, and inline validation for smoother interactions

  • Refined visual language aligned with the Candy Crush brand

  • Modular UI components and layouts to support scalability

  • Strategic messaging to guide, reassure, and drive conversions

Design Process

I structured the redesign into two parallel flows - one for redeeming a Candy Crush gift card, and the other for purchasing one. My goal was to elevate the experience from functional to delightful while reducing confusion and drop-off.

I structured the redesign into two parallel flows - one for redeeming a Candy Crush gift card, and the other for purchasing one. My goal was to elevate the experience from functional to delightful while reducing confusion and drop-off.

1. Flow Mapping & Simplification

I began by auditing the existing flows and identifying friction points:

1. Flow Mapping & Simplification

I began by auditing the existing flows and identifying friction points:


1. Flow Mapping & Simplification

I began by auditing the existing flows and identifying friction points:

I mapped both flows, condensed steps where possible, and prioritized clarity and speed, especially for mobile users.

2. Wireframes

Using low-fidelity wireframes, I explored layouts that balance content, branding, and functionality. Key considerations:

Should the “Buy” and “Redeem” CTAs live together?

Should the “Buy” and “Redeem” CTAs live together?

How do we make the progress indicator both fun and useful?

How do we make the progress indicator both fun and useful?

What happens if the user enters a code with zero balance?

What happens if the user enters a code with zero balance?

This phase helped align on structure before diving into visuals.

This phase helped align on structure before diving into visuals.

3. Visual Design & UI Exploration

Once flows were approved, I translated wireframes into high-fidelity screens using a consistent visual language. Highlights:

Built a modular UI system with spacing based on an 8pt grid

Added subtle shadows, gradients, and candy-like visual cues to bring joy without overwhelming the interface

3. Visual Design & UI Exploration

Once flows were approved, I translated wireframes into high-fidelity screens using a consistent visual language. Highlights:

Built a modular UI system with spacing based on an 8pt grid

Added subtle shadows, gradients, and candy-like visual cues to bring joy without overwhelming the interface

4. Edge Cases & System Feedback

I paid special attention to:

Empty or invalid inputs

Users who don't have a King account

Gift cards with zero balance

All of these now trigger contextual feedback to guide the user smoothly.

4. Edge Cases & System Feedback

I paid special attention to:

  • Empty or invalid inputs

  • Users who don't have a King account

  • Gift cards with zero balance

  • All of these now trigger contextual feedback to guide the user smoothly.

4. Edge Cases & System Feedback

I paid special attention to:

Empty or invalid inputs

Users who don't have a King account

Gift cards with zero balance

All of these now trigger contextual feedback to guide the user smoothly.

5. Developer Handoff

The final Figma files were structured with:

Separate pages for preview and dev-ready files

Clearly labeled components and variants

Notes for responsiveness, auto layout, and validation rules

5. Developer Handoff

The final Figma files were structured with:

Separate pages for preview and dev-ready files

Clearly labeled components and variants

Notes for responsiveness, auto layout, and validation rules

Final Designs
Results

This project is under development by the teams at King and BHN but the project delivered a complete and production-ready redesign that:

✅ Modernized the gift card purchase and redemption flows across 34 screens for mobile and web

✅ Reduced visual debt by introducing consistent UI components and scalable design practices

✅ Enhanced conversion clarity with streamlined CTAs and refined UX copy across flows

✅ Delivered developer-friendly files with clear notes, variants, and structure — enabling smooth handoff

✅ Received full stakeholder approval on the first round of review

This project is under development by the teams at King and BHN but the project delivered a complete and production-ready redesign that:

✅ Modernized the gift card purchase and redemption flows across 34 screens for mobile and web

✅ Reduced visual debt by introducing consistent UI components and scalable design practices

✅ Enhanced conversion clarity with streamlined CTAs and refined UX copy across flows

✅ Delivered developer-friendly files with clear notes, variants, and structure — enabling smooth handoff

✅ Received full stakeholder approval on the first round of review

Let'S create

TOGETHER

Get in touch

Based in india
Available worldwide

Product Designer

Bringing order to chaos
Linkedin
Dribbble
Behance

Let'S create

TOGETHER

Get in touch
Bringing order to chaos
Linkedin
Dribbble
Behance

Let'S create

TOGETHER

Get in touch

Based in india
Available worldwide

Product Designer

Bringing order to chaos
Linkedin
Dribbble
Behance

Create a free website with Framer, the website builder loved by startups, designers and agencies.