Wualt

On the public site, the Health and Wellness section runs four live dashboard cards, a cycle dial, a stress radar, an activity bar chart, and a sleep curve, each animating into view on scroll and then drifting continuously so the section reads as a real product, not a screenshot. Both preorder calls to action, on the homepage and on the Community page, sit inside an ambient WebGL background, and the Community page's mood cards fly out of their grid and flip into a detail panel on click. In the app, a woman opens to a Safety home: a band chip showing her wearable's connection and charge, a share-location and a daily-check-in card, and a full-width SOS pad she holds for two seconds. Holding it arms an alert with a three-second countdown and a linear depleting bar, never a circular loader, then sends: her circle gets a live map, her Guardian sees her pin and a route to it, and she can stand down with one tap once she is safe. Switching to Health opens a dashboard: a readiness score with a radial dial, body battery, sleep, cycle day, active zone minutes, and a resting heart rate chart, all populated, none of it empty.

Wualt is a women's safety wearable, a ring with a companion app that watches over her day and steps in only when asked to. My part spans two connected surfaces: the public site that sells the ring and the preorder, and the app design system that the ring's owner and her guardians would actually use. The site work is real engineering shipped to a live Webflow build, not a mockup; the app work is a complete, approved design direction with a working interactive spec and a wired Figma prototype, ready to build, not yet shipped as an installed app.

On the site, the four Health and Wellness dashboard cards were rebuilt as hand-rolled SVG, no chart library, pixel calibrated against the original design exports down to dot counts, gradient directions, and axis labels, then given a two-layer motion system, an entrance animation on scroll and a slow continuous value drift so the numbers feel alive, with reduced-motion preference respected throughout. The ambient CTA background is a lightweight WebGL layer loaded through a custom code embed, and the Community mood-card interaction is a progressive enhancement layered on top of the site's native interactions, never blocking them, with a reduced-motion fallback and a debug slow-motion mode. The app runs on a design system I call V6 glass, arrived at after five earlier directions were rejected for being too skeuomorphic, too dark, or visually cluttered: flat glass surfaces, a single teal brand accent, a distinct display type for numbers and headings, a separate face for body text, and a hard set of interaction rules, no circular progress rings for holds or countdowns, no decorative dot indicators, glass popovers instead of modals, and accessibility built in structurally, AA contrast pairs, 44-pixel touch targets, and full keyboard operability on the hold-to-arm gesture. The approved direction lives as a self-contained interactive HTML file, the pixel source of truth, and is being propagated across a 169-screen Figma file, 163 of those screens now reachable inside one continuous wired prototype flow.

A safety product only works if the promise on the marketing site and the experience in the app actually match, so the site's dashboard cards are not stock illustrations, they are the real chart language the app itself uses, animated the same way. Inside the app, the design rules exist for real reasons: a circular loader reads as a spinner, not an emergency countdown, so holds and countdowns use a linear bar instead; a decorative dot is not a legible status, so every state is a labeled chip; and the product carries a strict honesty rule of its own, cycle predictions stay periods only, with no ovulation or fertile-window claims, because a safety and wellness product should not guess at something this personal.