SCATS Access UX/UI Redesign Project: Enhancing User Interface for TransportNSW

Who is Transport NSW, and what is SCATS?

Transport for New South Wales (TfNSW) is pivotal in orchestrating regional transportation services, and this case study focuses on the Sydney Coordinated Adaptive Traffic System (SCATS). This sophisticated traffic management platform optimises traffic flow by dynamically adjusting signal timings based on real-time conditions. As a Senior UI Lead designer, my involvement in the SCATS Access UX/UI redesign project aimed to lead and elevate user experience and interface design, fostering more efficient and user-friendly traffic management for the professionals at TfNSW.

Problem Space

The initial rendition of the SCATS Access platform has garnered insightful feedback from our valued clientele, propelling us into an optimistic journey of enhancing user experience and interface design.

Our discerning customers have initiated a constructive dialogue with questions like “When are you going to upgrade SCATS Access?” and “When are you going to build a new UI?” These inquiries reflect their high expectations and aspiration for a more streamlined and engaging platform.

The wealth of information within the platform is undeniable; however, the challenge lies in its presentation. Navigating its intricacies has been described as a rewarding journey that takes dedication—three to four years of training to grasp the fundamentals and a commendable decade to master its depths. This enduring commitment exemplifies the platform’s wealth of opportunities and our customers’ dedication to harnessing its full potential.

In harmony with these insights, our user surveys have spoken volumes. 58% of respondents have expressed a keen desire for an updated user interface. This collective voice resonates with positivity and proactive eagerness for change, illustrating our customers’ strong engagement and investment in shaping the platform’s future.

In testimonials, we find expressions that convey more than just sentiments; they represent an impetus for transformation. The term “Monster,” often used to describe the current SCATS Access application, highlights untapped potential and optimism. It is a symbolic reflection of the robust capabilities within, waiting to be harnessed effectively.

The amalgamation of these perspectives ignites our passion to embark on the SCATS Access UX/UI redesign project. It’s a journey towards creating a platform that fulfils expectations and exceeds them. By weaving these constructive voices into our redesign, we cultivate a landscape where user-friendliness, efficiency, and innovation converge, driving us closer to a future of enhanced traffic management for New South Wales.

My Role

In my capacity as the Senior UI Lead, I assumed a multifaceted role that wielded a significant impact on the project’s trajectory. Central to this role was orchestrating various activities, each intrinsically linked to the project’s ultimate success. Employing an expertly honed skill set, I embarked on an immersive journey that spanned research, collaboration, and design methodology, converging towards creating a refined user interface.

My responsibilities commenced with an in-depth foray into comprehensive research. This investigative phase allowed me to uncover nuanced insights that would subsequently serve as the bedrock for informed design decisions. In parallel, I undertook the pivotal role of fostering a harmonious synergy with stakeholders. This collaborative endeavour was underpinned by a meticulous choreography of conversations and consultations, meticulously aligned with their vision while integrating design acumen.

Within this contextual framework, the application of design methodologies took centre stage. I artfully harnessed these principles to craft an interface that resonated with a symbiotic blend of visual elegance and operational functionality. Beyond aesthetics, my role was marked by its pivotal position in bridging the chasm between user requisites and the intricate technical nuances inherent to the SCATS system.

This strategic alignment was not merely the culmination of my professional responsibilities; it was an orchestration of expertise guided by the hand of experience. It facilitated the seamless fusion of user-centric expectations and the demands of a complex technical landscape. The result was an interface that emanated sophistication, resonating with the essence of operational finesse.

As the Senior UI Lead, my presence transcended the boundaries of a conventional role. It embodied meticulous precision, an exemplification of harmonious synthesis, and a testament to the significance of well-orchestrated design leadership in driving transformative projects forward.

The Process

SCATS Access - the UI Process

