INDUSTRY:
Energy / Loyalty App
CLIENT:
TotalEnergies Maroc
YEAR:
2026
EXPERIENCE:
UX Research · UX/UI Design · Design System · Prototyping · UX Writing · Information Architecture
TotalEnergies Maroc — Your Intelligent Loyalty Companion
about.
TotalClub is TotalEnergies Morocco's loyalty app, designed to help drivers (18–55) earn points at every fill-up and redeem them directly at the station, on their phone, or through charitable donations. Instead of a passive points card — users scan, track, transfer, and spend everything through one mobile interface connected to the TotalEnergies ecosystem.
challenge.
The main challenge was redesigning a loyalty app that feels genuinely rewarding without being confusing, inconsistent, or visually overwhelming — and that motivates Moroccan users enough to scan after every single purchase.
Key problems identified:
Registration friction 8 fields on a single screen with no progress indicator causes high drop-off before sign-up completes
Abstract point value "6,705 Points" with no MAD equivalent removes all motivation to accumulate or redeem
Color chaos red, vivid blue, lime green, and cyan used simultaneously with no semantic token system or visual hierarchy
Broken information architecture station finder buried in a hamburger menu, the same feature named differently in two places
Vague CTAs "Convert · Pay, top up, or donate" packs three unrelated actions into one label, violating the single-action principle
No failure coverage the app's most-used flow (scanning a receipt) had zero error states, no manual fallback, and no torch toggle
results.
Redesigned theregistration flow into 3 progressive steps— Identity · Contact & Security · Referral — reducing cognitive load and drop-off
Built apoints balance cardwith real MAD equivalent, last-transaction context, and a "View detail" CTA to drive engagement
Created arestructured navigation system— 5-item pill nav with a centered red FAB for scanning, replacing the original 4-item bar
Developed acomplete design system— 50+ components, 4px spacing grid, TE Red brand palette, semantic color tokens, WCAG-compliant
Shipped14 high-fidelity mobile screenscovering the full user flow from onboarding to support
Designed afull scanner flowwith 6 states — success, 5 error types with cause and resolution, manual code entry, and torch toggle
Delivered a14-page UX Writing guide— every screen's headings, labels, CTAs, error messages, empty states, and push notifications
