From Chaos to Clarity:
Redefining Workflow Efficiency in Legacy System
Global Notes streamlines communication in ARIA with centralized, timestamped logs and author visibility. Designed for clarity and ease, it enhances collaboration and boosts workflow efficiency.
The Challenge:
A Fragmented Workflow
It all began during user group meetings with Durham Region and Waterloo Traffic Management Centers (TMCs). As users shared their experiences with ARIA—a decade-old system managing traffic lights, scheduling, day planning, and more—it became clear that communication within ARIA was a major pain point.
UX Designer
Hi-Fi Design Prototypes
UI Components
Traffic Management
Feb, 2024 - Apr, 2024
Problem Space
The existing notes feature within ARIA was a basic text box meant to log changes. However, it lacked consistency across pages, didn’t show who left the note, and had no timestamps. Users often didn’t bother leaving notes, and those who did found their efforts wasted because others couldn’t identify the note’s author or relevance. Teams resorted to in-person conversations or endless email threads to track changes. What seemed like a minor issue snowballed into disrupted workflows and frustrated users.
I was handed the challenge:
"Find a solution to enhance communication within ARIA—quickly and with minimal developer resources."
Impacts and Hypothesis
Piecing Together the Problem
I started by immersing myself in the issue. Conversations with developers revealed the intricacies of ARIA’s backend—a decade’s worth of interconnected modules, each like a house of cards. Any significant change risked collapsing the system. "Notifications? Out of the question," they said. "We’d need six months at least." My initial idea to build a notification system was dead before it began.
The product manager’s input wasn’t encouraging either: "Keep it simple. Just improve the notes. We’re releasing this in three months." I felt the weight of balancing user needs with technical and time constraints. Then came the users. Their struggles painted a clearer picture:
UX Research and
Understanding the Problem
User Interviews
User Interviews During a session with Traffic Analyst in the Durham Region, they shared: "When I make changes to a traffic light’s timing configuration, I don’t always write it down because the current notes section doesn’t show who added it or when. If something goes wrong later, no one knows who to ask." This led to the inclusion of authorship and timestamps in the Global Notes feature, ensuring accountability
User Interviews
Scenario:
Emergency Response Miscommunication During a major intersection breakdown, multiple teams tried to coordinate repairs. A note was left in ARIA about a temporary configuration change, but it lacked a timestamp and author. As a result, a second team unknowingly overwrote the temporary fix, causing further disruptions.
Impact:
Delays in repair and frustration among teams.
Solution:
With Global Notes, the temporary fix would have been logged with a timestamp and author, preventing overwrites and miscommunication.
Current workflow
Challenges and Opportunities
Generating Ideas
User needs were mapped based on research and stories to align proposed features with real-world workflows and pain points. Detailed user flows were created to visualize and validate how users would navigate each tool, ensuring a smooth, efficient, and user-centered experience.
I thought about how we use notes in real life. When I study or work, I keep a physical notebook—something central, accessible, and reliable. What if ARIA had a digital version of that? A centralized notebook for users to log changes, accessible from anywhere in the system. Of course, sticky notes also came to mind, but the thought of 20 people adding sticky notes to a page felt chaotic. Notifications were already ruled out. Frustrated but determined, I decided to go back to basics: a user flow.
Wireframing
I sketched a simple flow for adding a note. But ARIA’s complexity meant that a simple flow wouldn’t suffice. Over days, I iterated, adding layers to handle multi-level modules, intersections, day plans, and configurations. Each iteration drained me, but slowly, a clear and efficient flow emerged. Low-fidelity wireframes followed. When I presented them to the PM and developers, there was cautious optimism. "This could work," they said, though the backend still required adjustments. I refined the flow and wireframes based on their feedback. Progress was slow, but the foundation was solid.
Designing for ARIA’s legacy UI was like walking a tightrope. A modern glass-style design would stand out like a sore thumb in a system most users had been using for over a decade. Consistency was non-negotiable.
Placement of Notes Icon: The icon needed to be visible on all pages without obstructing content. After analyzing ARIA’s layouts, I chose a floating action button (FAB). It was subtle, always accessible, and didn’t disrupt the existing interface. Popup Notes Panel: Users could add, edit, and view notes without leaving their current page. The design was simple but efficient. Multi-Level Tracking: Notes were tied to intersections, modules, and configurations. Filters allowed users to search by author, date, module, and more. Accountability Features: Each note displayed the author’s name, a timestamp, and a 24-hour edit window. Deleted notes were stored in a separate tab for transparency.
Every decision was scrutinized and tested. The developers appreciated the simplicity of the solution, and the opacity adjustment for the notes icon resolved user concerns about it being too distracting. It wasn’t perfect, but it worked.
Final Screens
Designing for ARIA’s legacy UI was like walking a tightrope. A modern glass-style design would stand out like a sore thumb in a system most users had been using for over a decade. Consistency was non-negotiable.
Placement of Notes Icon: The icon needed to be visible on all pages without obstructing content. After analyzing ARIA’s layouts, I chose a floating action button (FAB). It was subtle, always accessible, and didn’t disrupt the existing interface.
Popup Notes Panel: Users could add, edit, and view notes without leaving their current page. The design was simple but efficient.
Multi-Level Tracking: Notes were tied to intersections, modules, and configurations. Filters allowed users to search by author, date, module, and more.
Accountability Features: Each note displayed the author’s name, a timestamp, and a 24-hour edit window. Deleted notes were stored in a separate tab for transparency.
Every decision was scrutinized and tested. The developers appreciated the simplicity of the solution, and the opacity adjustment for the notes icon resolved user concerns about it being too distracting. It wasn’t perfect, but it worked.
Key Points:
Maintained legacy design consistency to avoid user confusion.
Key features:
FAB for accessibility, multi-level tracking, accountability via timestamps.
Iterative testing ensured a user-friendly design.
Building and Refining
The development stage brought its own challenges. Filtering and sorting notes across ARIA’s complex backend required constant collaboration with the dev team. Sprint by sprint, we chipped away at the hurdles.
Testing the build was a mix of fun and relief. We added hundreds of dummy notes during internal sessions, laughing at the humorous messages while ensuring functionality held up. It was a reminder that, despite the challenges, we were building something impactful.
Key Points:
Collaborated closely with developers to address backend complexities.
Internal testing validated functionality and boosted team morale.
Launch and User-feedback
The beta version was released to Durham Region and Waterloo teams. The feedback was overwhelmingly positive. "This is exactly what we needed," said one user. But there was one interesting request: "We need to delete notes, but we also need to preserve them as proof."
After brainstorming, we implemented two changes:
Notes could be deleted but would move to a "Deleted Notes" tab.
Notes could only be edited within 24 hours, ensuring integrity while allowing minor corrections. These tweaks balanced flexibility and accountability, and users embraced the solution.
Key Points:
Beta feedback led to the introduction of a "Deleted Notes" tab. 24-hour edit window ensured accountability and usability.
Updated Screens
After usability testing with a real working prototype, we identified a few potential cases that could cause confusion for users. To gain more clarity, we refined the micro-interactions and removed a few unnecessary steps to make the flow more straightforward and smooth.
Key Improvements:
Added micro-interactions to provide clear feedback on the system state.
Refined filters and tab views to align more precisely with user needs.
No notes exists on selected entity
Unread notes exists, but not on selected entity
Notes exists on selected entity
Unread notes exists and notes exists on selected entity
Collapsed View
View
Reflections and Takeaways
One week post-launch, during a feedback session, a user mentioned that the notes icon drew too much attention. A subtle tweak—reducing its opacity when inactive—resolved the issue. Today, ARIA’s Global Notes feature has over 5,000 notes in use, streamlining communication and coordination across teams.
Looking back, this project reinforced the power of simplicity. By working within constraints and focusing on user needs, we delivered a feature that transformed how ARIA users work—all without overhauling the system.
Key Points:
Reduced opacity for inactive notes icon improved usability.
Over 5,000 notes added within weeks, reflecting strong adoption.
Simplicity and user focus can lead to impactful solutions, even within legacy systems.
Conclusion
The Global Notes feature is more than just a quick fix; it’s a testament to the impact of thoughtful, user-centered design. Despite technical and time limitations, this project brought clarity, accountability, and efficiency to ARIA, proving that even legacy systems can evolve with the right approach.