Utang Roulette is a mobile-first web app built with SvelteKit and Capacitor, designed to simulate a playful, arcade-style experience around the culturally familiar act of debt reminders in the Philippines. Users can toggle between two modes — “May Utang” (you owe) and “Nagbibigay ng Utang” (you’re collecting) — and spin a custom-built horizontal roulette that returns randomized, stylized messages.
The project leverages localStorage to track spin history and achievements, with a custom toast system for feedback and an animation sequence built using requestAnimationFrame and easing functions to mimic real-world deceleration. The app is fully offline, deployable as an Android build via Capacitor, and styled using a jeepney-inspired palette and type system to reflect our Filipino street culture.
From design to deployment, I handled everything: interaction design, visual identity, UX flow, and frontend logic. My focus was to reduce friction, so essential actions like the mode toggle were placed directly on the home screen rather than nested in settings — a decision informed by Jakob’s Law.
Components like the spin button and toast notifications were built to be reusable and visually consistent, while the scroll-based roulette mimicked a perya machine to enhance engagement.
This project showcases my skills in modern frontend development, UX thinking, icon and graphic design, and cultural design translation, turning a common local behavior into an expressive, lightweight, and entertaining digital tool.
Ready for Success?
Don’t miss the chance to get a website that truly represents you! Choose a template that suits you or schedule a meeting for a custom design that fits your budget!