Doctor Who: Worlds Apart

The iconic world of Doctor Who enters the age of Web 3.0 with its new free-to-play online blockchain digital collectable card game

Reality Gaming Group

www.doctorwho-worldsapart.com

For those who may not know (and how would you not?!), Doctor Who is an iconic British science fiction TV series chronicling the time hopping adventures of 'The Doctor'. Since hitting TV screens in 1963, Doctor Who has enjoyed a global cult following.

Building on this massively immersive Doctor Who universe, Reality Games Plus have created a stunningly addictive blockchain digital trading card game. And us? We were approached to design and build its supporting website!

Building a foundation

As the game, Doctor Who: Worlds Apart was completely new, no design system or brand book existed to help influence how the website and its digital touch points should look and feel.

Working from the ground up we devised a cohesive and robust design system which covered such things as typographic and colour schemas, scaling system and UI components. These would ultimately deliver a consistent UX for the website and also allow Reality Games Plus’ in-house team to carry out future updates to the site post launch.

Screen shot from the site showing the my collection page

Development

The technical build and delivery of the design system was as a series of atomic components, modules, patterns and pages in Storybook, frontend workshop for building UI components and pages in isolation.

In order to make the front-end design system scale across multiple teams and platforms, a task that would normally be incredibly complex, we used Tailwind, as utility first approach to CSS, reducing the onboarding process for new developers as they work with the Dr Who: World's Apart codebase.