CHENGIVATY

Hit me DJ

Driving LTV through Loyalty-Driven UX in a Competitive Market

Driving LTV through Loyalty-Driven UX in a Competitive Market

Role - UX/UI Designer

Agency - Moxie

Client - Dor Alon

Head of UX - Ram Bracha

Head of UI - Avraham OZ

UI designer - Lior Kessary

The Problem

In a saturated market, fueling apps are often perceived as purely "functional tools." Users are driven by immediate convenience or price, leading to zero brand loyalty and underutilized value within convenience stores.

The Goal

01

Transform the app from a functional utility into a rewarding experience to boost User Retention.

02

Increase LTV (Lifetime Value) by making convenience store offers more accessible and relevant, encouraging incremental purchases that enhance the journey.

Key Challenges

The Retention Barrier

How do we give users a reason to return to the app and find value beyond the technical necessity of refueling?

Value-Driven Upselling

How can we offer genuine value in the convenience store so that a driver’s stop becomes more rewarding and efficient?

From Task to Reward

How do we turn the routine (and often mundane) task of paying for gas into a positive process where the user feels recognized and rewarded?

The Process

Research & Discovery

Identifying pain points in the traditional fueling process and mapping the needs of "on-the-go" drivers (convenience, speed, and tangible rewards).

User Journey Mapping

Pinpointing key moments where a relevant benefit can be introduced without disrupting the user's flow.

UX & Flow Optimization

Balancing operational speed with smart, non-intrusive exposure to personalized offers, ensuring value is added without causing friction.

Loyalty Logic Design

Building a Tiered benefit system (Silver, Gold, Platinum) that creates a sense of progression and cumulative value.

The Solution & Strategy

The interactive map empowers users to find the most suitable gas station or supermarket based on their real-time location. By highlighting specific available services—such as EV charging stations or car washes—the interface transforms a routine stop into an efficient, cost-effective, and well-planned experience.

Seamless Integration: From Pump to Points

I streamlined the refueling flow by creating a swift interface for generating and viewing pump codes, minimizing time spent at the station. To build long-term engagement, this frictionless utility is paired with immediate gamified feedback—users receive an instant visual celebration of earned coins and tier progress the moment the transaction is complete, turning a routine task into a rewarding experience.

Data-Driven Personalization

01

Arranging businesses by location and displaying products available specifically at the user's current station (e.g., "Free coffee at your regular stop").

02

Tailoring product recommendations to user preferences based on past purchase behavior.

03

Offering smart coupons derived directly from the user's purchase history.

9:41

9:41

Handoff to Development

The process concluded with a comprehensive spec document, detailing the finest nuances of interface behavior (Behavioral Specs) to ensure the design vision is perfectly implemented by developers.

Style guide

Colours

PRIMARY

White

#FFFFFF

Black

#000000

Dor Alon Dark Green

#00502A

Dor Alon Green

#62BB46

Mint Green

#08AF86

SECONDARY

Yellow

#FFD400

Alonit Green

#62BB46

Light Green

#F7FCF8

Red

#EB1414

Light Red

#FFD6D8

GRAYS

Typography

RAG SANS

Regular, Semi-bold & Bold

א ב ג ד ה ו ז ח ט י כ ל מ נ ס ע פ צ ק ר ש ת

1234567890,.!?

Icons

Component Library

Flexible Input System

To ensure a seamless data-entry experience, we designed a comprehensive set of input states—from active focus to real-time error validation. The system utilizes floating labels to maintain context and clear visual feedback to minimize cognitive load and prevent user errors.

תווית

טקסט

תווית

טקסט

שגיאה

תווית

טקסט

תווית

טקס|

טקסט

הרשמה

הרשמה

ביטול

Streamlined Action Hierarchy

The core buttons are designed to create a clear visual hierarchy and intuitive navigation, reflecting the primary action points within the system. This design provides immediate feedback, minimizes cognitive load, and effortlessly guides users through task completion.

High-Impact CTA Buttons

Designed as the primary action points, these floating buttons use bold iconography and high-contrast visuals to allow for instant recognition. By categorizing the core services—Refueling, Charging, or Hybrid—the interface enables users to initiate their required task with a single tap, streamlining the overall flow.

טעינה

תדלוק

תדלוק

טעינה

Interactive Map Markers

To ensure seamless navigation, I designed map markers that are bidirectionally synced with the content carousel. Each marker features two distinct states: a clean, branded default and an animated "Selected" state with a scale-up effect and a translucent halo. This real-time feedback ensures users never lose context while exploring locations.

Success Metrics & Validation

As the project is currently transitioning from design to launch, the solution's impact will be validated post-launch against the pre-defined UX and business objectives. Key Performance Indicators (KPIs) to be monitored include:

Retention Rate

Tracking the frequency of repeat app usage over time.

Feature Adoption

Measuring the percentage of users actively engaging with the loyalty.

Task Success Rate

Validating the speed and ease of completing the refueling process and redeeming personalized offers.

Note:

Real-world data and insights will be integrated here as they become available, as part of an ongoing process of learning and product optimization.

Next project

Style guide

Typography

RAG SANS

Regular, Semi-bold & Bold

א ב ג ד ה ו ז ח ט י כ ל מ נ ס ע פ צ ק ר ש ת

1234567890,.!?

Icons

Component Library

Flexible Input System

To ensure a seamless data-entry experience, we designed a comprehensive set of input states—from active focus to real-time error validation. The system utilizes floating labels to maintain context and clear visual feedback to minimize cognitive load and prevent user errors.

תווית

טקסט

תווית

טקס|

טקסט

תווית

טקסט

תווית

טקסט

שגיאה

Streamlined Action Hierarchy

The core buttons are designed to create a clear visual hierarchy and intuitive navigation, reflecting the primary action points within the system. This design provides immediate feedback, minimizes cognitive load, and effortlessly guides users through task completion.

הרשמה

הרשמה

ביטול

High-Impact CTA Buttons

Designed as the primary action points, these floating buttons use bold iconography and high-contrast visuals to allow for instant recognition. By categorizing the core services—Refueling, Charging, or Hybrid—the interface enables users to initiate their required task with a single tap, streamlining the overall flow.

תדלוק

טעינה

תדלוק

טעינה

Interactive Map Markers

To ensure seamless navigation, I designed map markers that are bidirectionally synced with the content carousel. Each marker features two distinct states: a clean, branded default and an animated "Selected" state with a scale-up effect and a translucent halo. This real-time feedback ensures users never lose context while exploring locations.

Success Metrics & Validation

As the project is currently transitioning from design to launch, the solution's impact will be validated post-launch against the pre-defined UX and business objectives. Key Performance Indicators (KPIs) to be monitored include:

Retention Rate

Tracking the frequency of repeat app usage over time.

Feature Adoption

Measuring the percentage of users actively engaging with the loyalty.

Task Success Rate

Validating the speed and ease of completing the refueling process and redeeming personalized offers.

Note:

Real-world data and insights will be integrated here as they become available, as part of an ongoing process of learning and product optimization.

CHENGIVATY

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