SCATS Access – the UI Process

  • UX / UI Handover
    Before Concepting, the UX/UI Handover marked a pivotal juncture. Collaborative journey with the Product and UX teams reached a zenith. Not just the exchange of information; the harmonious interplay of shared expertise, mutual insights, and aligned aspirations set the stage for the forthcoming design odyssey. Depth of collaboration materialised in a comprehensive UX/UI blueprint tailored to encapsulate a fusion of user experience intricacies and interface design finesse. It is a blueprint more than a roadmap; it embodies a strategic compass, charting a trajectory for creative exploration. Every facet of the blueprint is refined precisely, ensuring seamless alignment with the project’s overarching vision and strategic imperatives.

    SCATS - UI Process - Phase - UX UI hand over

    SCATS – UI Process – Phase – UX UI handover

    The rich tapestry of insights, goals, and aspirations woven during collective endeavour became the guiding light for the unfolding design journey. The potency of interdisciplinary collaboration steered the project towards a trajectory where design brilliance harmoniously intertwined with operational excellence. Phase stood as the architect’s blueprint, erecting intricate scaffolding upon which the entire UI process was meticulously constructed. UX/UI Handover is not just a phase; the cornerstone of a meticulously laid foundation, elevating the project towards a transformative destination.

  • Concepting
    Having deftly handed over the comprehensive UX/UI blueprint, I embarked on the Concepting phase. This stage epitomised a creative expedition, wherein I took on a leadership role within the design team. We meticulously synchronised our efforts and research in harmonious collaboration with the Product and UX teams. This collaboration extended beyond the design realm, closely aligning with the TfNSW marketing team. Our design seamlessly resonated with the brand’s ethos, creating a unified and coherent user experience. Concurrently, another pivotal facet emerged in crafting the Design System for SCATS. This undertaking ran parallel to the Concepting phase, aiming to lay a robust foundation to imbue the interface with captivating visual aesthetics and ensure functional consistency.

    SCATS - UI process - Phase - Design System 01

    SCATS – UI process – Phase – Design System 01

    SCATS - UI process - Phase - Design System 02

    SCATS – UI process – Phase – Design System 02

    Throughout the Concepting phase, my collective focus was steadfastly directed at precisely synchronising our research and insights. This alignment provided fertile ground for forging diverse design concepts, each meticulously tailored to harmonize with the project’s overarching vision. With exacting attention, every design concept underwent a process of ethical refinement. This meticulous endeavour stood a testament to our unwavering commitment to crafting solutions embodying intuitive user interaction and captivating visual aesthetics.

    SCATS - UI process - Phase - Concepting - Change Cycle Length

    SCATS – UI process – Phase – Concepting – Change Cycle Length

     

    SCATS - UI process - Phase - Concepting - Coordination

    SCATS – UI process – Phase – Concepting – Coordination

    My collaborative design process’s harmonious synergy underscored our shared dedication to attaining design excellence. This dedication was intrinsically linked to the paramount goal of delivering a seamless and impactful user experience. As the Concepting phase unfolded, this commitment became the driving force propelling us towards a design that not only fulfilled but surpassed the expectations of our stakeholders and end-users.

  • Testing and Validation
    Guided by the blueprint, I underwent rigorous testing and validation. This phase went beyond the perimeters of design, encompassing a collaborative engagement with the Product Owner and other stakeholders. Working in tandem, the team orchestrated comprehensive demos to showcase the evolving UI design, seeking valuable feedback to enrich the refinement process. Within this comprehensive evaluation framework, every facet of the design encountered meticulous scrutiny. From functionality to visual allure and user engagement, each aspect underwent exacting evaluation.

    This iterative process stood as a testament to our commitment to sculpting the evolving UI design into a seamless embodiment of the intended user experience. The synergy of collaborative engagement, both within the design team and with stakeholders, exemplified our dedication to meeting and exceeding expectations. This rigorous testing and validation phase represented a harmonious convergence of meticulous attention and insightful feedback, driving the project design journey toward its pinnacle of finesse and effectiveness.
  • Finalising
    The culmination of the testing phase led to the meticulous finalising of the UI design. This phase was marked by a collaborative partnership that extended beyond the design realm, encompassing developers’ invaluable expertise and the QA teams’ detailed attention. Drawing insights and feedback harvested from testing, I orchestrated the integration of refinements with surgical precision. Each adjustment was orchestrated to elevate the interface, ensuring alignment with the overarching UX/UI blueprint. This intricate dance between design ingenuity and a comprehensive blueprint resulted in a harmonious fusion where form and function converged seamlessly.

    SCATS Cornerstone Graphic

    SCATS Cornerstone Graphic

    This collaborative endeavour manifested our commitment to delivering a product that transcends expectations. The engagement of developers and QA teams in the finalising phase was a testament to the project’s holistic approach, where every facet of the UI design was meticulously honed to meet the highest functionality and visual elegance standards. The outcome was a design that resonated with operational excellence and user-centric finesse, a testimony to the convergence of multidisciplinary expertise.

  • UI / Dev Handover
    As the UI design reached its pinnacle, a pivotal transition awaited – the UI/Dev handover. This marked the seamless transmutation of the refined design from its conceptual realm to the tangible landscape of development. With utmost clarity, I facilitated the transfer of comprehensive design assets and specifications, establishing a robust foundation for a coherent and synergistic journey towards development. However, this handover wasn’t just a transfer of files; it introduced an innovative approach to ensure the sustained alignment of design integrity during the development phase. Recognizing the significance of streamlined collaboration, I introduced a refined working methodology. I curated a dedicated Figma file, meticulously populated with the latest design iterations and stakeholder endorsements. This file emerged as the singular source of truth for the development and QA teams, offering them an unambiguous reference throughout the development trajectory. This approach seamlessly ensured the accuracy of design implementation and fostered harmonious collaboration between the design and development realms. By presenting an easily accessible repository of design components, specifications, and interactions, I bolstered the foundation for a unified and coherent journey towards development. This UI/Dev handover was more than a mere handoff; it embodied our unwavering commitment to delivering a product where design finesse effortlessly translates into the final product, ensuring an elevated and impactful user experience.

    SCATS - Figma - Project File Structure

    SCATS – Figma – Project File Structure

In essence, this UI process encapsulated the orchestration of creative concepting, exacting testing, and strategic handovers. It epitomised the transformative journey from concept to tangible reality, driven by the essence of holistic user experience and design integrity. This seamless evolution from concept to development underscored the collaborative spirit that propels senior UI designers to deliver impactful projects.

Solutions and results

  • Streamlined Navigation – the redesign prioritized intuitive navigation, providing quick access to critical information and real-time traffic updates.
  • Data Visualization – Introduced visual elements to represent complex data, enabling transportation professionals to grasp insights effortlessly.
  • Real-time Control – the redesigned interface empowered users to adjust real-time traffic signal timings, enhancing overall traffic management efficiency.
  • Enhanced User Experience – feedback from transportation professionals indicated a significantly improved experience with the new SCATS Access platform, resulting in increased user satisfaction.
  • Improved Traffic Management – the real-time control capabilities led to more efficient traffic signal adjustments, reducing congestion and minimizing travel delays.

The takeaways

The SCATS Access UX/UI redesign project exemplified the impact of thoughtful design on complex systems. The new platform’s streamlined navigation, data visualization, and real-time control capabilities have collectively contributed to enhanced traffic management efficiency, underscoring the power of user-centred design in improving critical services.

Acknowledgments and Reference

Role:
Senior UX / UI Lead
Date:
Category: