Loading Case Study...
12 months (ongoing)
Senior UX Designer
UI Artist, UX Writer, Engineering
Components added to the Design System
Farm Heroes Saga is a decade-old game with fragmented design and development workflows. Despite multiple areas contributing to new features, there was no unified approach to common UI components.
I led the initiative to build a sustainable design system that would solve consistency and efficiency problems, without derailing existing roadmaps across feature teams.
Feature Teams
Team Members
Global Offices
As a decade-old game, Farm Heroes Saga had evolved organically with multiple teams contributing features independently. This led to significant design and development inefficiencies:
1 button had 6 different designs
5 reward screens with different layouts
6 widget variants across the game
6 different heading styles
Duplicate dev work and code
Slow mockup and rollout
Frequent bugs during UI handoff and QA
No shared source of truth across tools
A small example of the duplicate work of buttons in the game.
I conducted in-depth stakeholder interviews to understand the needs and pain points in leadership and cross-craft collaboration.
Teams are designing and building similar components in completely different ways
Designers, devs, and artists work in silos, often unaware of what others are building
No shared components or documentation on common components
Devs and UI artists report uncertainty about what to build, leading to back-and-forth
Figma and Fiction (or other production tools) aren’t in sync, creating confusion and rework
No clear governance around shared components
Unclear how to contribute to or request updates in existing UI patterns
Teams were open to standardisation if it could align with their roadmap and not to add overhead
Some past attempts at shared libraries or UI kits failed due to poor adoption or lack of support
I have seen many designers attempt a design systems but it often gets lost and forgotten when new hires join, and then the cycle starts again.
Head of Product
Build a sustainable design system that brings consistency and, removes radiancy’s and tech dept without derailing existing roadmaps across multiple product teams.
After 14 months, the design system gave impressive results for the components added:
reduction in dev time
reduction in design time
Fewer bugs reported by QA
Lines of code deleted
Contributors across teams
stakeholders satisfaction rate
Features are designed and developed faster, improving time to market.
Players experience a more cohesive game interface across all features.
Consolidated codebase requires less maintenance.
The design system saves costs by enabling faster onboarding, fewer design-dev syncs, quicker builds, and easy reuse of components.
We kicked off by adding 1 component to the design system, which was the map widget because it was present on 3 different product team roadmaps.
Before: Multiple inconsistent widget design
After: Modular widget system
After demonstrating to stakeholders that adding roadmap-aligned components could save time, we formed a cross-functional team to identify additional common components for the design system.
Before: Multiple inconsistent rewards screen, After: One rewards screen template
Once we had a working system for adding and using standardized components, we partnered with production to integrate the design system into workflows across teams.
Successful workshop outcome with production managers
Integrated the design system into both Figma, Fiction and Confluence, allowing designers and developers to work from a single source of truth, reducing handoff friction and enabling faster, more accurate implementation.
Design system documentation on Confluence
Design system documentation on Figma
Enabled UX and game designers to build full feature flows in minutes using modular templates, cutting design time by 75–90% and accelerating delivery without sacrificing quality.
Figma design system flow building
Achieved 100% stakeholder satisfaction and 12+ cross-team contributors by implementing a federal model for design system ownership, ensuring the system evolved with real product needs.
Design System Component Usage by Feature Pod. [y] No. of DS Components Used, [x] Feature Pods
This project reinforced several important strategy and collaboration insights.
Treating the system like a car repair, preserving what worked and replacing what didn't, made building much easier than building from scratch. Teams could see immediate value while maintaining familiarity.
Bringing contributors into the process (like building IKEA furniture together) helped create lasting buy-in. When teams participated in creating the design system, they became invested in its success.
Housing the design system in both Figma and Fiction ensured everyone could find and use it. Developers could access specifications directly in their workflow, reducing handoff friction.
Add next common components: reward delivery flows, access dialogs, and timers.
Improve onboarding, documentation, and Slack touchpoint to help teams adopt the system.
Expand A/B testing to optimise widget rules and patterns based on user behaviour data.
Transform Farm Heroes Saga into a more maintainable, consistent, and efficient platform that can evolve quickly while maintaining quality. The design system will become the foundation for faster feature development and improved player experience.
UX Revamp Case Study