Headquarters
Philidelphia
Founded
2022
Industry
Online gaming
Revenue
$10 Million (2023)
Company size
20
Challenge
Existing digital marketing platforms lacks simplicity & ease of use to effectively re-engage and build strong relationships with users. Time Consuming campaign setup, that requires developer for every change & it was super hard to track & visualize performance
Results
Post-redesign, LTP increased with a 16%, App time reduced to 30% That resulted in faster app . The streamlined & Modular layout resulted in 30% increase in meta discovery
+20%
Improvement in d3o users retention
+5%
Improvement in players LTV
Project Timeline
The Snapyr redesign began in August 2023 with alignment workshops and product research. Over the first 8 weeks, we mapped core flows and delivered the Canvas MVP to define the drag-and-drop experience. By October, we hit the Pilot Demo milestone, validating early interactions. The next phase focused on building the Full Canvas, refining logic blocks, and developing a modular design system. In the final stretch, from November to January, we ran MVP Testing, resolved edge cases, and delivered polished specs and marketing assets ahead of GTM.
Design Process Adopted
We followed a user-centered, iterative design process starting with research and audits, moving through wireframes and visual exploration, and ending with prototyping, testing, and final handoff. Each phase prioritized usability, scalability, and business alignment..
STEP 1
Empathise
We began by deeply understanding Snapyr’s product vision, business goals, and user needs. Through stakeholder interviews, team workshops, and async research sessions, we gathered insights into pain points faced by marketing teams using legacy campaign automation tools. We also analyzed competitor workflows to identify usability gaps and friction in existing solutions. These efforts helped us define our primary user personas and shaped the foundation for a more intuitive, modular campaign-building experience.
User research
Key Learnings
Top Comments
Most repeated during the interview
STEP 2
Define
In the Define phase, we translated research findings into clear, actionable problem statements. After identifying pain points and categorizing feedback, we synthesized insights into structured themes, shaping user personas, mapping workflows, and pinpointing opportunity areas. This phase provided the strategic focus needed to align the team and guide ideation with clarity and intent.
Personas identified
We distilled research into three core personas: the Org Manager (oversees strategy and governance), the Campaign Manager (builds and runs campaigns), and the Tech Admin (manages integrations and system setup). These personas shaped our design priorities and clarified user goals across workflows.Ask ChatGPT
Personas identified
Frustration was common early in each journey—Org Managers felt disconnected, Campaign Managers overwhelmed, and Tech Admins burdened by setup. As we redesigned the experience, their moods shifted toward clarity, confidence, and control.
Final Goals
Frustration was common early in each journey, Org Managers felt disconnected, Campaign Managers overwhelmed, and Tech Admins burdened by setup. As we redesigned the experience, their moods shifted toward clarity, confidence, and control.
Feature Prioritisation
To align user needs with business impact, we used a prioritization matrix that mapped features based on user value and implementation effort. This helped us focus on high-impact, low-effort features first—like no-code logic blocks and quick workspace setup—while deprioritizing complex backend requests that offered minimal short-term value. The matrix ensured clarity, alignment, and faster decision-making across teams.Ask ChatGPT
STEP 3
Ideate
We ran extended whiteboard and working sessions with product, design, and engineering teams to brainstorm solutions. These collaborative discussions helped us define the high-level user flow and key interactions for the campaign builder experience.Ask ChatGPT
Deploy Fast, Fail Fast. Move Fast
If you are not embarresd by the first version of your product. You’ve launched too late
Reid Holfman
Co- Founder of Linkedin
Market Study
We analyzed leading tools like HubSpot, Mailchimp, Braze, and CleverTap and found them to be form-heavy, technical, and visually dry. In contrast, we drew inspiration from playful, intuitive platforms like Scratch and Blockly to reimagine Snapyr as a visual, approachable, and fun-to-use campaign builder.Ask ChatGPT
Detailed IA & Process flow Maps
We created comprehensive information architecture and flow maps to visualize every step across user roles. This helped align the team on system structure, edge cases, and key decision points—ensuring a smooth and scalable user experience.Ask
Wireframing
We created low-fidelity wireframes to define the core layout, logic flow, and interaction patterns of the campaign builder. These wireframes helped us validate structure early and align quickly with stakeholders before moving into visual design.
Blocks Structure
Snapyr’s core experience was built using a modular block-based system each block representing a key campaign element like triggers, audience, conditions, splits, and actions. These blocks could be dragged, nested, and connected visually, allowing users to build complex workflows without writing code. This structure made campaign creation intuitive, flexible, and scalable.
Challange 1
During implementation, the curved node connectors in Snapyr’s block design caused major friction for developers. The design tool (Adobe XD) did not support exporting precise radius values for organic, freeform curves, making it nearly impossible to replicate the paths programmatically.
Challange 2
While the initial design featured visually rich, 3D-style blocks to enhance depth and delight, they posed serious implementation constraints. Despite aligning with the brand’s playful tone, the layered shadows, gradients, and lighting effects couldn’t be rendered accurately using standard CSS without compromising performance or consistency across browsers. We eventually pivoted to a flatter, cleaner visual style retaining clarity and usability while ensuring smoother development and scalability.
STEP 4
Design
With structure and flows validated, we moved into high-fidelity design. We defined visual language, built a scalable design system, and applied consistent styling across all blocks and interface elements. Accessibility, responsiveness, and dev handoff were baked in from the start to ensure smooth implementation.
Detailing Out blocks
Each block was carefully designed to represent a specific campaign function, Trigger, Audience, Conditions, Split, and Publish. We defined clear visual hierarchies, consistent spacing, and interaction states for every block type. Special attention was given to nesting logic, contextual menus, and hover behaviors to ensure clarity and ease of use in complex workflows.
Blocks Chemistry
Snapyr blocks were designed to work like puzzle pieces, each with defined entry and exit points that guide the user through building logical flows. Trigger blocks initiate actions, audience blocks filter users, and condition/split blocks allow branching paths. Together, they form a visually connected, modular system where each block’s placement determines the sequence and logic of the campaign making even complex setups easy to build and understand without code.
Campaign Builder
After finalizing the block designs, we brought everything together to build the full campaign builder interface. We defined key interactions like dragging, dropping, snapping, and deleting blocks to make the experience feel smooth and intuitive. The result was a flexible, visual workspace where users could create complex campaigns with ease no code required.
Detailed Blocks Anatomy
To streamline the handoff process, I created detailed documentation for each block's anatomy—covering structure, spacing, padding, icon behavior, text limits, hover states, and edge cases. Every interactive element was annotated and developer-ready, ensuring clarity and reducing back-and-forth. This became a single source of truth that helped the engineering team implement blocks with precision and confidence.Ask ChatGPT
Lets connect to discuss more on this
Feel free to explore the Figma file below to get a sense of the depth and detail in this project. Or we can connect to discuss rest in person.
Time to create some
mastrerpiece together
