Wealthbox

Nov 2024 - Present

Front End Engineer at Wealthbox currently building out complex user facing features for the platform.

Implementing Broker Dealer Affiliation Management Configuration

The product needed a way to support large broker dealers whose policies affected thousands of advisors under their umbrella. These firms often required specific features to be enabled or disabled and mandated custom language throughout the interface. Without a systematic way to correlate each advisor to their broker dealer, the team could not fulfill contractual requirements or expand into new accounts.

The engineering team designed an affiliation pattern that combined scoped settings with per-broker toggles. This allowed the platform to adjust behavior for everything from disabling print buttons to injecting firm-specific text or popups. My role focused on building the administrative interface in the Ruby on Rails environment. I implemented the full CRUD experience in Rails Admin, including structured forms for configuration inputs, validation guardrails, and a clear workflow for managing affiliations at scale.

The new admin tooling gave internal teams a reliable way to onboard and manage high-volume broker dealer relationships. As soon as the system was in place, sales gained access to opportunities that had previously been blocked due to missing compliance-driven configuration controls. The feature became a foundational pattern for handling firm-specific requirements across the platform.

Reflection

This project underscored the value of creating configuration systems that scale with customer structure rather than code structure. Even though my work centered on the Rails Admin surface, it contributed to a broader, flexible pattern that supports growth across multiple lines of business.

Introducing Storybook to Modernize an Internal Design System

When I joined the team, our design system relied on a custom documentation site that required symlinking npm modules into a separate host application to preview components. This setup made local development slow and fragile, and the manually maintained docs often drifted from the actual implementation. The workflow created friction for both contributors and reviewers.

I introduced Storybook as a dedicated environment for building, testing, and documenting components without relying on an external repo. Using React 17, Vite, and Storybook 9, I built a self-contained setup that mirrored our production build pipeline. I added global theming so Storybook reflected the look and feel of our internal tools, and I standardized the structure of component stories using CSF for consistency and easier onboarding.

To replace the old hand-written documentation, I enabled Storybook Docs, Controls, A11y, Interactions, and Tests. This allowed props, examples, and accessibility checks to be generated directly from source. Developers could interact with components, explore edge cases, and verify behavior through interactive stories instead of relying on stale documentation pages. I also ensured Storybook could be built and viewed in isolation through a single command, removing the need for symlinked modules.

For visibility across teams, we published the static Storybook build to GitHub Pages. This gave designers and product reviewers a predictable, always-updated reference for every component and state, which reduced back-and-forth during reviews and made it easier to spot gaps in coverage.

Reflection

This work provided a unified space where contributors could build and verify components end-to-end without attaching them to a consuming application. More importantly, it reinforced a key principle. A design system becomes more reliable when documentation, testing, and visual exploration all originate from the source of truth rather than from parallel manual processes.

AI notetaker onboarding flow

The AI notetaker launched as a fully green field product, and the team needed a way for users to activate it without manual guidance. New customers had to understand the value, authenticate with their email provider, sync calendars, and set custom behavior. Without a dedicated onboarding path, adoption would have been slow and operationally expensive.

I built the majority of the UI for this flow and introduced patterns that became core to the product. The experience opened with a clear explanation of the notetaker's purpose, then transitioned into a guided multi step setup. Users authenticated with their preferred email service, selected the account they wanted to use, and configured custom settings that defined how the bot would behave. The implementation used React with the Context API and use-react-form to manage coordinated state across steps. I collaborated closely with design, product, and the CEO to ensure the flow supported both usability and the broader vision for the feature.

While building the flow, I created reusable primitives that strengthened the foundation of the codebase. The headless tabs component became the backbone for step driven interfaces across the application. The TypeScript based steps factory introduced stronger typing and reliable autocomplete for multi step patterns, which improved consistency and reduced onboarding time for future features. These utilities were adopted across the team as the product expanded.

A key challenge involved managing incomplete or fragmented user states. Some users started the process and left before finishing, and others triggered calendar syncing from different areas of the application. The onboarding logic had to recognize these scenarios, avoid sending users into loops, and guide them back to the correct state. Solving this created a smoother flow and lowered early support volume tied to setup confusion.

The final experience allowed users to sync calendars and begin sending the notetaker to meetings in under five steps. Feedback showed strong comprehension of the product's value, and the average time to complete setup dropped significantly. The notetaker generated over two hundred thousand dollars in ARR during the first month. This work highlighted how early investment in flexible UI patterns and resilient state handling can accelerate product development and support rapid growth.

Reflection

This project underscored the value of building flexible primitives early in a product's lifecycle. The headless tabs system and TypeScript step factory proved that small foundational patterns can accelerate development and raise code quality across the entire application.