top of page
sds-thumb2.png

OLG SPORTS DESIGN SYSTEM

September 2022

In August 2021, OLG launched PROLINE+ and has planned to introduce further updates and enhancements. With the implementation of the sports design system, the team will now be able to maintain visual consistency across all channels and streamline their design workflow. By establishing a centralized source of reusable components, the design team will be able to work more efficiently and effectively, ensuring a seamless and cohesive user experience.

FOUNDATION

sds-foundation

To begin creating the sports design system, I first gathered visual styles from the PROLINE+ website and existing style guide. By establishing a strong foundation that covers the color palette, typography, grid, and iconography, I was able to utilize these elements to create the component library.

COMPONENTS

After laying the foundation for the sports design system, I started developing the component library. Using the existing style guide as a reference, I meticulously combed through the PROLINE+ website to gather different components and their intended usage. Creating effective reusable components requires accounting for every possible state and instant, which can be a challenging task. Fortunately, during the design system's creation, Figma introduced a major update that allowed for component variants. This new feature simplified the process of linking different states and instances under one component, resulting in a better-organized and more efficient design system.

ZEROHEIGHT INTEGRATION

The design team faced the challenge of sharing the sports design system with other parts of the organization, as it was created and stored in Figma, which not everyone had access to. To overcome this challenge, the team opted to use ZeroHeight as a publishing platform to host the OLG design systems, ensuring wider access throughout the organization and for external service providers. With seamless integration between Figma and ZeroHeight, any updates made to the design system in Figma are easily reflected in ZeroHeight, ensuring that everyone has access to the most up-to-date design system.

sds-4.png
sds-2.png
sds-3.png
sds-1.png
bottom of page