BBC Studio - Doctor Who Worlds Apart

UX Research for BBC Studio - Doctor Who Worlds Apart

Doctor Who Worlds Apart (DWWA) is a project created for BBC Studios, based on the famous series 'Doctor Who'. The project involved launching a updated game that focused on building a community of board game enthusiasts who enjoy winning prizes and curating their own collections. My role was to promote the game by developing a dedicated website, with the primary goal of building a base of regular users while attracting new ones.

Scope: UX Design and UI Visual
Tools: Figma, Adobe XD
Role: Concept, Wireframes, Prototypes, Design

Context:

To support the launch of the new version of the game, the task of redesigning the website was undertaken to attract more users. I conducted research to identify the personas of those who would visit the site to play. As part of the redesign process, I created a storyboard, sitemap, user journey, wireframes, prototypes, and the final design. In addition to the landing page, a store page was developed where users could purchase items for use in the game. Users also have accounts where they can manage their account, from transactions to charges.

Problem:

Over the years, statistics showed a decline in users visiting the website and playing the original game. In response, the UX/UI artist team revamped the game with new graphics, challenges, and a fresh design. My role was to rebuild the website from UX to UI. This involved analysing competitors to identify trends and understand the reasons behind the website's decreased usage.

Solution:

The original website displayed a significant amount of information on the homepage, from downloading the game to purchasing items, which could overwhelm users and discourage them from registering or downloading it. The solution was to tailor the experience by focusing on the specific interests of users, such as displaying different information to those who were already registered and those who did not have an existing account.

Research:

I mapped out the available solutions for each state of the website. After, I then interviewed relevant users from communities who regularly use the website and conducted user surveys to gain a broader perspective. I analysed the results and discussed the solutions in our regular design sprints. I led weekly design reviews with two engineers and outlined research plans. Additionally, I conducted cognitive walkthroughs with QA users, designed flows, and iterated on designs based on findings and stakeholder feedback.

Deliverables:

• Market Analysis
• Ideation
• Design Direction
• Low-Fidelity (Lofi) Explorations
• Mid-Fidelity (Midfi) Explorations
• Prototypes

• Design and Flow

Doctor Who Worlds Apart Design Systems

After completing the UX design, I transitioned to developing the website's design system.
In this phase, I investigated the fonts, colours, icons, inputs, filters, and all UI elements.

Challenge:

The new colours needed to represent Doctor Who while being impactful and attention-grabbing. I also needed to ensure that the colours worked well for users with disabilities.

My Role:

During the development of the Design System for Doctor Who Worlds Apart (DWWA) new design language, my responsibilities included:

• Advocating for the needs of people with disabilities by promoting accessibility best practices.
• Conducting accessibility audits of GM2 and GM3 components to assess compliance levels.
• Guiding component updates and enforcing internal contrast requirements to ensure inclusive design systems and product launches.

Process:

• Understanding Web Content Accessibility Guideline's: Low-contrast controls are harder to perceive and may be missed entirely by people with visual impairments. Users with disabilities should not need contrast-enhancing assistive technologies to perceive and understand the UI.
• Boundaries: For people with cognitive disabilities, it is recommended to delineate the boundaries of controls and containers to aid in the recognition and completion of activities.
• Adjacent Colours: The visual attributes of a component must contrast with the adjacent background and other components if they appear next to each other.
To better collaborate with Material stakeholders, I used contrast-checking tools to ensure component compliance.

UX Writing

Crafting the Language for Initial Account Setup

I was responsible for designing the language used in the mobile app during the initial account setup process, as well as throughout the rest of the website. The goal was to guide users smoothly through creating their profiles and navigating the platform. Key tasks included:

Writing clear and concise directions
Providing straightforward error messages
Suggesting useful actions for the next steps
Ensuring consistency in tone and messaging across the website

Visual language

I wanted to give the website a fresh and appealing look that would be simple and easy to navigate. I checked various references, patterns, colours and typographic combinations to get the impact we desired.