Recharge and Win Gold
A recharge promo built around a custom 3D gold bar, modeled and animated to feel premium while meeting Liferay’s strict 120KB production asset limit.
- Role
- Senior UX/UI Designer
- Company
- Vodafone Egypt
- Project type
- Gamified campaign
Ownership: End-to-end design and motion ownership: concept, 3D modeling, animation, export optimisation, implementation support, and production QA.
A hand-modeled, hand-animated 3D gold bar delivered within Liferay's 120KB production asset limit
Evidence: Liferay production asset constraint, final production asset, and in-app QA.
Contents
Overview
Recharge and Win Gold is a Vodafone Egypt recharge promo built around a custom 3D gold bar, modeled, textured, lit, and animated from scratch rather than pulled from a stock asset library. Customers who recharge their balance or renew a Flex or Plus bundle earn a chance at gold ingot rewards. The whole promo lives on one compact in-app screen, and the gold bar’s motion is the entire visual hook.
Problem
The promo screen has almost no room for a big visual moment: a title, four recharge method options, and a gifts section, with one small space left for the hero asset. That asset still had to communicate “real gold, premium reward” in a glance.
Vodafone’s platform caps every uploaded animated asset at 120KB for load speed, an extremely tight budget for anything that needs to look metallic and dimensional rather than flat.
Goals
- Make a small, file-size-constrained animated asset still read as premium and valuable at a glance.
- Build the 3D asset in-house, end to end (model, material, lighting, animation), rather than sourcing a stock render.
- Fit the finished, looping animation inside Vodafone’s 120KB platform limit without visibly degrading quality.
- Keep the promo’s recharge and rewards logic (Flex Bundles, Fakka Cards, Balance Recharge, Plus Bundles, My Gifts) simple and immediately understandable.
Business Context
Recharge promos are a recurring, high-frequency format for Vodafone Egypt, which means the visual bar for “does this feel special” resets every time. A generic reward icon does not create urgency to recharge. A convincingly premium, custom 3D asset does, but only if it can actually ship within the platform’s real technical limits rather than existing only as a full-resolution render that never makes it to production.
Research
Constraints
Discovery
Getting a metallic, premium look at 120KB meant the usual path, a high-resolution render with heavy post-processing, was never going to work.
The real design problem was less “how do we make gold look good” and more “how do we make gold look good after it has been compressed far past where most 3D work is expected to survive.”
Strategy
The gold bar was built as its own lean After Effects composition: a modeled and lit 3D asset with a Time Remap track driving a loopOut("pingpong") expression, so the shimmer and rotation loop cleanly forever without a single frame being hand-keyed for the loop itself. Building the loop this way, through an expression rather than manual keyframing, kept the file lean while keeping the motion smooth.
UX Decisions
The gold bar is the first thing seen
Placed at the top of the screen, immediately under the “Recharge and Win Gold” title, so the reward is the first visual anchor on the page.
Four equal, icon-led options
Flex Bundles, Fakka Cards, Balance Recharge, Plus Bundles shown as equal cards, so the path to qualifying for a reward is never ambiguous.
A plain, honest empty state
“No Gifts received yet. Your gifts will appear here” instead of hiding the section until a user has won something, so the reward mechanic is visible and understood before it is ever triggered.
Wireframes
Layout stayed close to Vodafone Egypt’s existing recharge-screen pattern, since the goal was to drop a new, higher-craft hero asset into a proven structure, not to redesign how customers recharge. Most of the iteration happened in the animation itself, not the surrounding screen layout.
UI Design
The screen opens with the “Recharge and Win Gold” title over the animated ingot, followed by a short line explaining how to qualify (recharge balance, subscribe, or renew a Flex or Plus bundle). Four icon cards for the recharge methods sit below, and a “My Gifts” section closes the screen, ready to display a reward once one is earned.
The After Effects project behind the loop: a Time Remap track driving a loopOut("pingpong")
expression, with multiple render passes and export versions showing the iterative work of hitting
the 120KB target.
Motion
The gold bar is the entire motion story here: a rotating, shimmering 3D render, looped through a Time Remap expression rather than hand-animated frame by frame. The After Effects project behind it shows multiple render passes and export versions, real, iterative craft work, not a single AI-generated export, aimed specifically at hitting the look-versus-file-size trade-off the 120KB cap demanded.
Design System
The promo reuses Vodafone Egypt’s existing recharge-screen components (titles, method cards, section headers) and layers the custom 3D asset on top as the one bespoke element, keeping the rest of the screen consistent with every other recharge flow in the app.
Engineering Collaboration
Accessibility
Testing
Technical validation confirmed that the final animated asset played back cleanly, looped without a visible seam, and stayed under Liferay’s 120KB production limit.
Business Impact
Recharge and Win Gold shows that a small, tightly constrained promo surface does not have to mean a low-craft visual. Building the reward asset in-house, at a production-ready file size, meant Vodafone Egypt did not need to compromise between “looks premium” and “actually ships,” a trade-off that a stock asset or an outside vendor would have made much harder to control.
Results
The gold bar animation shipped as a fully custom, in-house-built 3D asset, modeled, lit, and animated from scratch, that fits inside Vodafone’s 120KB platform limit while still reading as a premium, metallic reward.
Videos
There is no separate exported video for this project outside the in-app animated asset itself.
Learnings
A file-size constraint this tight is its own design brief. It ruled out heavier techniques early and forced every decision, model complexity, lighting setup, loop method, export settings, to be made with the final compressed output in mind from the start, not fixed in post.
Reflection
This is a small project by scope but a real proof of craft: producing something that looks expensive inside a budget, in this case a literal kilobyte budget, that would make most off-the-shelf assets fail outright. It is one of the clearest examples in this portfolio of technical constraint driving the design decision, not just the visual one.
Producing something that looks expensive inside a budget, in this case a literal kilobyte budget, that would make most off-the-shelf assets fail outright.