PUGPIG
MY ROLE
UX Lead - Interaction Design, Visual Design, Usability Testing, Rapid Prototyping
DELIVERABLES
User Research
Component Libraries
High Fidelity Designs
TEAM
Product Managers
Developers ( Web & Android)
Web Developers
YEAR
2023
Fintech was my comfort zone. Designing financial products meant optimizing for precision, efficiency, and trust. Every pixel had to earn its place. But content? Content was fluid, unpredictable, and emotional. Moving from fintech to Pugpig was like stepping from a high-stakes trading floor into a lively newsroom, where stories, engagement, and accessibility ruled.
I had to unlearn rigid structures and embrace flexibility. Instead of driving conversion rates, my new challenge was to design experiences that captured attention, sustained engagement, and scaled across media brands. The goal? To help publishers thrive in an evolving digital landscape while ensuring their content reached the right audience in the most intuitive way possible.
Pugpig powers a wide range of digital publications, each with its own brand identity and audience. While our platform provided a solid foundation for publishing, clients needed more control over customization without compromising on usability, consistency, or performance.
We faced a key challenge:
How do we create a scalable design system that allows publishers to maintain their unique brand identity while keeping a unified and structured UX?
How can we make customization accessible to non-technical users, reducing dependency on developers?
How do we ensure that every customization choice still aligns with best practices in UX and performance?
The solution? The Pugpig Design Kit—a flexible, modular system that gives publishers the power to tailor their apps while maintaining structural integrity.
Before designing the kit, we engaged in deep discovery work with our clients:
Client Workshops & Interviews: We spoke with content teams, designers, and developers to understand their workflows, pain points, and customization requirements.
Customization Audits: We analyzed how different brands modified their existing Pugpig apps to identify common patterns and challenges.
Competitive Analysis: We studied other CMS-driven platforms to ensure our design kit provided a balance of flexibility and structure.
From this research, we found that clients typically wanted three levels of customization:
Branding & Theming – Ability to apply colors, fonts, and logos.
Layout & Component Adjustments – Flexibility in arranging content while staying within structured grids.
Feature Modularity – Control over activating and deactivating features based on content strategy.
This insight shaped the foundation of the Pugpig Design Kit.
The Pugpig Design Kit is a structured yet adaptable system designed to empower clients to take control of their digital products. The core pillars include:
Modular UI Components
We created a library of pre-built, reusable components that allowed clients to configure their apps without needing to design from scratch. These included:
Customizable article layouts
Flexible navigation structures
Dynamic content blocks for multimedia integration
Branding & Theme Controls
Clients could define their brand colors, typography, button styles, and spacing within a structured framework. This ensured their brand identity was reflected without affecting usability.
Intelligent Defaults with Smart Customization
We introduced best-practice defaults that allowed publishers to launch quickly but also tweak elements to better fit their audience. Clients could:
Use preset templates or modify them with ease.
Adjust spacing, padding, and typography within responsive design constraints.
Enable and disable features without breaking the UX.
Developer-Friendly Yet No-Code Friendly
While designers and content teams could make adjustments through a UI-friendly interface, developers could dive deeper with structured tokens and APIs, ensuring seamless integration into custom publishing workflows.
85%
Of customers expressed a desire for more extensive customization options, particularly in color schemes and typography and app layout.
60%
Of users encountered difficulties with the current customisation process, citing it as overly complex.
70%
Of customers indicated a need for more comprehensive guides and tutorials
80%
Of the insights were derived from audits and stakeholder discussions.
Armed with insights, I built a Figma component library. This library housed essential design elements—cards, tabs, navigation bars—addressing the 80% of users who wanted more customization options. By making the library intuitive and easy to navigate, we tackled complaints about the complexity of the old process and encouraged broader use of customization features.
Using Figma was a deliberate choice. Its familiarity reduced technical barriers, empowering users to take charge of their designs.
Next, I designed detailed layouts for timelines, storefronts, and settings, showcasing the toolkit’s flexibility. These examples helped users visualize how they could personalize their own apps.
Simultaneously, I created step-by-step guides in Help Juice. This documentation broke down the process, making customization approachable and fostering creativity among users.
How the Pugpig Design Kit Transformed Customization
The Pugpig Design Kit has revolutionized how clients build and maintain their digital publications. Key outcomes include:
Faster Time-to-Market
Clients reduced their app customization timeline from weeks to days.
Editors could adjust designs instantly without engineering involvement.
Consistency Across Brands
Even with flexible customization, the design kit ensured a polished, professional look across all Pugpig-powered apps.
Unified UX patterns improved reader engagement and navigation clarity.
Empowered Non-Technical Users
Content teams gained direct control over their app's appearance and functionality.
Developers could focus on more complex innovations instead of repetitive UI tweaks.
Scalability & Future-Proofing
The modular system allowed new features to be added without disrupting existing designs.
Clients could evolve their apps over time while staying within best practices.
57%
Increase in customer satisfaction due to enhanced customisation capabilities.
63%
Increase in documentation visits in help juice, indicating higher interest in customisation.
34%
Increase in new customer acquisition attracted by the ease of app customisation.
34%
Increase in new customer acquisition attracted by the ease of app customisation.
