( Independent Practice / June 2026 to August 2026 )
Zabardast
Designed and built three of the platform's four surfaces end to end, a student app, a merchant validator, and a partner brand dashboard, from a client brand book and a locked 107-feature specification, as a solo engagement with no engineering handoff
- My role
- Freelance UI/UX Designer
- Timeline
- June 2026 to August 2026
- Category
- Consumer Marketplace / Student Verification
- Status
- New design, delivered
Tools Claude Code, Claude Design, React, Vite, JavaScript, CSS custom properties, Figma, dotLottie, Vercel, Linear
Generated schematic, not a screenshot. Real imagery to follow.
( The account )
Context
Student discounts in Pakistan mostly work the way discounts have always worked: hunt for a code, hope it still applies, produce something at the counter that proves you are who you say you are. The friction is spread across the whole experience, and it falls hardest at the moment a student is standing in front of a cashier with people waiting behind them.
Zabardast inverts that. A student proves they are a student once, and after that partner discounts are simply unlocked. No promo codes, no voucher hunting. The product is a members club whose membership happens to be free and whose gate is verification.
The client brought the idea, a brand book, and a locked specification of 107 features across four user types. I designed and built the platform from that: three of the four surfaces implemented end to end, on a design system I took from the brand book into working code and a Figma library that stays in step with it.
The problem
The obvious build is a coupon app, and a coupon app is the wrong product. The positioning brief was explicit that Zabardast should read premium and unhurried rather than loud fintech, and that constraint has teeth, because every convention in the discount category pulls the other way. Urgency banners, countdown timers, exclamation marks, and gamified savings counters are what the category looks like, and each of them would have made this cheaper rather than more desirable.
There was a specific and unusually concrete version of that risk in the brand itself. The palette leads with indigo and yellow, which is the exact signature of the energy drinks the target audience sees every day. Shipped without a third colour doing real work, the product would not have read as a premium platform at all, it would have pattern matched to an energy drink.
The functional problem is that one product has to serve three audiences whose needs barely overlap. A student wants to browse and redeem in seconds. Venue staff want to scan, get a clear yes or no, and move the queue along, with no possibility of the same discount being claimed twice. A partner brand wants to create offers, manage branches, and see whether any of it is working. Those are three different products sharing one data model and one design language.
Verification carries the sharpest edge. The instant path is easy when a student has a recognised university email domain. The manual path asks a young person to photograph their national ID card and student card and hand them to an app they installed ten minutes ago, then wait for a human to approve it. That is the highest-anxiety moment in the product and the most likely point of abandonment, and it is a design problem rather than an engineering one.
What I did
The design system is the spine, and it starts with a strategic colour rule rather than a palette. Pink is not decoration in this product, it is the differentiator that stops indigo and yellow from reading as an energy drink, so it carries the calls to action and the loud half of the brand. Yellow is capped at roughly five percent of any surface and reserved for insider and tier moments, which keeps it as a sparkle rather than a theme. Five colours, three locked gradients at a fixed angle, one display face in all caps for headlines against sentence case body copy, and a motion scale that is deliberately unhurried and never bouncy. The voice follows the same logic: short, declarative, slightly knowing, and never shouting, on the principle that a brand which earned its discount does not need to advertise its enthusiasm.
The three surfaces are built as one monorepo sharing tokens, primitives, and data. The student app carries onboarding, both verification paths, the offer feed with featured and trending browsing, offer detail, and the redemption flow. Redemption generates a time-limited session rather than a code, so what the student shows at the counter expires on its own and cannot be screenshotted and reused. The merchant validator is deliberately the plainest thing in the product: staff log in, scan, and get an unambiguous result, with a manual entry fallback for when a camera fails and atomic validation so the same redemption cannot be claimed twice. The brand dashboard gives partners offer management, branch management with per-branch credentials, a redemption log with export, and an analytics view that answers whether an offer is actually working.
Verification anxiety is handled by making the wait legible rather than by hiding it. The manual path has designed states for pending, approved, and rejected instead of dropping the user into an empty screen, and the moments that would otherwise be dead air carry purpose-built animation rather than a spinner.
Behind all of it, every screen talks to a services layer rather than to data directly, so the entire product runs on mock implementations today and a real backend replaces one seam later without the interface being touched.
Outcomes
- Designed and built three of the platform's four surfaces end to end, a student app, a merchant validator, and a partner brand dashboard, from a client brand book and a locked 107-feature specification, as a solo engagement with no engineering handoff
- Translated a brand book into an enforced design system in code and Figma: five colours with pink as a structural requirement, a five percent cap on the accent yellow, three locked gradients, a display and body type pairing, and an unhurried motion scale
- Identified and designed around a positioning risk in the brand itself, that indigo with yellow reads as an energy drink to this audience, making pink the differentiator that keeps the product legible as a premium platform
- Built three custom Claude Code skills that automate the design and code loop, syncing Figma frames into React, pushing built screens back into Figma behind an explicit gate, and converting animated artwork into wired dotLottie players end to end
- Shipped seventeen authored animation states from fourteen builder scripts, so verification waits and empty screens carry designed artwork rather than spinners, at a scope where that is normally the first thing cut
- Built a redemption model that resists the obvious abuse, a time-limited session rather than a shareable code, validated atomically at the counter so the same discount cannot be claimed twice, with a manual fallback for when a camera fails
- Delivered a fully demonstrable product with no backend by putting every screen behind a services seam, so a real backend replaces one layer without the interface being touched
- Wrote the pre-launch field study that put the project's central risk on the record, that the product had been designed and built without anyone speaking to a Pakistani student, and scoped it to the three decisions still open rather than reopening a locked scope
What I learned
The most valuable thing I contributed was probably a colour rule. Reading the brand book, the risk that indigo and yellow would pattern match to an energy drink was not written anywhere, and it is the kind of failure that never surfaces in review because nobody says "this looks like a soft drink," they just find the product slightly less desirable than expected and cannot say why. Naming that risk turned a palette into a rule with a reason attached, and rules with reasons survive deadline pressure in a way that taste does not.
Restraint has to be enforced structurally or it evaporates. Every individual pressure on this project pushed toward the loud version: the category norms, the launch urgency, the fact that a countdown timer genuinely does drive redemptions. Writing the constraints down as hard rules, a percentage cap on a colour, a fixed gradient set, a motion scale that excludes bounce, is what let the premium positioning survive contact with a locked scope and a deadline. Positioning that lives only in a deck does not.
Building the tooling was worth more than the time it cost. Three surfaces, two Figma files and one person is a configuration where design and code drift apart quietly, and the drift is only discovered when someone needs the design file to be true. Automating the loop, and specifically making the write direction deliberate rather than automatic, is what kept the Figma file worth opening. The gate mattered as much as the automation.
The honest gap is the one the field study names. This product was designed and built without anyone on it speaking to a Pakistani student, and the verification flow, the redemption moment and the premium framing are all reasonable hypotheses rather than validated decisions. The highest-anxiety step, handing over a national ID card to a new app, is exactly the kind of thing where a designer's intuition about reassurance is worth much less than fifteen minutes with an actual user. Writing that down before launch rather than after it was the right call, but it does not substitute for the research, and the study was scoped narrowly because the scope was already locked, which is its own lesson about when research needs to happen.
( Tags )
- Product Design
- UX Design
- UI Design
- Design Systems
- Design Tokens
- Brand Systems
- Consumer App
- Marketplace
- Identity Verification
- QR Redemption
- Mobile-First
- Multi-Surface Product
- Analytics Dashboard
- Motion Design
- Lottie
- Design Automation
- Figma
- Claude Code
- React
- Full-Stack
- Pakistan
- Student Platform