pro
Nathan Hatfield
Principal Engineer & Software Architect | Digital Platforms
New to Contra
Nathan is ready for their next project!
Wellos — Healthcare SaaS Frontend Architecture & Scalable Design Systems
Wellos was an emerging healthcare SaaS platform developed within RVO Health. The platform was being expanded to bring capabilities from established wellness programs, including Real Appeal and Quit for Life, into a more flexible, unified product experience.
These programs supported different healthcare needs, including weight management, coaching, activity tracking, and smoking cessation. The challenge was building an architecture that could support distinct customer journeys, integrations, and product branding while making it easier to add programs over time.
I joined the initiative as a Staff Software Engineer, bringing more than a decade of experience designing and implementing shared frontend component systems at scale.
Frontend Architecture & Design System
I helped establish a reusable React and TypeScript component architecture built around React Aria, Class Variance Authority (CVA), and Tailwind CSS.
React Aria provided accessible interaction primitives, while CVA enabled consistent component variants and states. We developed a shared Tailwind styling foundation that teams could adopt across the broader healthcare vertical, letting each team apply its own branding through separate theme configurations.
This approach reduced duplicated implementation work while maintaining consistency across products and giving each program flexibility in its visual identity.
Complex Workflows & Sensitive Data Boundaries
Supporting multiple healthcare programs introduced important architectural considerations. Each program required its own customer journeys, application state, and backend API interactions.
I advocated for explicit state-machine modeling to make workflow transitions and safeguards easier to reason about. When the team chose to keep its existing Redux architecture, I developed a Redux approach that established clearer boundaries between program-specific workflows.
These safeguards helped reduce the risk of unintended cross-program interactions and sensitive healthcare information being sent to unrelated services. Backend authorization and data protection remained separate responsibilities.
Hands-On Frontend Implementation
Alongside the architectural work, I translated Figma designs into React and TypeScript interfaces and implemented much of the shared component system and frontend foundation.
The goal was to give teams reusable building blocks for new features, customer journeys, and branded experiences without repeatedly rebuilding common UI functionality.
Outcome & Impact
I established key architectural patterns and delivered substantial frontend implementation supporting Wellos's planned expansion into additional healthcare programs.
My involvement concluded during a company-wide reduction in force before the broader initiative was completed. The architectural foundation and implementation work I contributed were intended to support continued development and future product expansion.
Technologies: React, TypeScript, React Aria UI Components, Class Variance Authority (CVA), Tailwind CSS, Redux, Figma
Visual Assets: An actual Wellos homepage screenshot, accompanied by conceptual illustrations of the shared frontend architecture, workflow isolation, and reusable component system. The diagrams represent architectural concepts from my work, not original internal documentation.
0
9
Building a shared foundation for Healthline Media’s digital products
Healthline Media operated multiple high-traffic digital health properties that had evolved with separate frontend implementations. As new products and experiences launched, that model created duplicated engineering work, inconsistent implementation patterns, and added maintenance overhead.
As a Staff Software Engineer at RVO Health, I helped modernize that architecture around a shared React and TypeScript platform. The work focused on building a reusable engineering foundation that could support multiple products while letting individual experiences retain their own requirements and identity.
From independent implementations to a shared platform
The modernization brought frontend development into a Rush-managed monorepo and established common architecture, shared UI components, Storybook documentation, development tooling, and engineering standards.
Rather than treating each new experience as an independent implementation, teams could build on an established foundation. Teams could develop shared functionality once and use it across products, while keeping product-specific features appropriately isolated.
My contributions included frontend architecture, reusable component patterns, TypeScript adoption, technical decision-making, architectural documentation, development standards, and collaboration with engineering and product teams as the platform evolved.
Architecture designed for reuse
A major goal was to make reuse practical without creating unnecessary coupling between products. The platform provided common foundations for UI, application structure, tooling, testing, and development workflows while leaving room for individual product needs.
This architecture also became strategically important when we developed Real Appeal RX, a new enrollment experience representing a significant business opportunity. Instead of creating another independent frontend and adding to the existing duplication, we extended the shared platform for the new product.
Engineering impact
The work's value extended beyond a framework migration. It changed how the organization could deliver new frontend experiences.
Teams gained a more consistent development model, reusable components and patterns, stronger documentation, and a foundation that could evolve across products. New work could begin from established architecture rather than repeatedly solving the same underlying engineering problems.
The result was a frontend platform designed to make future product development faster, more consistent, and easier to maintain.
About the visuals
The live Healthline experience shown here reflects the current public site and may have evolved since my direct involvement. The architecture and transformation diagrams are portfolio representations of the engineering approach and platform modernization work I contributed to during my time at RVO Health; they are not internal company artifacts.
1
80
I’m designing and developing a custom direct-to-consumer e-commerce platform for a family farm bringing its premium farm-raised meat products online. The project is focused on translating the trust, quality, and personal connection of buying directly from a local producer into a polished digital shopping experience.
The work spans UX and visual design, responsive frontend development, e-commerce architecture, product and collection experiences, and the customer journey from discovery through purchase. I’m building the platform around clear product discovery, strong brand storytelling, and a straightforward buying experience that can grow with the business.
The project is currently in development, with the foundation designed to help the farm expand beyond its local customer base while preserving the authenticity and credibility that distinguish a family-run producer.
1
99
Real Appeal RX created an opportunity to solve more than a single product launch. Rather than build another standalone enrollment experience, I led the architecture and development of a reusable platform designed to support multiple healthcare products.
The work consolidated shared enrollment patterns into a React and TypeScript architecture while preserving the flexibility required by individual products. I partnered across engineering, product, design, and business teams to define the technical approach, establish reusable development patterns, and guide implementation.
The resulting platform supported Real Appeal RX, a new enrollment experience tied to a significant business opportunity, while reducing duplicated engineering effort and building a stronger foundation for future enrollment products.
1
104