Teal Health

Teal Health is changing how cervical cancer screening happens. The Teal Wand lets women collect their own sample at home,- no speculum, no exam table,- and for most of their audience, the website is where that decision getsmade. In consumer health, the site isn't marketing collateral; it's the product's first clinical impression. A slow page, an inconsistent layout, an inaccessible form,- each one is a person who doesn't screen.

The stakes shaped the brief. The existing site had grown page by page without a system underneath it, every new page was slower to ship and pulled the brand a little further apart. Teal Health needed the full arc from one partner: a redesign that could carry the weight of a regulated health product, a production build that converts on the devices people actually use, and ongoing ownership of the technical layer so the site keeps performing after launch.

A brand that reads as one product. Thirty pages redesigned in Figma on a single design system,- type scale, color, spacing, and components defined once, applied everywhere. The payoff isn't aesthetic consistency for its own sake: a visitor moving from homepage to product pages to sign-up never hits a seam that makes them re-evaluate who they're dealing with. For a company asking people to trust it with cancer screening, coherence is conversion. And every future page inherits the system, so the team ships in days what used to take a design cycle.

No translation loss between design and production. The Figma system maps one-to-one to the Webflow build on the Lumos framework — same components, same spacing logic, same theme system. Because design and build shared one owner, decisions about responsive behavior, component reuse, and CMS structure were made once, during design, instead of renegotiated in a handoff. What Teal Health approved in Figma is exactly what shipped,- and what their own team can extend page by page without touching code. Layout animations add life where they earn their place,- measured reveals and interactions that make the site feel considered, never decorated,- engineered to hold up on every device, including the mobile Safari edge cases most sites quietly break on.

Speed treated as revenue, not a score. Most health sites are slow for the same reason: marketing scripts loading before content. Teal Health runs a full stack,- HubSpot, analytics, consent management, and none of it was optional; compliance and marketing both depend on it. So the stack was made to wait its turn, with nothing loading before it's needed. The old sites cored in the mid-30s on mobile. The new one passes Google's Core WebVitals on real-user data across every metric, with the full marketing and compliance stack still on board, no tool cut, no feature traded away. Teal Health's audience arrives on phones, and a page that renders immediately keeps screening decisions from bouncing before they begin.

Accessibility as risk removed, not a checkbox. Health sites are prime targets for accessibility litigation, and overlay widgets,- the industry's favorite shortcut, make the exposure worse while breaking the experience for the users they claim to serve. Every audit finding was fixed in the markup and behavior itself: ARIA roles, accessible names on embedded forms, keyboard-operable interactions. More people can screen, and the brand's legal surface shrinks.

A site that finally carries the weight the product puts on it. Thirty pages that read as one brand, load fast on the phones where screening decisions happen, work for every visitor regardless of ability, and make claims that hold up all the way down to the markup. The design system is the asset that compounds: new campaigns and pages ship into a foundation built to absorb them,- with the same owner across design, build, and everything the site has shipped since launch.