For the past five years of my career I’ve been working as a consultant in the front-end architecture niche (see also my full CV for previous roles). Here are some highlights of my and my team’s work:
Internal Data Dashboards (Typical Project)
Most of my and my team’s contract engagements in the last five years were with large corporate clients, building out the UI components of data-oriented dashboards, shoulder-to-shoulder with a team of consultant experts. Partnering with other technical principals, we were responsible for the presentation layer that assembles and displays data from disparate internal sources, evolving a complex “data explorer UI” user story.
Interactive, animated graphs, customizable pivot tables with hierarchical row display, dynamic type-ahead searching were integrated to communicate with backend code via GraphQL or REST, all deployed in the enterprise CI context. High fidelity to designs and consumer-level user interface fit-and-finish were a priority. In some cases I also contributed to the raw dataset formatting efforts and ETL strategies to help fit the expected UX.
Drop-in Prepaid Mobility Reseller Solution
A large telecom client entrusted me to be a tech lead on an effort to integrate an off-the-shelf ecommerce platform with the complex and customizable needs of reselling mobile service on top of a low-level provisioning API.
Bringing me back to my tech-generalist roots, this was a challenging multi-year process of discovering and architecting dozens of intersecting requirements, from presenting a brandable mobile subscriber storefront to shipping a physical SIM, to provisioning connectivity, to charging location-based regulatory fees, to auto-pay, to self-serve UI, to CRM integration, to add-on offering management, to multi-tenancy and many many more. All coordinated across several internal teams with limited exposure to each other.
As expected on a project of this scale, most of my time spent – and the value that I added – was on coordination tasks, documentation and listening to stakeholders (and asking them the right questions!). Like never before I came to appreciate the benefits of clear mental models, consistent in-depth communication and pragmatic technology choices that fit the available staffing.
Beverage Kiosk Touchscreen
A startup client in the hardware space had an innovative kiosk beverage dispenser platform that offered personalizable drinks, premade recipes, natural additives and optional payments. I was engaged to help build the main touchscreen interface for the kiosk – with a goal to “wow” new customers and reliably support returning regulars.
While we were able to use React and web view rendering for this specialized interaction experience, there were many challenges in keeping performance responsive and crisp on the limited embedded CPU+GPU board. We also invested a lot of effort into ensuring that the UI code, running possibly for weeks and months without restarting, did not lock up in odd states, had deep telemetry and debuggability, and safely handled contactless payment transactions.
Projects like this are a great test of attention to detail and little interaction details that we take for granted: for example, the branded on-screen QWERTY keyboard that we built had to robustly handle quick multi-taps (users typing with both hands), animations were fine-tuned to feel fast and “to the point” – we even recorded slow-motion video to debug animation “jank” or stutter. I felt very lucky to get an opportunity to zoom in so deeply on a slice of user delight.
Promotional Booking Platform
Our customer needed a bespoke booking workflow for third-party vendors to engage a team of brand ambassadors on retail floors of a top-3 Canadian grocery chain. We built an application with a complex multi-step “wizard-style” interface to help users enter 20-40 pieces of information, including date ranges and data tables. In addition, capacity visualization and approval lifecycle UIs were implemented for a full administrative workflow.
The application was to be integrated into a traditional CMS – the team created a Gulp-based build script to manage the overall CMS theme, and then integrated Webpack and other React-specific tooling inside it.
Online Interactive Healthcare
We worked with a Toronto-based healthcare platform provider to extend the provider’s React-based web front-end with advanced features such as real-time chat, a robust initial user onboarding experience and improved video call features. In parallel, the code compilation infrastructure was smoothly transitioned from using Browserify to Webpack.
The team confidently kept up with the project’s brisk timeline expectations and evolving specification surface. The build-out presented challenges unique to the healthcare industry: stringent privacy and compliance concerns, strong emphasis on simplicity, readability and usability, broad set of supported user devices (ranging from legacy PC desktops to iPhones).
Google Chrome Calendar Extension
A mid-size product team needed to offer customers a custom browser extension to allow them to seamlessly add a new UI widget to their existing Google Calendar (in G Suite). The widget then communicated with the product backend to create new calendar events and insert information into existing ones. Full product branding was preserved across the embedded user interface elements.
We found a natural fit for a React-driven front-end architecture to power both the custom UI widget embedded inside G Suite tab content and the browser toolbar dropdown used for session management. The development team customized a stock Webpack build pipeline to automatically generate deployable Chrome Web Store artifacts – one per brand/language combination – and also added parallel support for Safari with maximum code reuse.
Desktop Video Client in Electron (Chromium Embedded Framework)
A Toronto-based healthcare platform provider faced a difficult UI challenge: building a native desktop video-call and screensharing client, while avoiding the costs of building and maintaining a dedicated native OS codebase. We architected and built a solution using a hybrid approach with the Electron app framework as the foundation.
Our team built out a user interface using React inside the Electron web view – maximizing component and skill reuse for the existing internal web development team. Then, native video SDK widget and API calls were integrated into the Electron layer using the V8/Node.js C++ add-on toolkit, keeping the C++ overhead work to a minimum. The resulting client app had native-level performance during video calls but still benefited from the rapid iteration and lower costs of a web-based development workflow.
unframework 
You must be logged in to post a comment.