Ontario Lottery & Gaming Corporation
ROLE
Product Designer
DURATION
2 Weeks
TOOLS
Figma
TEAM
Sports Acquisition & Retention Lab
ONTARIO LOTTERY & GAMING
App Design System
ROLE
Product Designer
DURATION
4 MONTHS
TOOL
Figma
TEAM
Customer Experience (CX) Design Team
App Design System
MY ROLE
When designing the iOS and Android App DSL, we started with foundational work, including file organization, layout design, and categorization of components. We then identified all major components on both platforms and conducted a thorough audit of each app. Afterward, we built out the components, detailing guidelines and specifications for each, to ensure clarity and consistency.
OVERVIEW
Over a three-month period, Senior Product Designer Mia Lin, and I collaborated to develop a second design system library (DSL) for OLG.
The second project involved creating a new DSL specifically for iOS and Android mobile applications. This inaugural version filled critical gaps by introducing app-specific components that were previously absent from the original DSL. The result was a streamlined workflow for OLG product designers, further supporting consistency and efficiency in mobile app design.
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
To develop a comprehensive and cohesive DSL for iOS and Android apps, ensuring consistent component organization and integration across both platforms?
Design Process
STRUCTURE & USABILITY
When designing the iOS and Android App DSL, the initial design consideration was to keep the two libraries separate. We chose this approach to maintain ease of use for designers, as combining the libraries would increase cognitive load and complicate the process of searching for components and identifying their guidelines and usage.
FILE ORGANIZATION
STRUCTURE
To maintain consistency with the Web DSL, the file was organized similarly, categorizing all components into page-specific categories based on their use. By applying the same organizational approach, we ensure that designers can navigate the DSL in a familiar manner, thereby supporting their workflows more efficiently.
BUILDING COMPONENTS
To streamline efficiency, I developed complex components that empowered designers to easily modify them for specific use cases. By creating variants and thoughtfully designing component properties, I enabled designers to toggle between devices and tailor content within each component, ensuring flexibility and adaptability across various designs.
TOP APP BAR COMPONENT
RESEARCH
Design systems must evolve over time, and so must their components. When I identified an outdated component, I conducted thorough research to understand current best practices. I examined world-class component libraries like M3 Material and Apple’s design guidelines to inform the updates and ensure our components were aligned with industry standards.
SHEETS
CONSISTENCY
To ensure consistency across the app, we worked to identify and eliminate any unnecessary inconsistencies that were not native components. Our goal was to provide the same seamless experience for all users interacting with the OLG app.
PROGRESS TRACKER
Outcome
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.
THE END RESULT
While working on this project, I developed over 300 responsive components, each with Boolean property variations to accommodate different use cases. I created comprehensive component overviews, detailing properties, anatomies, and guidelines for usage, ensuring designers had a clear reference to maintain consistency across all platforms. Additionally, I focused on layouts and spacing to guarantee responsiveness across all screen sizes, ensuring uniformity across all viewports.
How-to-Play
ONTARIO LOTTERY & GAMING (OLG)
Design System Library
ROLE
Product Designer
DURATION
8 Months
TOOLS
Figma
TEAM
Customer Experience (CX) Design Team