Care & Colour

Put hair-product claims beside your own observations with YouCam, explore a new look, and decide what to rebuy with less guesswork.

Comment

Inspiration

A hair product promises a change. Weeks later, someone is looking in the mirror and wondering: has anything changed, and should I buy it again? Their product claim, photos, care instructions and spending decisions usually live in different places.

There is a human cost to that uncertainty. A 2021 systematic review of 41 studies involving 7,995 patients linked pattern hair loss with impaired quality of life and emotions. A separate 2024 meta-analysis of 121 studies estimated seborrheic dermatitis prevalence at 4.38%. These findings describe the problem context, not our app's impact, and the latter is not a measure of all dandruff. Quality-of-life research · Prevalence research

We built Care & Colour to connect that moment of uncertainty with a useful next decision: keep a clearer record, review what you own, ask a better question, or explore a look you enjoy.

What it does

The central journey is product claim, dated check-ins, observation report, next decision.

  • Hair Journal: retain a product's claim and source, record baseline/follow-up dates and review observations. Coverage and frizz flows request YouCam appearance categories from the required views. A separate local colour tool samples the same hair area in two photos and computes a CIELAB colour difference. Reports distinguish the claim, observation, timing and unknowns, then offer a photo-free download and links to the shelf or studio.
  • Hair Studio, powered by YouCam: generate colour, hairstyle, wig-inspired and volume previews on a photo, compare the original with a real result, and shortlist looks. Appearance exploration remains separate from evidence about product use.
  • Target-shade review: YouCam Facial Color Tones Analyzer returns a hair colour estimate beside a chosen reference swatch. The app preserves its estimate and warns about its limitations. This integration is experimental: the analyzer misclassified our copper example, so we do not present it as accurate physical shade matching.
  • Reuse-first Product Shelf: check owned products, cosmetic roles, preferences and additional catalogue cost against a spending cap. A useful decision can require no new purchase.
  • My Care Plan: keep existing instructions close and choose preferred wash days. A shared Gemini assistant provides concise help and optional, explicit product-label transcription.

Users can explicitly save dated journal entries on their device. Ordinary comparison uploads reset when leaving the page. The app does not diagnose scalp disease, establish product causation or promise regrowth, physical dye results or improved mental health.

How we built it

We used TypeScript, React, Vinext, Vite and Cloudflare Workers, with server-side YouCam and Gemini adapters. YouCam's File API uploads real image bytes before asynchronous task creation and polling. The app handles consent, validation failures, actual provider results and private session-bound task references.

YouCam powers Hair Color, Hair Transfer, Hair Volume, Hair Type Detection, Hair Frizziness Detection, Hair Density Detection and Facial Color Tones analysis. Local rules handle claim intervals, recognised grade direction, budget/reuse decisions and photo colour difference. These calculations are distinct from YouCam measurements. YouCam documentation

Challenges we ran into

Our first real uploads exposed a redirect that protocol fixtures had not caught. We fixed exact-byte transport and bounded trusted HTTPS redirects, then added regression tests.

We also learned that a scientifically useful scalp photograph can fail a face-based API's capture requirements. We improved framing instructions and error feedback instead of substituting invented readings. Matching longitudinal coverage/frizz captures remain a validation gap.

Finally, a genuine response is not automatically an accurate one. The colour analyzer called the copper demo Blonde. We retain that result and uncertainty rather than convert it into a confident product verdict.

Accomplishments that we're proud of

We connected the working claim-report-purchase flow with genuine YouCam look generation, a reuse-first basket and a compact interface. 58 automated tests, TypeScript checks and the production build pass. Browser checks verified report downloads, navigation reset and the deployed YouCam colour-preview flow.

We also prepared licensed comparison references, image provenance and explicit consent-based storage. Secret values stay server-side and out of the repository and report exports.

What we learned

A preview, an appearance category and a physical treatment result answer different questions. Product design needs to preserve those distinctions while still helping someone act. Clear capture guidance, source attribution and a useful next decision matter as much as the API call.

What's next for Care & Colour

Validate matching, consented coverage/frizz capture sets, study repeatability across lighting and hair textures, and test whether the flow improves decision clarity. We want to measure task accuracy, completion time and unnecessary basket additions before claiming impact. Broader hosting also needs shared task persistence and stronger deployment-wide usage controls.

Built With

Share this project:

Updates

Submission history