ONTARIO LOTTERY & GAMING

Design System Library

ROLE

Product Designer

DURATION

8 Months

TOOL

Figma

TEAM

Customer Experience (CX) Design Team

Ontario Lottery & Gaming Corporation

ROLE

Product Designer

DURATION

2 Weeks

TOOLS

Figma

TEAM

Sports Acquisition & Retention Lab

OLG Design
System Libraries

MY ROLE

For the OLG website and mobile-responsive Design System Library (DSL), our goal was to enhance the overall structure and usability of the documentation. We reimagined the page layouts and reorganized the components to improve accessibility and efficiency for designers. This involved revisiting all existing components, updating property names, and clearly naming all the different states.

OVERVIEW

Over a three-month period, Senior Product Designer Mia Lin, Product Designer Tasmia Mahmuda, and I collaborated to update the design system libraries (DSL) for OLG.

This initiative focused on enhancing the existing OLG website and mobile-responsive DSL. We addressed discrepancies between the live site and current components, aiming to maintain visual and experiential consistency across all platforms. This effort not only unified OLG's overall design language but also empowered designers to create more efficient and cohesive designs.

STAKEHOLDERS

Senior Product Designer Mia Lin, Director Digital UX design Genevieve Co and Andrew Succi and Sr Director DigiComm & CX Amanda Veraldi.

Problem

THE CHALLENGE

How can we create an effective and consistent documentation library of design styles and tokens that supports maintaining consistency across products and designers, while also streamlining workflow?

Design Process

STRUCTURE & USABILITY

The first thing we needed to address was the organization of the DSL. The original design system couldn’t properly support designers in their workflows—components were hard to find and lacked detailed documentation outlining their usage. This led to designers spending unnecessary time searching for assets or creating them from scratch, which affected consistency across both designers and OLG products.

FILE ORGANIZATION

SOLUTION

The solution was to create a branch of the DSL and restructure the existing components into page-specific categories. Each page now includes an overview of related components, all properly named with detailed usage guidelines. This allows designers to easily search for assets and quickly find the specific components they need, significantly speeding up workflows and eliminating the frustration of time-consuming searches.

PROPERTIES

The next focus was on improving the usability of the components. The first iteration of the DSL included components without named properties, leading to guesswork and trial and error when adapting components for specific use cases.

SOLUTION

To improve workflow, all components were audited to identify missing property names. All states and properties were then renamed according to their intended use, making it easier for designers to adapt components to their specific needs.

Outcome

THE RESULT

A DSL encompassing all OLG web and mobile-web components, featuring 300 responsive components. The documentation includes detailed usage guidelines, a new, user-friendly structure with component-specific pages, and all variants with appropriately named properties, ensuring flexibility and ease of use.

USABILITY & EFFICIENCY OF USE

To simplify designers' work and enhance efficiency, consistency, and scalability.

ADVANTAGES

The design system serves as a centralized resource for viewing components, patterns, and styles, allowing new changes to existing projects to be redesigned and managed at scale. By leveraging pre-made components and elements, designers can quickly replicate designs, shifting their focus from tweaking visuals to solving complex problems. This approach ensures visual and functional consistency across projects, reduces the need to reinvent the wheel, and minimizes wasted design or development time due to miscommunication.

App Design System

NEXT PROJECT

CLOSING THE GAP

We conducted a comprehensive audit of all OLG.ca webpages, meticulously identifying and documenting missing or inconsistent components. We then updated existing components to align with those live on the site, reconfiguring them to be responsive and creating any missing variants and their properties.

WINNING NUMBERS

Following this, we built the missing components, developed their variants, and defined their properties. Next, we created larger components to support major user flows, such as Purchase Flow, Transaction History, Registration & Login and Winning Numbers. This process resulted in a more robust and cohesive DSL, streamlining the design process and ensuring consistency across the OLG platform.

ONTARIO LOTTERY & GAMING (OLG)