To grasp the enormity of the task ahead, I needed to step back and get a good understanding of the current state of the design system in Figma. After 3 weeks, I examined 1,562 Figma components, 98 React, and 89 Sitecore, finding varied branding and styling. Check out the file!

Key insights I gathered (click to expand):

I presented my findings report to our delivery teams, which included Product Managers, Business Analysis, Scrum Masters, Designers, Developers and Testers. People loved it and it helped Managers and Developers to better understand the struggles Designers faced when trying to make wireframes using the design system.

It wasn’t that the designers were slow and couldn’t keep up with the developers, it was the design system that was failing to support Designers to create designs easily. I felt a shift in everyone's thinking from ‘it’s this person/teams/managers fault for failing to make the design system work like it should’ to ‘the design system itself has failed us’.

Redirecting the focus from individuals to systems created a newfound openness among the teams. Taking the initiative, I facilitated a workshop where the Sunrise and Delivery Teams collaboratively framed a problem statement. This shared vision served as the north star for the Sunrise Team, guiding our efforts and resources in addressing the problem statement

In the insights from the findings report, I listed a series of recommended actions to resolve the issues raised. I checked these actions against the problem statement to ensure they were in line with our goals, got approval from the Product Owner to implement the actions, and created a backlog of Jira tickets for myself and the developers so we could start getting things done. These actions were focused on removing obsolete components and improving documentation for designers.

Having wrapped up the quantitative analysis, I shifted gears into qualitative research. Using Microsoft Forms, I dispatched a set of System Usability and Role Specific Surveys. While my prior research focus was on Sunrise Figma and UX Designers, I was keen learn more about the Developers' experience with Sunrise React. I was particularly curious about their usage of our design system documentation website rac.design

I meticulously organized the survey feedback in Dovetail, highlighted key comments and extracted insights, which culminated in a monster findings report. I plugged in the data from the surveys into Power BI and created compelling data visuals for my presentation.

The insights from the surveys were both validating and eye-opening, especially concerning developers engagement with Sunrise React. The biggest shock was that the Sunrise Design System's Usability Score was a big. fat. F

The SUS score for our Design System could've been a lot better, it was pretty embarrassing, but the feedback was clear: the design system was slowing the velocity of our delivery teams, forcing designers and developers to waste time working around the design system issues.

With clarity from the findings, I outlined a strategic plan for UX and Engineering based on actionable tasks from the findings report. To keep us heading in the right direction, I ensured each proposed action in the plan matched to the issues described in the problem statement created by Mosaic and Sunrise teams. After getting the green light from the Product Owner on the list of jobs to be done, I created a series of Jira tickets on our design system board. Top of our list? Bid farewell to redundant components in Figma.

It took 4 months of painstaking design reviews with myself and our RAC design system focus group to identify obsolete designs, weeks to archive these components carefully without breaking changes, and whole days where I was focused on creating new responsive Figma components that were mirror stacked to React components. I killed removed 64% of our components that were outdated and obsolete. This resulted in a leaner, fast-loading design system file that reduced cognitive load and confusion for designers and allowed them to work even faster.

I may have removed a massive load of dead components from the design system, but the Sunrise Figma file was a mess. Over time, the Sunrise Figma file at RAC became a patchwork of styles and organizational methods, each unique to the designer who contributed to the system. I needed to create a new layout system for components that would link to components in Storybook and Sitecore.

I did several case studies of mature design systems (Shopify's Polaris is my fav) to study their design system Figma file structure, usability, legibility, and user-friendly experience.

Drawing inspiration from my research, I crafted a suite of utility pages that received enthusiastic approval from the design system Product Owner. Over the next few weeks, I updated the Sunrise Figma with this fresh design, and migration documentation to the design system documentation on Zeroheight. You can view the design system documentation I created for RAC on Zeroheight here

The new layout has helped system users find components up to 40% faster and reduced confusion when users navigate Sunrise Figma.

In DesignOps at RAC, we seized an opportunity to enhance designer onboarding. Newcomers often struggle with our design system and repositories like Brand, Figma, Storybook, Zeroheight, and Git.

I researched successful design systems for insights into designer onboarding. A common theme emerged: mature design systems used comprehensive onboarding, providing valuable context and team-specific connections.

Working with the design system's Product Owner and Delivery Lead, I led the creation of informative Figma onboarding slides. These curated slides empower new designers to grasp our system and navigate the RAC design ecosystem confidently. This holistic approach enhances their ability to integrate seamlessly into RAC's vibrant design landscape.

I am a key team member of the With, Not For Project. This project explores how RAC might co-create and embed inclusive design practices across our design process. We want to ensure that our products, services and experiences are not only accessible but create a greater sense of belonging for Western Australians. This includes members and the community, but also our people in their employee experience.

As a person living with an invisible disability (ASD) who has a passion for accessible and inclusive design, I was an Accessibility Expert and a point of contact for designers across RAC to ask questions about W3C guidelines, screen readers and WCAG minimum colour contrast standards. I keep across accessible design issues by consuming NNg articles, W3C guidelines and more.

We recently revised our React components to resolve accessible issues that were raised from an accessible audit by Vision Australia

We resolved the above by:

• Override the default MUI styling for the tertiary button to create a focus state that passed an AA colour contrast check
• Changed the aria-label to 'call us on 13 17 24'
• Changed to keyboard focus state for the home icon to diesel-deepest so it would be visible in all states
• Created a new colour token for placeholder text called 'subtleGreyText'

This improved our Siteimprove accessibility score by 23% in our React apps, which took the total accessible score up to 84%

I am currently working on the digital accessibility guidelines for designers and I'm creating an accessible checklist for designers when they make new components and patterns. Also on the horizon is an accessibility audit of all components in the Surnise Design System and from there I will create a strategy around how to improve accessibility of these components.

A number of foundational Sunrise Figma components in the Design System had minimal functionality for prototyping. Some components didn't have props for all states, auto-layout or even have options for different frameworks and breakpoints! (e.g. MUI vs Bootstrap). About 20% of our design system components had these issues, so I set out to create new advanced Figma components for the design system.

I started creating case studies of the coded components that were built in React and Sitecore to understand what was the current functionality of these components. I then spent hours crafting and testing responsive components in a branch in Figma, playing with Auto-layout and ensuring that the component included all states and breakpoints. I created component props with booleans, text, variants and nested instances.

I merged these new component branches to the main Sunrise Figma file without issues. Designers across RAC found these components more comprehensive and there was a 54% uptake in inserts and instances of these re-designed components.