Intro
&U is designed to help users earn rewards effortlessly while building long-term brand loyalty. When the project started, we had almost nothing: no existing product, no marketing tone, and no user research. The only clear input was the audience.
In just 6 weeks, I was responsible for designing a complete app and website from scratch, transforming uncertainty into a seamless, modern experience that works both in-store and at home. The goal was not just to create another loyalty app, but to design something users would actually keep, trust, and enjoy using, while also supporting business growth and data-driven decision making.
Outcomes & Impact
Clear cashback value proposition, fast onboarding, reduced friction at earning/redemption moments, stronger emotional connection with users, and a scalable loyalty foundation for GMG.
✅ 20,000+ downloads in the first month
✅ 4.5 of 5.0 overall users’ rating on Google and Apple reviews
✅ 92 UI bugs caught in the first QA round — my front-end background at work.
My Approach & Process
Step 1: AI-Assisted Research
With no internal data and no one able to brief me properly, I turned to Claude and ChatGPT to run
structured research fast. What makes loyalty apps fail? What do users actually struggle with? The
answer was consistent across airlines, retail, and hospitality: apps were too complex to understand,
too hard to redeem, and opaque about how points were calculated. The gap was clear; simplicity
was the product.
Step 2: Competitive Analysis
I screenshotted and analysed competitor apps Blue, Share, and loyalty programs from major
airlines and retailers to understand usability patterns, visual conventions, and what users were
already familiar with. This gave me a baseline for what to follow and what to deliberately do
differently.
Step 3: Flow + Moodboard Combined
Rather than building a flow and a moodboard separately, I combined them into one document. For every
step in the user journey onboarding, OTP sign-in, home, wallet, redemption, I pasted visual
references alongside the logic. I presented this to developers first, before any wireframes. Aligning
them on both the flow and the intended feeling early saved weeks of back-and-forth later.
Step 4: Wireframes + Guerrilla Usability Testing
I moved quickly to low-fidelity wireframes and ran guerrilla testing inside the company with real loyalty
app users. Key finding: users strongly preferred QR codes over barcodes; it felt faster and more
modern. I updated the design accordingly. Then reality hit: the existing in-store hardware didn't
support QR across all locations. We reverted to the barcode. A hard call, but the right one. This was a
real lesson: user preference and technical feasibility must be validated together, not separately.
Step 5: Design System from Scratch
With no brand guidelines for the app, I built the foundation before any screens. Typography selected
from Google Fonts chosen for Gen Z tone, device compatibility, and warmth. Color shades built
manually in Figma from the two brand colors. A full component library covering spacing, grid, and UI
patterns built once, used across every screen, in both RTL and LTR.
Step 6: Marketing Sign-Off
Before going into full design, I presented early screens to the marketing team, "the brand owners". They approved the font direction and visual language. That sign-off was critical. It meant I could move into the full design sprint without the risk of a late-stage rebrand.
Step 7: Page-by-Page Design + Prototype
With the system in place and sign-off secured, I designed the full application screen by screen, following the wireframe structure I'd already aligned on with developers. I layered in micro-animation and transitions to give the app personality without adding complexity. The goal was an experience that felt as smooth as it looked.
Why It Works
Built around real users' pain points: automatic earning, fast redemption, personalization, and modern micro-interactions, not just points.
Good collaboration between teams helped build the product, which performed excellently.
What Didn’t Work
The QR vs barcode situation was avoidable. I validated user preference before validating technical feasibility; those two things should happen in parallel, not in sequence. Next time, I'd bring the tech team into usability testing earlier so we're not designing toward something the infrastructure can't support.
I'd also push for the stakeholder alignment session on day one, not day three. The most valuable design work I did on this project happened before I opened Figma, and I'd protect that time more aggressively from the start.
Team
Me as a Senior Product Designer
Moazeem as Product Manager
Tahir & Chetan as Tech Leads
Omar as Project Manager
Rawan and Omar as Creative Leaders
