Huddle

A scalable design system created to power Manager Mode and later adopted across the entire Dream11 app to enable speed, flexibility, and a refreshed visual direction.

00

problem

Dream11’s existing design system was built with strict guardrails to prevent inconsistency, especially for new designers. While this ensured control, it came with tradeoffs. The system was rigid, difficult to extend, limited in component variety, and offered no theming flexibility. As a result, designers either felt constrained or ended up breaking the system to explore new ideas. This led to fragmented experiences, slower iteration, and a muted visual language that was difficult to evolve. For Manager Mode, a product that introduced new interaction patterns and long-term engagement surfaces, these constraints became a blocker rather than a safeguard.

solution

Huddle started as a design system built specifically for Manager Mode, designed to be flexible, modular, and extensible while still maintaining consistency. Instead of attempting to overhaul Dream11’s existing system upfront, Huddle was developed and validated in a real product environment. It evolved iteratively with each app version, in close collaboration with engineering, until it reached a level of maturity where it could reliably scale across the entire Dream11 app and its verticals. Today, Huddle powers Dream11 at scale and is used by roughly 25 designers across teams.

Building a system by designing with it

Huddle was not designed in isolation. It was built while actively designing Manager Mode, which exposed real constraints, edge cases, and opportunities that static system work often misses.

The goal was not to give designers unlimited freedom, but to replace rigid guardrails with intentional flexibility. Designers should be able to explore visual direction, layout density, and hierarchy without breaking the system every time they needed something new.

By grounding Huddle in real product needs and engineering feasibility, the system evolved naturally rather than being forcefully imposed.


What broke before Huddle

The older system optimised for control over expression. While well intentioned, this resulted in:

  • Limited component adaptability

  • No support for theming or tonal variation

  • Slow visual evolution due to tech constraints

  • Designers creating one-off solutions outside the system

This led to inconsistency at scale and increased design debt over time.

System Philosophy

Huddle was designed around a few core beliefs:

  • Flexibility should not equal chaos

  • Systems should enable exploration, not suppress it

  • Real products are the best testing ground for systems

The system balanced structure with choice, allowing designers to adapt components and styles without losing coherence.


Adoption and Scale

Huddle’s adoption followed a natural progression:

  1. Used to design Manager Mode

  2. Implemented by the Manager Mode engineering team

  3. Gradually adopted during broader Dream11 redesign efforts

  4. Rolled out across all Dream11 verticals

This gradual adoption helped build trust across design and tech teams, ensuring the system was robust before becoming foundational.


Reflection

Huddle reinforced my belief that strong design systems are built through usage, not documentation alone. Designing, shipping, iterating, and aligning with engineering were critical to making the system durable and widely adopted.

This project strengthened my ability to think beyond individual features and focus on foundations that enable teams to move faster without sacrificing quality.

year

2024–2026

timeframe

Ongoing

tools

Figma

category

Design Systems · Product Foundations

01

Dream11 screens

Different products, same system, adaptable outcomes

02

Before and After

Before and After

+

Tokens