Peggle Social
UX Systems & Art Direction
Balancing Playful Flow with Visual Harmony
I led both the UX flow and visual direction for Peggle Social, defining how players navigate gameplay, rewards, and social features. This system map guided feature design and progression loops. Alongside it, I set the art style—balancing Peggle’s playful charm with a clear, joyful UI language that supported engagement and readability.
Client
POPCAP GAMES
Year
2011
The Challenge
Peggle, the iconic puzzle game from PopCap, gained worldwide popularity for its joyful, physics-based gameplay and memorable audiovisual payoffs. As social gaming exploded in the early 2010s, PopCap aimed to bring Peggle to Facebook—expanding its reach, adding friend-based features, and unlocking new monetization streams.
My Role
Game design and Art Direction
In this project, I led both the UX system design and the art direction for Peggle Social. I created detailed flow maps to define how players engaged with daily challenges, gifting, energy loops, and reward mechanics—building a framework that supported long-term engagement. Alongside the systems work, I established a visual direction that balanced Peggle’s playful identity with clean, social-friendly UI—ensuring clarity, delight, and cohesion across every screen and interaction.
Design Approach
PopCap aimed to bring Peggle to Facebook to tap into the booming social gaming market of the early 2010s. Here’s a short breakdown of why:
Expand the player base: Facebook had millions of casual players who loved light, rewarding games—Peggle was a perfect fit.
Boost engagement through social features: Adding gifting, friend challenges, and leaderboard mechanics helped create virality and daily retention.
Monetization opportunity: Facebook games supported microtransactions, allowing PopCap to introduce in-game purchases like energy refills, boosts, and premium content.
Cross-platform brand growth: It was a strategic move to keep Peggle relevant beyond its original PC and mobile audiences, turning it into a social franchise.
UX Mapping
This UX system map was designed to clearly visualize how core gameplay, progression, monetization, and social engagement loops work together in Peggle Social. As a social platform game, the goal was to keep players returning daily, sharing with friends, and engaging with in-game rewards—without disrupting Peggle's fun and approachable spirit.
Key reasons behind this mapping approach:
Player-Centric Flow: The journey was designed around low-friction entry points, daily reward triggers, and meaningful goal progression—ensuring players felt rewarded early and often.
Social Loop Integration: Gifting, leaderboards, and invite systems were intentionally placed to encourage friend-based competition and virality without being intrusive.
Monetization Moments: Energy systems and in-game currency were embedded where player intent was highest—after success, near-misses, or during wait timers—to feel natural and optional, not forced.
Modular System Design: The flow map was built to allow feature scalability—meaning seasonal events, new levels, or bonus systems could be added without redesigning the core UX.
As Art Director, my focus was not just on aesthetics but also on defining how features connect, when to surface UI prompts, and how to maintain a seamless, emotionally resonant user experience from first click to long-term engagement.
Evolving the Peggle Art Style
Old Peggle Art Style
New Peggle Art Style Concept
Evolving the Peggle Art Style
From Classic Charm to Richer Storytelling Worlds
The original Peggle art style embraced bold colors, simple forms, and whimsical charm—perfect for its time and platform. However, as we reimagined Peggle for a socially connected Facebook experience, we saw an opportunity to deepen visual storytelling and player immersion.
To support this shift, I directed a new art style that retained Peggle's vibrant spirit but introduced:
More atmospheric depth through lighting, color gradients, and layered scenery
Storybook-inspired environments to hint at character backstories and quest progression
Stronger visual hierarchy to guide player focus in a more complex UX system
This new style allowed us to scale the worldbuilding, support narrative-driven events, and keep Peggle feeling fresh for a new generation of players—without losing its original sense of joy and approachability.
The Magic World - Peggle
Bringing Visual Consistency to a World of Diverse Themes
Peggle’s gameplay spans many fantastical environments—from enchanted forests to candy worlds, cosmic landscapes to fairytale meadows. To ensure these diverse settings felt part of a single, cohesive universe, I led the development of a visual language that connected them through core artistic principles and shared emotional tone.
Key decisions in the art style setup included:
Lighting & Mood Unity: Each world uses a soft, painterly light source—often magical or atmospheric—to create emotional warmth and consistency across scenes.
Believable Depth: The environments blend stylized exaggeration with believable depth. This allowed us to push imagination while keeping scenes readable and immersive.
Color Cohesion: A vibrant but controlled palette tied all themes together. Even candy or sci-fi worlds retained a similar saturation range and temperature flow.
Shape Language: Rounded, flowing forms appeared across landscapes and objects—helping everything feel playful and friendly, even in darker or surreal levels.
Material Consistency: Whether it was bark, candy, or stone, we used consistent rendering styles—soft edges, brushed highlights, and gentle gradients—to anchor the look.
This style foundation allowed us to support narrative variety without visual chaos—building a game world that felt magical, unified, and unmistakably Peggle.
Background Readability & Depth
To ensure Peggle’s bright, colorful pegs stood out clearly across all themes, I introduced a high-contrast visual treatment to background art. By increasing tonal contrast and simplifying mid-ground noise, we achieved two goals:
Improved Peg Clarity: Vibrant pegs pop more effectively against strong light/dark contrast, enhancing visual focus during gameplay.
Stronger Graphic Identity: Stylized lighting and contrast helped backgrounds feel bolder and more iconic, reinforcing Peggle’s playful brand.
Increased Depth: The tonal structure gave scenes a stronger foreground-background relationship, improving depth without visual clutter.
This approach balanced artful storytelling with practical UX, helping each level feel rich and readable in the fast-paced play environment.
Designing Backgrounds to Enhance Peg Readability
To ensure Peggle’s bright pegs stood out, we built a visual process focused on contrast, flow, and modular layering:
Start with Peg Layout: Backgrounds were designed around peg positions to support gameplay and guide visual flow.
Test with Color Blocks: Early gradients helped us fine-tune contrast, ensuring pegs stayed readable across scenes.
Shape and Depth Pass: We used large shapes and tonal contrast to add depth without visual noise.
Layered Final Art: Backgrounds were built in layers—base, color filter, and foreground—so we could quickly adjust mood and clarity without reworking entire scenes.
This process kept visuals rich and playful, while always supporting peg visibility and game readability.
Reflection
Leading the visual and UX direction for Peggle Social was a rewarding challenge in balancing playability, brand charm, and system complexity. It pushed me to think not just like an artist, but as a player advocate and product strategist.
I learned how to:
Design environments that are both beautiful and functional under gameplay constraints
Build visual systems that scale across themes while maintaining a consistent tone
Collaborate closely with engineers and game designers to align visual logic with system behavior
Guide a creative team with clarity—using style guides, layered workflows, and visual benchmarks
This project sharpened my ability to unify aesthetics and systems, and it reinforced the value of clear art direction when building joyful, scalable game worlds.