WIN Reality Cross-Platform Design Systems
WIN Reality was in need of a design system that could support a native app, video game, and web app. Their design system needed to act as a source of truth for the design and dev teams that support the three experiences. The WIN Reality design system also needed to reflect the brand voice and visual style for a seamless experience in and out of the headset —while meeting WCAG and other accessibility standards.
Role: As Lead Product Designer created and maintained three platform-specific design systems (VR, mobile, responsive web) for WIN Reality
Established foundational design principles from limited initial assets: a type ramp, a brand color, and a logo
Developed scalable, accessible UI components aligned with WCAG guidelines and brand identity
Collaborated with product, engineering, and brand teams to ensure implementation across environments
Standardized design-to-dev handoff practices and documentation to improve team alignment and efficiency
Team: Worked directly with the VR, Mobile, and Web frontend developers
Duration: December 2023 - September 2024
Overview
Like many organizations, the WIN Reality design team had a collection of files that had been used to design features that were then vaguely translated across three dev environments: a web app, a native app (iOS and Android), and a VR game experience.
Approach
I needed to assess what we had to work with and where we might want to start from scratch. After a lengthy UI audit, we had a clear vision of what we had and what we needed to work on.
I decided we needed was to establish design principles that would unify our visual language, improve consistency across the user experience, and develop a process that enabled clear communication across all parts of the organization to improve efficiency and foster collaboration.
Design Principles
To build a strong house, we began with key principles that shape the design system's look and structure. Following the brand guidelines from the Creative team, we aimed to establish our design principles in line with the brand's language and company mission.
These principles would be used to define shape, typography, color, spacing, and motion. These key elements alone would be identifiable as WIN Reality—and together, they create the WIN Reality experience.
Design System Principles
01 Make systems flexible
Novices and experts can choose to do more or less. Avoid jargon.
02 Easy and obvious
Make obvious pathways that offer an easy ride, don’t interrupt or create obstacles.
03 Elevate the primary task
Reduce distractions, drive focus to relevant options, and reduce distractions like nice-to-haves or disabled states.
04 Fast is fun
Let users perform tasks consecutively, not simultaneously.
04 Focus on emotion
Pleasure is as vital as ease of use; delight the user and increase engagement.
Audit
I found different teams had different style libraries, in various states of completion. As part of the design audit, I collected these styles to determine what needed to be updated and how they were represented in the different codebases.
Understanding how the styles existed informed the token naming and structure. We wanted to create a single token library that aligned with Brand, met WCAG visual contrast standards, and could be used across teams.
Design Tokens
We structured the library similarly to how it would be implemented in a dev environment—specifically for the Game Client.
The Game Client used a token structure built around a Reference (REF) library containing raw values for spacing, color, radius, etc. These values drove System (SYS) libraries tailored to different platforms—Web, Native app, and Game Client.
This structure allowed optimal scalability as the need for more environments and teams might be needed in the future. Aside from scaling, this also unified the visual experience to meet Brand goals and, more importantly, improved accessibility for all WIN Reality users.
Team Feedback
With our token library mapped out we started to share it out with the different teams so that we can grow interest and adoption of the new structure. It was at this time we started to gather feedback from cross-platform developers on the organizational structure and naming semantics. That feedback was later assessed and updated accordingly.
Now that we are all speaking the same language, we hoped that the tokens would improve our design to dev handoffs and would allow us to utilize the built-in features in Figma so that documentation would live alongside the visual example. Eventually, this would also allow designers to experiment directly in the game client for prototyping or creating user tests. The design tokens library became an invaluable asset to the design process as well as to the overall adoption of the design system.
WCAG AA-AAA
I prioritized accessibility so we could, at a minimum, meet WCAG AA standards. Focusing first on typography and color contrast.
Typography and color are fundamental to the experience. I made sure all typographic content was legible at any distance—whether a user was far from their screen or close to a small one.
A well-defined type scale was developed, using generous line height settings and increased letter spacing to prevent content from appearing jumbled—whether in VR or on an iPhone.
Implimentation
The most important task was sharing our progress to gain internal support and validate decisions. We made sure developers could offer feedback early, as much of the effort required their collaboration.
We used this collaboration to gather support from PMs and stakeholders across the org.
I needed to show every level of the organization the value of the design system—and how it would expand the possibilities of how we develop the WIN Reality experience.
Typography Usage Rules
Type Ramp uses AT Aero only
Only three weights: Super, Bold and Regular
We can only have 3 variations of the different type categories: Heading, Title, Body, Data and Labels
Reduce use of Black so that we can push the typographic hierarchy
Color Notes
Color contrast meets WCAG visual contrast standards
Have all possible colors available in the REF library but apply specifically to components bases on Brand guidelines
SYS library can be specific to platform based on visual contrast needs and capabilities
Do not rely solely on color to show change in UI states
Updated Token Library
REF level tokens drive the system, these values are determined by brand
SYS level tokens may be applied to components that are used across all platforms.
Text strings can be used in testing and for placeholder text in components
Applying the token library
(Container Padding) Margins defines the horizontal and vertical gaps between the state layer and the component’s container/viewbox.
Padding defines the horizontal and vertical gaps between content and the boundaries of the state layer.
Spacing (Margins) defines the horizontal and/or vertical gaps between content within the State Layer.
Stroke defines the width of a border.
Visual Design Examples
The most important task was sharing our progress to gain internal support and validate decisions. We made sure developers could offer feedback early, as much of the effort required their collaboration.
We used this collaboration to gather support from PMs and stakeholders across the org.
I needed to show every level of the organization the value of the design system—and how it would expand the possibilities of how we develop the WIN Reality experience.