Challenge
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.
Solution
Address the gap in traffic management by providing an affordable, user-friendly platform that works with any traffic controller, regardless of manufacturer. It simplifies operations with a single, intuitive interface that allows field operators to easily manage controllers, whether connected via Wi-Fi or wired systems.
FENYX should eliminate the challenges of outdated systems and resource limitations, making traffic management more efficient and accessible for smaller municipalities.
Role
UI/UX Designer, UI Developer
Deliverables
Hi-Fi Design Prototypes
UI Components
Marketing Materials
User Guides
Industry
Traffic Management
Duration
Dec 2022 - Aug 2024
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.
Step 1: 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
Early Concept Ideation
MVP User Flow and Wireframes
Concept Design and Validation
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 created high-fidelity UI designs with refined user flows and facilitated seamless design handoffs. Collaborating with developers, I contributed to the frontend using React.js, TypeScript, and MUI. The concept was validated through feedback from leadership, traffic analysts, and field workers, and received acclaim at ITS Canada 2023 in Vancouver, described as a "Wooah moment."
Design Enhancement
Extended Exploration of Other Modules
New FENYX Design System
During this stage, I focused on creating a scalable, unique, and cohesive design language. I developed a new design system featuring a distinctive glass-themed style guide tailored for both light and dark modes, establishing a consistent visual language across the interface.
Cross Functional Collaboration
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.
Login Screen
The streamlined login process ensures quick access for authorized users while also providing a seamless experience for unauthorized logins.
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.
Phase Times
Time configurations can now be made effortlessly, allowing data to be configured in just minutes—something that used to be a hassle.
Phase 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.
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 behaviors 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.