Doctor Who - Worlds Apart

Expanding on the immersive Doctor Who universe, Reality Games+ developed an engaging blockchain digital trading card game called Doctor Who: Worlds Apart. Staak was enlisted to design and construct a component and pattern library for the supporting website.

With no existing a design system or brand book, we initiated the design process from scratch formulating a cohesive and robust design system encompassing typographic and color schemes, a scaling system, and UI components. This system ensured a consistent user experience (UX) for the website and empowered Reality Games Plus' in-house team to build out future sections of the site with ease and ensure consistency across the board.

To facilitate the scalability of the frontend design system across multiple teams and platforms—an ordinarily intricate task—we opted for Tailwind, employing a utility-first approach to CSS. This decision streamlined the onboarding process for new developers working with the newly established Doctor Who: Worlds Apart component library.

The technical implementation and delivery of the design system were executed through a series of atomic components, modules, patterns, and pages in Storybook - (a frontend workshop for constructing UI components and pages in isolation). The use of Storybook allowed us to be able to fully stress test components to ensure they handle varying content, theme variants, accessibility as well as respond to viewport size correctly all in a sandbox environment.