Piggy Bank | Tomer Shafir Site

Breaking the Bank: UX\UI OPA!

What I Did: UX/UI & Monetization, AI Mapping & Weavy Design

Long story

Short

Mobile games struggle with low retention and conversions. I designed OPA!’s 'Piggy Bank'—a progression loop where players fill a shared vault by clearing levels. Using AI for logic mapping and Weavy for clan-chat, we turned a standard mechanic into a high-satisfaction social
conversion engine.

The Problem

Describe the product here. Include important features, pricing and other relevant info. Consider adding an image or video of the product.

The Opportunity

Describe the product here. Include important features, pricing and other relevant info. Consider adding an image or video of the product.

Player Types & Audience Section

Primary audience: existing OPA! players with mid-to-high engagement
Secondary audience: new players needing a clear progression indicator

Core needs:

A simple, rewarding goal to work toward
Visual feedback that feels meaningful
A reason to continue playing after each round
A purchase moment that feels “earned”

Core Loop / Behavioral Motivation

Primary audience: existing OPA! players with mid-to-high engagement
Secondary audience: new players needing a clear progression indicator

Core needs:

A simple, rewarding goal to work toward
Visual feedback that feels meaningful
A reason to continue playing after each round
A purchase moment that feels “earned”

Core Loop / Behavioral Motivation

Player Flow

UX priorities:

Keep the feature accessible from the game screen
Make the piggy state clear at all times
Ensure the breaking moment feels big and emotional
Present purchase prompts at the most motivated player state

UX Principles
& Decisions

High visibility: Piggy progress is always visible to the player
Emotional reward: Breaking the piggy needed to feel dramatic
Motivation psychology: Using expectancy + progress bar + delayed reward
Minimal friction: 1 tap to break, 1 tap to collect
Monetization moments: Offers appear only at high-motivation peaks

Wireframes

These defined the structure before visual exploration.

Step 1:

Onboarding Popup

Sets player expectations through a clear 3-step explanation (Spend – Fill – Break), utilizing a simple, icon-based layout to maximize interface clarity.

Step 2:

In-Game Progress Prompt

Displays the real-time filling status so players can seamlessly monitor value growth without distraction.

Step 3:

Break Trigger

Prompts the player at a peak-action moment with a "piggy is full!" alert, using dynamic animation as positive reinforcement to drive excitement.

Step 4:

Purchase Offer

Final screen designed for clarity and quick decision-making.

Reinforces reward with numeric boost (x5 gems) and fixed pricing.

Visual Exploration & AI Tools

I used Weavy + Photoshop to explore multiple piggy styles, materials, cracking effects, seasonal variations, and lighting atmospheres, refining them manually to maintain UI clarity and fit the OPA! experience.