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 userexperience 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 andcontextualizing the design system across each product. This included applyingthe design system to our platforms, ensuring that components worked effectively in practice, and providing developers with detailed specifications and functionalcontextualization to aid their understanding.

‍Project Coordinator: As the project coordinator, I managed the implementation, development, and sharing of the system across two separate techstacks: Ruby on Rails (which used a React front-end) and Vue (which where appropriate used the Vuetify designsystem 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 designteam in the UK, with myself based in Sydney. This included leading weeklystand-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 behaviourand specification documentation in ZeroHeight.

The Approach

1.      UIAudit: 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 designsystem would be inclusive and meet industry standards for all users, includingthose with disabilities. 

2.      Prioritization: After the audit, Icollaborated 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 efficientuse of our resources. 

3.      UX Design of New Features: The UX design of new features involved creating detailed wireframes and user flows to illustrate the intended user experience. These wireframes were shared withproduct 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 earlyin the process, enabling us to make adjustments before moving into the UIdesign phase.

4.      Application of the Design System:  Once the wireframes were validated andapproved, 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 ofadditional behaviour and design specifications. The design system needed to beboth prescriptive and adaptable, providing a solid foundation while allowingroom 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-worldinteractions, ensuring that intuitive navigation, accessibility, andoverall usability remained the foundation of our designs. Thedesign system was then leveraged to streamline workflows, unifyvisual 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, setrealistic 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 majortech 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 requiredcareful planning and smart decision-making. One of the biggest challenges wasensuring that the rollout of the design system did not place an undue burden onour development teams. To address this, I integrated the rollout of the designsystem with feature releases, which minimized the additional workload for theteam. By aligning the design system implementation with new featuredevelopment, we were able to make the most of our available resources and avoidredundant work.

Another challenge was the reliance onexisting components from the Vuetify library, which were not always a perfectmatch for our design requirements. Instead of building every component fromscratch, which would have been resource-intensive, I worked closely with thedevelopment team to adapt existing Vuetify components by adjusting the CSS toalign with the Helix design standards. This required a deep understanding ofboth the design intent and the technical capabilities of Vuetify, as well asclose collaboration with developers to ensure that the adjustments met bothvisual and functional requirements. This approach significantly reduced thetechnical workload while still allowing us to achieve the desired level ofvisual consistency and brand alignment.

Coordinating across multiple time zonesadded another layer of complexity to the project. With development teams inKuala Lumpur, the design team in the UK, and myself in Australia, effectivecommunication was critical. I established regular communication cadences,including weekly stand-ups, design reviews, and ad-hoc problem-solving sessionsas needed. Using tools like Teams, Jira, and Figma helped facilitate thiscommunication 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 strongc ommunication 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 toleverage my expertise to create a system that met both design and development requirements. The complexity of the project also allowed me to grow as aleader, particularly in my ability to coordinate and delegate tasks effectivelya cross different teams, roles and time zones.

Coordinating the rollout of the design system enhanced my leadership and delegation abilities, as I needed to ensurealignment 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-functionalteams, skills that I will carry forward into future projects.

The success of the Helix Design System has laida strong foundation for future design projects and improved collaboration models. It has provided a blueprint for how to successfully implementlarge-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.