Context: Modernizing a Mission-Critical Financial Workflow
A new bank deposit (transfer) workflow needed to be designed and implemented within the Driver and Vehicle Internal Solution—a large-scale, enterprise-grade platform currently undergoing modernization.
System Background
The Driver and Vehicle Internal Solution is part of the broader ServiceOntario application ecosystem. It is an internal, over-the-counter platform used exclusively by licensed ServiceOntario agents (“tills”) to process high-stakes citizen services such as identity verification and official document issuance.
👉 Large-scale, multi-team system with complex transactional workflows.
Problem Statement: Ensuring Reliable End-of-Day Financial Reconciliation
Service agents collect payments throughout the day. At closing, supervisors must reconcile and transfer all collected funds to the bank.
👉 A high-risk operation requiring accuracy, auditability, and ease of use
My Role: Owning a Core Segment of the Workflow
I was responsible for the end-to-end development of approximately one-third of the bank deposit flow, working within a distributed team model where other segments were owned by parallel teams.
👉 Focused on multi-step UX, validation logic, and integration readiness.
Execution Approach: From Requirements to Production-Ready Flow
Step 1: De-risking Through Requirement and UX Alignment
I began by cross-referencing user stories with Figma prototypes to build a complete understanding of the workflow—covering both business intent and interaction design.
To eliminate ambiguity early, I collaborated with the Lead UX Designer and Business Analyst to validate assumptions and clarify edge cases.
This upfront alignment allowed me to:
Refine the interaction model
Anticipate edge scenarios
Establish a clear development strategy before writing code
Step 2: Creating an Integration-Safe Development Environment
Since the parent feature and routing structure were still under development, I created a temporary, isolated development environment within the application.
This included:
A temporary route and navigation entry point
A page wrapper mirroring the parent container
This approach allowed me to:
Develop within real application constraints
Ensure layout and state compatibility
Minimize integration risk once the full feature was assembled
Step 3: Assembling the UI Skeleton (Structure Before Logic)
With requirements clarified, I focused on assembling the UI structure first, independent of business logic.
I:
Composed the page using existing design system components
Prioritized layout accuracy and flow continuity
Deferred business rules to a later phase
This allowed me to quickly establish a visual and structural baseline for the multi-step workflow.
Styling inconsistencies were expected at this stage and intentionally deprioritized in favor of structural completeness.
Demonstration of the first two steps of the bank deposit workflow, assembled using existing components and powered by mocked data, prior to business logic integration.
Step 4: Incremental Logic Implementation
Given the complexity of the workflow, I adopted an incremental logic strategy—starting with simple rules and progressively introducing more advanced behaviors.
Initial implementation focused on:
Conditional rendering of call-to-action buttons to validate step navigation
Enhancing data tables to support dynamic content and lightweight calculations
Throughout this phase, I continuously referenced user stories to ensure full business rule coverage while iteratively improving the logic.
The objective was to maintain a balance between functional correctness and progressive complexity management.
Demonstration of enhanced form intelligence within the bank deposit workflow. When the total deposit amount does not match the combined cash and cheque amounts entered by the user, the system automatically detects the variance and surfaces contextual validation feedback. The implementation includes: - A critical alert banner displayed at the top of the page - A warning state within the form highlighting the discrepancy - Conditional rendering of additional justification fields requiring supervisors to document the reason for the variance in detail This logic helps enforce financial traceability, improve audit readiness, and reduce reconciliation errors during end-of-day deposit operations.
Challenge: Adapting to Evolving Business Rules
A key requirement shift occurred during development.
Initially, the workflow required users to manually input the USD exchange rate. This approach was later revised:
The system would fetch the daily exchange rate via API
Manual input would only be required as a fallback mechanism in case of API failure
To accommodate this change, I:
Refactored the form to support conditional data sourcing
Introduced a fallback UX pattern (modal interaction)
Ensured minimal disruption to the existing flow structure
This demonstrated the importance of building flexible, adaptable UI architectures in evolving enterprise environments.
Comparison of initial and updated implementations: transition from manual USD rate input to API-driven logic with fallback modal handling in case of failure.
Fixing Small Visual Discrepancies with Design Prototypes
In enterprise application development, implementing business rules and workflow logic always takes precedence over pixel-perfect styling. Once the core functionality is stable, I perform a final UI refinement pass to eliminate visual discrepancies and bring the implementation into close alignment with the approved Figma prototypes.
Side-by-side comparison of a bank deposit workflow step in Figma, the initial localhost implementation, and the final polished version after resolving spacing, typography, and layout discrepancies.
Leveraging AI for Accelerated Development (GitHub Copilot)
To maximize efficiency, I focused on architecture, decision-making, and problem decomposition, while delegating repetitive and boilerplate-heavy tasks to AI.
Using GitHub Copilot, I accelerated development in areas such as:
Generating composite components and reusable structures
Scaffolding temporary routes and resolving permission constraints
Implementing step-based navigation logic
Discovering and integrating existing components from the codebase
Facilitating state management across steps (e.g., Zustand)
Assisting with styling, refactoring, and optimization
This workflow allowed me to maintain a strong focus on:
System design
UX correctness
Business rule implementation
How It Works (Deep Dive)
This section is optional for readers who want a deeper understanding of the system, constraints, and implementation approach.
System Scale and Constraints
The Driver and Vehicle Internal Solution system operates at significant scale:
Used daily by thousands of agents across the province
Supports complex, multi-step transactional workflows
Maintained and modernized by multiple cross-functional teams (hundreds of contributors)
The modernization effort introduces new UI patterns, architectural standards, and integration constraints, requiring careful alignment across teams.
Financial Reconciliation Challenges
The End-of-Day Financial Reconciliation introduces several challenges:
Accuracy: Ensuring all transactions are accounted for
Usability: Supporting non-technical users in high-pressure, end-of-day scenarios
Traceability: Maintaining audit-friendly records of financial transfers
Scalability: Supporting high transaction volumes across distributed locations
The goal was to deliver a guided, error-resistant multi-step workflow that standardizes and simplifies this critical operation.
My Responsibilities
My responsibilities included:
Translating Figma prototypes and user stories into production-ready UI components
Designing state-driven multi-step interactions (form orchestration, validation, navigation logic)
Ensuring consistency with the design system and accessibility standards (WCAG compliance)
Collaborating with adjacent teams to prevent functional overlap and ensure seamless integration