Goal
As the lead UX/UI designer, I was responsible for implementing the Helix Design System across the CompliSpace suite of products. The goal of this project was not only to create a unified, modern, and branded look and feel for the products but also, from a technical standpoint, to implement a scalable and tokenised design system that would allow for easier UI modifications in the future. This system needed to be adaptable to multiple products (built on multiple stacks) and capable of evolving with ongoing changes in technology and user needs. The emphasis was on building a design foundation that could provide a seamless user experience while maintaining flexibility for future growth.
Before
After
Why? The Challenge
Our suite of products did not use a unified design component library, leading to a disjointed, outdated, and inconsistent visual experience. This inconsistency negatively impacted the overall user experience and added technical debt as developers had to source UI components from multiple places, resulting in redundant or duplicated work and longer development times. The solution was to implement a unified design system that could streamline internal design and development efforts, as well as modernize and unify our suite of products.
My Role
I played two primary roles in this project: UX/UI designer and project coordinator.
UX/UI Designer: As the UX/UI designer, I was responsible for designing and contextualizing the design system across each product. This included applying the design system to our platforms, ensuring that components worked effectively in practice, and providing developers with detailed specifications and functional contextualization to aid their understanding.
Project Coordinator: As the project coordinator, I managed the implementation, development, and sharing of the system across two separate tech stacks: Ruby on Rails (which used a React front-end) and Vue (which where appropriate used the Vuetify design System as a base library). This role involved constant communication, management, delegation, and cross-functional collaboration. I connected two development teams, located in Kuala Lumpur and Sydney, as well as our UI design team in the UK, with myself based in Sydney. This included leading weekly stand-ups, connecting through online communication tools like Confluence, Teams and Jira, and handling design handoff. This hand off process entailed providing contextualized and annotated Figma design files, along with component behaviour and specification documentation in ZeroHeight.
The Approach
The first step involved conducting a comprehensive audit of existing UI elements across all products. This audit was crucial in identifying the inconsistencies, redundant components, and accessibility issues that were present across our suite. The audit also provided valuable insights into the usability issues that users were experiencing, which informed our design decisions moving forward. Accessibility was a significant focus during this stage, as we wanted to ensure our design system would be inclusive and meet industry standards for all users, including those with disabilities.
After the audit, I collaborated with product managers to determine which platform features were the most crucial for UX and UI improvement. This prioritization process ensured that we focused on the areas that would provide the most significant impact onthe user experience. The design system was rolled out in tandem with new feature upgrades to minimize redundant development efforts and make efficient use of our resources.
The UX design of new features involved creating detailed wireframes and user flows to illustrate the intended user experience. These wireframes were shared with product managers, senior software engineers, and other stakeholders to gather feedback and ensure they met user needs and technical requirements. This collaborative process allowed us to align the designs with both business goals and user expectations. It also helped identify any technical constraints early in the process, enabling us to make adjustments before moving into the UI design phase.
Once the wireframes were validated and approved, I applied UI elements from the Helix Design System to the wireframes in Figma. This required careful attention to detail to ensure that the UI elements were consistent with the overall design language while also being flexible enough to accommodate specific feature requirements. In some cases, this meant contextualizing or customizing Helix components to fit the unique needs of a feature, resulting in custom components or the introduction of additional behaviour and design specifications. The design system needed to be both prescriptive and adaptable, providing a solid foundation while allowing room for innovation.
Key Considerations and Collaboration
User-Centric Design
Throughout the process, it was essential to prioritize usability before applying the Helix Design System. The design system was used to support the user needs and functionality of the platform, not dictate them. While a design system provides consistency and efficiency, it was crucial that it served as a tool to enhance the platform’s functionality and user experience rather than dictate it. Before integrating Helix, I ensured that all UX decisions were driven by user research, usability testing, and real-world interactions, ensuring that intuitive navigation, accessibility, and overall usability remained the foundation of our designs. The design system was then leveraged to streamline workflows, unify visual elements, and improve efficiency.
Collaboration
Throughout the project, ongoing collaboration was key. As project coordinator I facilitated weekly stand-ups involving product managers, senior software engineers, and the UI team which were essential for ensuring optimized process, usability, and technical feasibility. These meetings provided a platform for open communication, allowing us to address any issues promptly and make informed decisions that aligned with our platform, user and business goals. The importance of cross-functional collaboration cannot be overstated, as it was through these discussions that we were able to align on priorities, set realistic timelines, and ensure that everyone was aligned on next steps.
Phased Rollout Plan
To avoid disrupting ongoing projects, I developed a phased rollout plan that aligned with feature releases and major tech upgrades, such as moving from Vue 2 to Vue 3. This phased approach allowed us to implement the design system gradually, reducing the risk of major disruptions and ensuring that we could iterate and improve the system based on feedback from each phase. This also allowed developers to become familiar with the design system incrementally, which helped in smoothing the transition and minimizing resistance to change. It also allowed for users to adapt to the new visual design and layout of the platforms, reducing cognitive load of needing to “relearn” any previous pathways or known UI components.
Challenges I Overcame
Working with limited resources required careful planning and smart decision-making. One of the biggest challenges was ensuring that the rollout of the design system did not place an undue burden on our development teams. To address this, I integrated the rollout of the design system with feature releases, which minimized the additional workload for the team. By aligning the design system implementation with new feature development, we were able to make the most of our available resources and avoid redundant work.
Another challenge was the reliance on existing components from the Vuetify library, which were not always a perfect match for our design requirements. Instead of building every component from scratch, which would have been resource-intensive, I worked closely with the development team to adapt existing Vuetify components by adjusting the CSS to align with the Helix design standards. This required a deep understanding of both the design intent and the technical capabilities of Vuetify, as well as close collaboration with developers to ensure that the adjustments met both visual and functional requirements. This approach significantly reduced the technical workload while still allowing us to achieve the desired level of visual consistency and brand alignment.
Coordinating across multiple time zones added another layer of complexity to the project. With development teams in Kuala Lumpur, the design team in the UK, and myself in Australia, effective communication was critical. I established regular communication cadences, including weekly stand-ups, design reviews, and ad-hoc problem-solving sessions as needed. Using tools like Teams, Jira, and Figma helped facilitate this communication whilst still respecting individual’s time-zones and work-life-balance, allowing us to maintain alignment despite the geographical distances. The success of the project was largely due to the strong communication framework that was put in place, enabling efficient collaboration across continents.
Reflection
This refined my UI component and tokenisation, collaboration with cross-functional teams, and project management skills. Designing a scalable and cohesive design system required a deep understanding of both user needs and technical constraints, and I was able to leverage my expertise to create a system that met both design and development requirements. The complexity of the project also allowed me to grow as a leader, particularly in my ability to coordinate and delegate tasks effectively across different teams, roles and time zones.
Coordinating the rollout of the design system enhanced my leadership and delegation abilities, as I needed to ensure alignment across multiple teams with varying priorities and constraints. I also learned the importance of adaptability—whether it was adapting a component to fit technical constraints or adjusting the rollout plan to accommodate shifting timelines, flexibility was key to the project's success. This experience has strengthened my confidence in managing complex projects and leading cross-functional teams, skills that I will carry forward into future projects.
The success of the Helix Design System has laid a strong foundation for future design projects and improved collaboration models. It has provided a blueprint for how to successfully implement large-scale design changes while minimizing disruption and maximizing efficiency. Moving forward, the Helix Design System will continue to evolve, and I am excited to see how it will be applied to new products and features, ultimately contributing to a more cohesive and user-friendly product suite.
.png)
.png)
