Design system foundations

Step 1: Define Helix’s Structure

To build a cohesive and effective design system, I established a clear structure for Helix as a single source of truth. Designed in Figma, it incorporates design tokens, a UI kit, and a component library, providing the product team with the confidence to develop consistent and scalable UI solutions.

After researching industry-leading design systems like Atlassian, Carbon, Material, and Shopify’s Polaris, I identified the atomic design approach as the optimal framework. This method ensures our product team adopts a unified mindset, viewing the UI as a collection of interrelated components that form a seamless and cohesive whole.

Atomic design approach.

Step 2: Build UI Libraries & Documentation

2.1 UI Library

To date, I’ve developed component libraries for two of William Hill's four product verticals: Gaming and Retail. With autonomy to structure the project, I began by conducting a comprehensive audit of the core customer journeys within Gaming. This process involved recording components on each page and categorizing them at atomic and molecular levels, such as accordions, modals, and other UI elements. Using this detailed inventory, I systematically created and refined components.

This approach was aligned with initial groundwork laid by the Senior UI Designer, who had begun creating atomic-level components like colors, typography, and icons. To ensure seamless progress tracking and collaboration, I established an epic in Jira, allowing stakeholders to monitor updates efficiently.

Game tile component.

2.2 Documentation

Effective documentation is critical to ensuring consistent design practices and clear communication across teams. I created a series of Figma files that serve as resources for both designers and other stakeholders, organised into three key categories:

Best Practices

Page and Component Documentation: Detailed breakdowns on using templates, including anatomy overviews, dos and don’ts, and clear explanations.

Usability Testing: A guide to leveraging usertesting.com, complete with audience flowcharts.

Accessibility: Comprehensive guidance on designing inclusively and ensuring accessibility.

Guide to accessibility.

Templates

Ready-to-use Figma templates for projects, such as component design, presentations, customer journey mapping, SUS scoring, and page layouts.

Customer journey map template.

Getting Started

A set of resources to onboard new designers and inform other departments about the design team’s processes. Key documents include:

• Design Team Org Structure: Overview of roles within the team.

• Brand Guidelines: A comprehensive look at William Hill’s visual identity, tone of voice, and brand values.

• Design Processes and Methodologies: Documentation of research, ideation, and prototyping workflows.

• Personas: Profiles detailing target users, their needs, goals, and pain points.

Screenshot of personas from document detailing how and why personas are used.

This layered documentation strategy supports consistent adoption of the Helix design system while fostering collaboration and alignment across the organisation.

Step 3: Integrating Our Ways of Working as a Global Team

Education and Training: Sharing Knowledge

Workshops were essential in promoting Helix adoption, educating designers and developers on its use, benefits, and limitations. This enabled teams to improve design efficiency and usability across the organization.

Collaboration and Feedback: One Team, One Dream

Collaboration and open feedback between designers and developers were key to ensuring Helix met team needs, resulting in a more efficient design process and stronger alignment.

Governance and Ownership: Establishing the Flight Plan

Helix’s sustainability relied on clear governance, defined roles, and robust documentation. This structure maintained consistency across teams and ensured ongoing relevance in design and development.

Advocating for Helix

As a large-scale, long-term project, Helix required widespread support from stakeholders across the product organisation. I played an active role in securing buy-in by presenting Helix to key stakeholders, outlining its strategic importance and potential impact on efficiency and user experience.Through these initiatives, Helix has been successfully integrated into William Hill's product workflows, positioning it as a vital tool for unifying the design and development processes globally.

Extracts of a presentation I delivered to senior stakeholders advocating for Helix.