TRIPP VR Design System

I worked closely with an external design studio to define TRIPP's brand identity, including the colour palette, logo design and visual tone. I chose a striking lime green as the main CTA colour because many users associate green with "go", encouraging users to take action. I also tested each colour in headset to ensure that they were AAA compliant and had sufficient contrast to support visibility.

Once the brand font was established, I outlined the typographical hierarchy to create more visual balance with copy on modals. Typography treatments are especially important for helping users consume information in XR spaces. In collaboration with the Engineering team, we devised a font theming system in Unity to unify typography treatments across design and implementation.

I applied the atomic design methodology by Brad Frost when building a design system comprised of nested components and instances. Auto-layout was a great tool for maintaining sufficient padding around text and UI on modals that adjusted parametrically based on the content. Once the asset library was set, design iterations became much quicker to achieve, especially across the team of other designers. 

As mentioned, interaction states are crucial visual cues that provide feedback for the user's actions in any digital interface. They are clear signifiers that inform the user what actions can or cannot be taken. In addition to changing the colour values for each state, I added a subtle scaling effect for hover and selection to accommodate for visually impaired/colour blind users.