tato.

Tato-004 · Case Study · Mobile Game · 2016

Pitching the look of
Splashy Cats

Early concepts based on their "programmer art" for a voxel art style endless hopper about cats who, despite the title, really don't want to get wet. Early concept art even called it "Cats Don't Swim." Shipped on the App Store by Artik Games.

Role: UI/UX Designer Tool: Illustrator Tool: Photoshop Year: 2016
↓ Begin the tour
—

Overview

Before a single production asset got built, the visual direction had to be sold internally. Rather than argue in the abstract, I built side-by-side comparison decks — an intentionally rough "before" next to the proposed "after" — for the three places a player spends the most time staring at UI: picking a character, reading the HUD, and buying something in the store.

I.

Character Selection

The pitch deck called it "Feo vs. Lindo" — ugly vs. cute. Same layout, same silhouettes standing in for locked characters, same "New Top" score banner. The only thing that changes is whether the cats look like something worth unlocking.

Final character-select screen with Tough Cat, Ninja Cat, and Frankencat, each with a TRY button and current score of 24
Shipped screenThree try-before-you-commit characters front and center, with the run's score and currency always visible above.
Proposed character-select screen: colorful hand holding a phone showing Tough Cat, Ninja Cat, and Frankencat with TRY buttons Rough baseline character-select screen: grayscale hand holding a phone with locked character silhouettes and no personality Before After
II.

HUD & Menu Icons

The baseline icon set was placeholder text in boxes — functional, forgettable. The proposal swapped it for a single pixel-art icon language (along with the optional non-pixelated version too) shared across every button in the game: settings, delete, play, share, record, and rate, all reading at a glance.

Final pixel-art button sheet with settings, delete, play, share, record, and rate icons in large and small sizes
Final icon sheetOne shape language at two sizes covers every button in the game — large for primary actions, small for the HUD corner.
Proposed pixel-art icon set: magenta and purple buttons for settings, delete, play, and share Rough baseline icon set: plain text buttons reading Options, Delete Data, and outline glyphs for play and share Before After
III.

Store

Same argument, applied to the item the store is actually trying to sell. Silhouettes and flat swatches don't move a $0.99 purchase; a character in mid-roar with a price tag and a legend row of who's already unlocked might.

Final store screen for Cat Vader Epic, priced at $0.99 or 200 gold, with a grid of legendary characters below
Shipped screenThe character being sold is the hero of the screen — everyone already unlocked sits below as proof of what you're building toward.
Proposed store screen: Cat Vader Epic item card priced at $0.99 or 200 diamonds, with a legend row of unlocked characters below Rough baseline store screen: grayscale hand holding a phone with color swatches and locked character silhouettes Before After
IV.

Marketing

A few of the screenshots built for the App Store page, each one leading with a single clear promise: swim, collect, or spend.

App Store screenshot: cat riding a log down a river with the Splashy Cats logo overhead and a Tap prompt
"Who said cats can't swim?"
App Store screenshot: Action Cat Epic reveal card glowing with sparkles above the text Win Epic Prizes
"Win epic prizes"
App Store screenshot: grid of over thirty playable characters including Darth Vader and Guy Fawkes parody cats
"More than 30 playable characters"
—

What this demonstrates

Not every design argument needs a mood board. Framing the pitch as three concrete before/after screens — the exact screens the team would ship — made the direction easy to approve and easy to hold everyone to later.

Next projects