Yuby

Yuby was Union Bank's app for kids and families. The core idea: give kids a real sense of what saving money means, before they have a real bank account. The app tracked a child's running balance, let them set up chores with allowance amounts, and added a wish list so there was always something concrete to save toward.

I built this at Mutual Mobile, the agency that designed and shipped the app for Union Bank. It was a Webby Award nominee in 2015.

• Multi-profile home. Each child got their own profile with a personalized color theme, chosen from nine palette options. Switching profiles was a single tap from the home screen.
• Chores and allowance. Parents set up recurring chores with associated amounts. Kids could see their pending chores, check them off, and watch the balance update.
• Wish list with visual progress. Kids added items they wanted to save for: a game, a toy, whatever. The wish detail view showed a stacked-bills visualization filling up toward the goal price, plus a calculated time-to-goal based on their current allowance rate.
• Deposit and withdraw with parent approval. Kids could request to put money in or take it out, but the transaction routed through a parent-approval screen before it hit the balance. The parent mode was PIN-protected.
• Make it Rain. Shake the phone to trigger an animated shower of money raining down the screen. Triggered by the accelerometer, complete with a coin-drop sound. Small feature, memorable moment.
• Sound design throughout. Every major interaction had a custom sound: tap confirmations, deposits, swipe transitions, the shake-to-rain trigger. Implemented with Howler.js for reliable cross-device audio.
• Coach marks onboarding. First-run experience used an overlay coach marks layer to walk kids through each section before they hit the actual content.

• Offline-first architecture. The app ran entirely on-device with localStorage persistence. Every model wrote to localStorage on change, read from it on init. No backend calls required at runtime. That kept latency out of every interaction and made the app feel genuinely instant.
• Lavaca MVC. Mutual Mobile's internal AMD/RequireJS JavaScript framework, built on Backbone-like patterns with Dust.js templating. I worked across controllers, views, and models in this codebase.
• Theme system. Nine color palettes, each defined as a LESS mixin applied dynamically at runtime based on a CSS class on the body. Switching themes was a class swap: the mixin covered every component from headers to buttons to the PIN dots.
• Parent-gated flows. The deposit and withdraw approval flows, and the entire parent settings section, sat behind PIN entry. The PIN model also carried a security question fallback, with setup, verification, and reset flows all built out.
• Shake gesture. The "Make it Rain" feature listened to window's shake event from a custom shake detection library. The state model carried the event across to the RainMoneyView layer, which rendered a shower of animated <i> tags as coins.
• Cordova hybrid. Same challenges as the BSX Insight era: everything was DOM and CSS under UIWebView, which meant custom scroll regions, Hammer.js touch handling, and careful memory management on a platform that did not forgive leaks.