Overview
The brief, in full
The goal: build a dedicated React Native app for Faces — not a port of the website — giving customers a faster, more personal mobile shopping experience with app-exclusive discounts and native MUSE loyalty integration.
Platform
React Native CLI, iOS & Android, shared codebase
Core Tech Stack
BNPL Integrations
Analytics & Monitoring
Brand / Client
Faces · Chalhoub Group · UAE, KSA, Egypt
Key App Features
Development Process
How it was built
A deliberate, phased approach — from discovery through to staged GCC rollout — with the MUSE loyalty experience and app-exclusive offers as the north star.
01
Discovery & Planning
Mapped the core user journeys for the app: browse by category and brand, PDP, app-exclusive offer surfaces, loyalty redemption at checkout, and order tracking. Reviewed existing app store feedback to understand what customers wanted from a dedicated beauty app. Aligned on the primary value proposition with stakeholders: a better mobile experience and app-exclusive discounts as the install driver.
02
Architecture & Project Setup
Chose React Native CLI for full native module access — required for Tamara, Tabby, Datadog RUM, and Adjust. Structured the TypeScript project with Redux Toolkit for global state (cart, wishlist, loyalty balance, session) and RTK Query for the SFCC API layer. Defined a multi-region runtime config for UAE, KSA, and Egypt with separate currency, locale, and BNPL eligibility rules.
03
Design System & RTL
Built a mobile-native design system for Faces: clean white surfaces, bold black headings, the Faces rose-gold accent, and a card-based product grid optimised for touch. Every component was built RTL-first using I18nManager.forceRTL and a custom useRTL() hook, ensuring Arabic layouts work correctly across carousels, navigation, and checkout without conditional hacks.
04
MUSE Loyalty Integration
Integrated the MUSE loyalty programme as a first-class feature: live point balance in the header, tier progress bar on the profile, inline point preview on PDP and cart, and one-tap redemption at checkout. Built a dedicated loyalty state slice in Redux, synced against the SFCC loyalty API, with optimistic updates for point redemption to eliminate perceived latency.
05
BNPL, Analytics & Attribution
Integrated Tamara and Tabby SDKs with per-market eligibility rules. Instrumented full observability: Datadog RUM for session replay and performance, Firebase Analytics for funnel events, Firebase Crashlytics for crash reporting, Adjust SDK for attribution and deep links, and Quantum Metrics for session heatmaps and rage-click detection.
06
QA, Localisation & Rollout
QA across 20+ device and OS configurations. End-to-end RTL verification for all checkout and loyalty flows in Arabic. Gift With Purchase rules tested across all active promotions. Staged rollout starting in UAE, monitored via Datadog dashboards and Adjust attribution, followed by KSA and Egypt expansion.
Integrations
The full technical stack
Every integration chosen to support Faces' specific requirements — GCC BNPL, loyalty programme, real-user monitoring, and session analytics across three markets.
Tamara
3-instalment BNPL across UAE, KSA, and Egypt. Integrated with per-market eligibility rules and instalment previews on PDP, cart, and checkout.
Tabby
4-instalment zero-interest BNPL. Surfaced alongside Tamara with live split-payment widgets throughout the purchase flow.
Datadog RUM
Real-User Monitoring with session replay and JS error tracking. Custom view instrumentation wired to React Navigation events.
Firebase Analytics
Full funnel tracking across browse, PDP, loyalty redemption, and purchase. Powers audience segmentation across three markets.
Firebase Crashlytics
Real-time crash and ANR reporting enriched with region, device model, and app version for fast triage.
Adjust SDK
Mobile attribution and deep-link handling across UAE, KSA, and Egypt. Tracks installs, re-engagements, and campaign revenue.
Quantum Metrics
Session replay, heatmaps, and rage-click detection. Used to identify UX friction in the loyalty redemption and checkout flows.
SFCC REST API
Salesforce Commerce Cloud backend powering products, cart, checkout, loyalty, and account via a typed Axios service layer.
Redux Toolkit + RTK Query
Global state for cart, wishlist, MUSE loyalty balance, and session. RTK Query for cached, typed SFCC API calls with optimistic updates.
Shopping for beauty should feel as good as the products themselves. The app makes browsing 100+ brands effortless.
Reflection
What I learned
Key Decisions
Treating MUSE loyalty as a first-class feature — not an afterthought — was the most impactful architectural decision. Building a dedicated loyalty Redux slice that synced on every cart change meant users always saw accurate point previews inline, which directly drove redemption. RTL-first component design saved weeks of rework that would have come from retrofitting directionality post-build.
- App-exclusive discounts as the primary install and retention driver
- Loyalty state slice built from day one, not bolted on later
- RTL-first components using useRTL() hook, no conditional layout hacks
- React Native CLI for full SDK access across all integrations
Challenges Overcome
MUSE loyalty redemption rules were the hardest business logic to get right: points have minimum thresholds, brand-level exclusions, and promotion-stack limits that vary by region. Building a unified eligibility resolver exposed a clean interface to the UI without leaking backend complexity. RTL Arabic also required custom wrappers for every third-party component that assumed LTR by default.
- Loyalty eligibility resolver handling brand exclusions and regional rules
- RTL wrappers for all third-party carousel and navigation components
- Quantum Metrics + Datadog RUM used together to pinpoint checkout drop-off
- GWP promotion logic tested across all active campaign combinations
What I'd Do Differently
I'd push harder for a personalised recommendations layer earlier. With 100+ brands and thousands of SKUs, surfacing the right product at the right moment — based on purchase history and loyalty tier — would meaningfully improve session depth. The Layla AI beauty assistant Faces later introduced validates exactly that direction.
- AI-powered recommendations by brand affinity and loyalty tier
- Native push notification campaigns tied to app-exclusive offer windows
- Per-market Datadog dashboards configured from pre-launch
- Deeper A/B testing on app-exclusive discount placement and formats
