.webp)
Showing a skull that tells you you lost on the wheel could put people off buying.
There were few purchases
Spin App let users spin a wheel for a reward before paying for a top-up. I knew there were few purchases.
But: I didn't have the data
I didn't know it from data: it was just intuition. (I know, in UX there's no intuition, there's user feedback.) The back-end developer was the one with access to those numbers.
So: the wheel comes after paying
Flipping the flow was my idea: the wheel, after paying.
I based it on conventions already established in similar apps, which were part of my research, to see if we could attract customers from the competition and keep the learning curve gentle.
Before
Spin, then payOpen App → Spin the Wheel → Top Up
- The user spins before buying.
- A skull for a loss could put them off buying. This was my hypothesis, without data.
After
Pay, then spinOpen App → Top Up → Payment confirmed → Spin the Wheel
- The user spins after a confirmed purchase.
- Every spin wins something: cashback, points, or double recharge.
The brand and the screens
Brand Evolution
The original brand used clashing neon colors. I made a calmer palette that still feels playful, and a logo that suggests movement.
UI Evolution
I replaced the cluttered list view with cards. "Top Up" is the most visible action. The country code is filled in from the contact's number, which removes one step from every transaction.
The test: 3 people
I tested it with 3 people. One is a developer with deep knowledge of ergonomics, accessibility and UX, who gave me the green light. The other two, also developers, went through the flow in the Figma prototype.
What I would have measured
The purchases made, how many users came back and how often, and how long they spent on each screen (if possible).
In UX there's no intuition: there's user feedback.
Project Gallery
The final screens and a promo video made for the redesign.
