Splitting the bill is often the most awkward part of a fun night out. It feels transactional and cold. My challenge was to inject personality into this dull utility app turning a boring calculator tool into a playful, 'toy like' interaction that diffuses the tension of asking friends for money.
My initial audit of the live app revealed a cognitive bottleneck. Users were getting lost in a wall of text. I didn't just clean up the spacing, I rearchitected the visual hierarchy. By establishing strict typographic rules, I guided the user's eye instantly to the only thing that matters: How much do I owe?
Mockup and Colour Exploration
The Client approved the style. The direction and the final designs were taking place.
Breaking the habit of blue and white coloured banking apps, I pivoted to a tactile child like aesthetic. I chose bold, primary colors reminiscent of physical blocks or toys. This wasn't just for style but a distinct, high contrast function that consists of blocks as clear zones for different users, making the mental math easier to process visually.
I created a custom motion signature to bridge the gap between the brand name and the product function. The loading animation consists of the screen splitting in half, further emphasising the function of the app and the bill being split.
Delivered in a rapid 5 day sprint, the refreshed UI transformed a bare bones utility into a brandable product. The client adopted the new design system immediately, noting that the toy like aesthetic made the app feel approachable rather than purely transactional.
