Magrabi – digital gift card experience Copy

Role

UI/UX Designer

Time

March, 2026

Tools

Figma, Chatgpt, Google Stitch, Figma make

Figma, Chatgpt

Client

MAGRABI

Project Overview

Project Overview

Magrabi’s digital gift card experience was designed to make gifting simple while maintaining the brand’s premium visual identity.

I worked on the gift card journey, focusing on the user flow, interface design, gift card presentation, personalization, and responsive experience across desktop and mobile.

Goal: Create a clear and premium gift card experience that makes it easy for customers to choose, personalize, and purchase a gift card.

Problem Statement

Problem Statement

The gift card experience needed to make it easy for customers to understand their options and complete a purchase without unnecessary steps.

The experience needed to clearly communicate:

  • Available gift card options

  • Gift card value and details

  • Personalisation options

  • Recipient information

  • Purchase details

  • Confirmation and delivery

The challenge was to keep the journey simple while maintaining the premium look and feel expected from the Magrabi brand.

My role & workflow

Role

UI/UX designer

Workflow

Translated product requirements into a clear gift card purchase flow.
Worked on the information hierarchy, interaction flow, and responsive layouts.
Collaborated with Product and development teams to understand requirements and technical constraints.
Iterated on the designs based on feedback and edge cases.

Delivery

Gift card discovery & selection
Gift card details & personalisation
Recipient information flow
Gift card purchase flow
Checkout & confirmation
Responsive desktop & mobile designs


UX considerations

The gift card experience needed to feel straightforward while giving customers enough flexibility to personalise their gift.

Key considerations included:

  • Make gift card options easy to discover and understand.

  • Clearly communicate gift card values and important details.

  • Keep personalisation simple and easy to complete.

  • Provide a clear progression from selection to purchase.

  • Maintain consistency across desktop and mobile experiences.

Feature highlights

01 - Gift card selection

The experience helps customers explore available gift card options and choose the value and design that best fits their gifting needs.

02 - Gift card personalization

Customers can customise the gift card and provide the necessary recipient information before proceeding with the purchase.

03 -Gift card details

Important information about the selected gift card is presented clearly so customers can review their choices before continuing.

04 - Purchase & checkout

The purchase flow brings together the gift card details, recipient information, and payment journey in a clear sequence.


Design Process

Requirement analysis

Flow & wireframes

UI design

Iterations & handoff

Understood the gift card requirements, purchase flow, and business rules.

Mapped the journey from gift card discovery through purchase and confirmation.

Designed the gift card interface, personalization experience, checkout, and responsive layouts.

Refined the designs based on Product and development feedback and prepared them for implementation.

Key learnings

  • A gifting experience needs to make both the product and recipient journey easy to understand.

  • Breaking the purchase journey into clear steps helps reduce cognitive load.

  • Personalization should add flexibility without making the purchase flow complicated.

  • Maintaining strong visual consistency is important when designing experiences for a premium brand.

My role & workflow

Role

UI/UX designer

Workflow

Translated product requirements into a clear gift card purchase flow.
Worked on the information hierarchy, interaction flow, and responsive layouts.
Collaborated with Product and development teams to understand requirements and technical constraints.
Iterated on the designs based on feedback and edge cases.

Delivery

Gift card discovery & selection
Gift card details & personalisation
Recipient information flow
Gift card purchase flow
Checkout & confirmation
Responsive desktop & mobile designs


UX considerations

The gift card experience needed to feel straightforward while giving customers enough flexibility to personalise their gift.

Key considerations included:

  • Make gift card options easy to discover and understand.

  • Clearly communicate gift card values and important details.

  • Keep personalisation simple and easy to complete.

  • Provide a clear progression from selection to purchase.

  • Maintain consistency across desktop and mobile experiences.

Feature highlights

01 - Gift card selection

The experience helps customers explore available gift card options and choose the value and design that best fits their gifting needs.

02 - Gift card personalization

Customers can customise the gift card and provide the necessary recipient information before proceeding with the purchase.

03 -Gift card details

Important information about the selected gift card is presented clearly so customers can review their choices before continuing.

04 - Purchase & checkout

The purchase flow brings together the gift card details, recipient information, and payment journey in a clear sequence.


Design Process

Requirement analysis

Flow & wireframes

UI design

Iterations & handoff

Understood the gift card requirements, purchase flow, and business rules.

Mapped the journey from gift card discovery through purchase and confirmation.

Designed the gift card interface, personalization experience, checkout, and responsive layouts.

Refined the designs based on Product and development feedback and prepared them for implementation.

Key learnings

  • A gifting experience needs to make both the product and recipient journey easy to understand.

  • Breaking the purchase journey into clear steps helps reduce cognitive load.

  • Personalization should add flexibility without making the purchase flow complicated.

  • Maintaining strong visual consistency is important when designing experiences for a premium brand.

Ready to Elevate Your Product Experience ?

Whether you're launching a new product or refining an existing digital product, I'm here to help. Share the details about your project and I'll get back to you to work something out.

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