Problem
Energy brokers use MyServiceCloud, the platform behind Broker Online Exchange, to manage customers, accounts, quotes, proposals, contracts, documents, and reporting. Dense tables and multi-step forms had to preserve progress, handle interdependent validation, and stay understandable during everyday business use.
After AppDirect acquired the company, the team also needed to adopt a new design language while continuing to maintain and extend the production application.
My responsibility
I led two engineers and owned frontend architecture, component patterns, code review, and mentorship. I worked with the PHP team on API contracts and release readiness. My tenure covered nearly five years: four at Broker Online Exchange and the final period after the acquisition.
The design system was a studio collaboration. My team's responsibility was turning that design into the live, stateful application.
Key decision: migrate in slices
I led an incremental re-theme rather than a full application rewrite. Shared tokens and component patterns moved first; product areas followed. React, Mantine, and Zustand supported new areas alongside the existing Vue application.
This kept the migration compatible with ongoing feature delivery. The tradeoff was maintaining clear boundaries between two frontend stacks: deciding where new features belonged, reviewing shared patterns, and helping the team apply them consistently.
What shipped
- Customer, account, quoting, proposal, contract, and document workflows in a production platform.
- An incremental design-system migration with shared tokens and repeatable components.
- Bill Scan to Quote: a broker uploads a utility bill, Gemini Vision extracts structured fields, and the broker reviews and corrects them before continuing to a quote.
The bill-scanning flow keeps the original source available and allows corrections without restarting. Poor photos, multi-page documents, and uncertain fields made the review interface as important as extraction itself.
Product evidence
The application is restricted to registered brokers. The company's public walkthrough shows the customer and quoting flow my team built and maintained.
A focused sample of the live workflow: customer setup, quoting, proposals, and contract generation. The frontend in these flows is what my team and I built and maintained. full resource hub ↗
The redacted design-system images below show the interface components used in the implementation. They complement the production walkthroughs.
Technical detail
Vue 3 and TypeScript supported the existing application. New areas used React, Mantine, and Zustand. I coordinated frontend contracts with the backend team across Yii and Laravel services, and Gemini Vision provided bill extraction.
The recurring engineering work was keeping validation, partial progress, API failures, and mixed-stack boundaries predictable for users and for the engineers shipping the next feature.