Teal Health

Typography, color, spacing, and components were defined in Figma and carried into Webflow on Lumos, with tokens shared across light, dark, and brand themes. The work was principal-led across design and development, with no handoffs. Responsive behavior, component reuse, and CMS structure were planned together, so decisions made in design survived into the build.

The resulting system gave the team reusable patterns for product pages, campaigns, and sign-up journeys, with the Teal Wand product page and its pricing and sign-up flow built from the same components as the rest of the site. Layout animations and interactions were tested across devices, including mobile Safari, where animation and video behavior tend to break first.

HubSpot, analytics, and consent management remained part of the site, so performance had to be won around them rather than by removing them. Script loading was reworked so page content takes priority and third-party tools wait until they are needed, and media loading was structured to protect layout stability.

The recorded mobile PageSpeed report shows a passed Core Web Vitals assessment based on real-user data: 1.5-second Largest Contentful Paint, 128 ms Interaction to Next Paint, and zero Cumulative Layout Shift. That zero means pages do not jump as they load, on a site that still runs marketing scripts on every page.

For a healthcare product, accessibility was treated as part of the build rather than a post-launch audit item. Work covered semantic structure, ARIA roles, accessible names on embedded HubSpot forms, and keyboard-operable interactions across the site's menus, accordions, and sliders.

Automated checks were paired with manual testing, including full keyboard navigation, and findings were addressed directly in the site's markup and behavior rather than logged for later. The same standards now apply to new pages added under the ongoing engagement.