FENYX
Modernizing Traffic Management with a Universal Interface
With a user-centred approach, the goal was to design an intuitive, digital interface that simplifies manual tasks and streamlines traffic management operations, making it highly user-friendly for field operators.
Role: UI/UX Designer, UI Developer
Deliverables: Hi-Fi Design Prototypes, UI Components, User Onboarding Guides
Industry: Traffic Management
Duration: Dec 2022 to Aug 2024
Team: Fahad Shuja, Shayan Ghazi, Kevin, Liam Cook
What was the problem?
Traffic management in North America suffers from outdated systems, manual processes, and limited resources, leading to inefficiencies and physical strain on operators.
Smaller municipalities struggle to modernize. Underserved communities are further hindered by the inability to afford modern solutions, relying on ineffective systems.
What are we solving?
Address the gap in traffic management by providing an affordable, user-friendly platform that works with any traffic controller, regardless of manufacturer.
Simplifies operations with a single, intuitive interface that allows field operators to easily manage controllers, whether connected via Wi-Fi or wired systems.
Should eliminate the challenges of outdated systems and resource limitations, making traffic management more efficient and accessible for smaller municipalities.
Multiple Perspective, One Goal
I started thinking about how might we solve the following insights in an efficient way:
Simplify Controller Adjustments: Offers a consistent and user-friendly interface across all controllers.
Enable Advanced Configuration: Easily handle advanced configurations like preemption, timing adjustments, and data copying. Making once-complicated tasks effortless.
Eliminate Paperwork: Directly log and adjust data within the app, removing the need for manual record keeping.
Reduce Physical and Cognitive Strain: Field operators, often aged 45-65, face demanding workloads, including configuring controllers manually in challenging conditions.
Centralizes Operations: Allowing traffic analysts to manage and adjust traffic system seamlessly from office environment.
Discovering the Undiscovered
I tried to stick to the mentioned design process, still had face some highs and lows in the approach, Discovery Phase was done with Director of product and senior team members. I was given insights and some idea of how they wanted the product.
Discovery Sprint
During this sprint, we prioritized the essentials by focusing on the MVP, ensuring that core needs were addressed and all stakeholders were aligned.
Early User Needs: Simplified workflows for timing configuration and controller profiles.
Technical Feasibility: Collaboration with development leads ensured and proposed solution aligned with system capabilities.
External Validation: Positive feedback from traffic analysts and field workers confirmed the usability and effectiveness of the design.
I began with low-fidelity wireframes, focusing on two core modules: Phase Times (simplifying timing configurations) and Controller Profile (supporting controller setup). This approach enabled quick concept visualization and refinement through early feedback.
Concept Validation
I designed high-fidelity UI and workflows and partnered closely with engineers, contributing to frontend implementation using React, TypeScript, and MUI. The solution was validated with leadership and municipal stakeholders and showcased at ITS Canada 2023, where it drew strong engagement.
Design Enhancement
After concept validation, I led a visual and experiential evolution of the product. I deepened my understanding of NTCIP workflows and field level challenges through additional user interviews, shaping a more purposeful and grounded experience.
These are the rejected design due to lack of clarity in the user flow, and resulted in confusion and cognitive loading among tested users
Refined Wireframe
Introduced key operational modules, including Preemption and Phase Options
Refined end to end user journeys for complex tasks
Elevated the interface with a polished glass system supporting light and dark modes
Cross Functional Collaboration
After crafting detailed and user-centered designs, I collaborated closely with the engineering team to ensure a seamless transition from concept to implementation. Beyond handing off the designs, I actively participated in the development process by assisting in building components and layouts that aligned perfectly with the design specifications. By bridging the gap between design and development, I streamlined workflows, reduced iteration cycles, and enhanced the efficiency of the engineering team. This hands-on approach not only ensured design fidelity but also accelerated the overall development timeline, driving the project toward successful delivery.
Components
Final Screens
After crafting detailed and user centered designs, I collaborated closely with the engineering team to ensure a seamless transition from concept to implementation. Beyond handing off the designs, I actively participated in the development process by assisting in building components and layouts that aligned perfectly with the design specifications. By bridging the gap between design and development, I streamlined workflows, reduced iteration cycles, and enhanced the efficiency of the engineering team. This hands-on approach not only ensured design fidelity but also accelerated the overall development timeline, driving the project toward successful delivery.
Home Screen
The Intersection name and Intersection ID, previously written on paper, have now been transformed into sleek, card-based designs featuring search and filter options, along with real-time connectivity status.
Controller Profile
Controller details can be updated with just a few clicks, and the controller location can be easily adjusted with minimal effort.
Times
Time configurations can now be made effortlessly, allowing data to be configured in just minutes—something that used to be a hassle.
Options
Configuring options now provides real-time feedback and highlights potential errors, ensuring that field operators can make adjustments before finalizing the configuration, eliminating the risk of errors during the process.
Preemption
Previously, only a few people in the region knew how to configure preemption due to its complexity. Now, it's transformed into an engaging and interactive workflow, significantly reducing configuration time and making the process much more accessible.
The Final Call
Ultimately, our team succeeded in creating a unified and intuitive solution for controller configuration and management. The FENYX app achieved exceptional results, redefining user expectations while maintaining simplicity and usability across various controllers.
Winning Moments
Overall Task Success Rate: 92%: Users successfully completed assigned tasks with minimal guidance.
Average Task Completion Time: 3.2 minutes per task: Tasks were completed efficiently, showcasing the app's ease of use.
Unanimously Positive User Feedback: Some users were so impressed that they doubted a single interface could work seamlessly for all controllers.
Innovative Controller Management: The app introduced a fresh and unique way to configure and manage controllers, setting a new standard in the industry.
UX Psychology Principles: Designed with familiar yet dynamic patterns combining slight complexity to engage users with a friendly, intuitive interface leveraging learned behaviours while encouraging exploration.
Lessons Learned
Adapting to Diverse Needs: Addressing a wide spectrum of user requirements reinforced the importance of balancing simplicity with advanced functionality.
Stakeholder Collaboration: Managing diverse expectations from engineering, design, and end-users required continuous alignment but drove better results.
Iterate to Innovate: Embracing iterations and user feedback was critical in refining the design to achieve success across multiple use cases.
Unified Experience Matters: A single interface for multiple controllers requires innovative thinking but ultimately creates a superior user experience.