Federico KotekProduct Designer

The Routine

theroutine.io ↗

This one is a family project. My sister is an industrial chemist who formulates cosmetics, and I’m the designer. She knows what is inside every bottle. Most people in front of a shelf are guessing. Skinsort and INCIDecoder are lovely and in English, Yuka sits on the consumer side without much cosmetic depth, and in Latin America the shelf was simply empty. The line at the top of the repo says “vivino para skincare”: tell it about your skin, get a routine from products you can actually buy here, each one explained by what’s inside.

theroutine.io/quiz
The Routine·Tu perfil

Tu piel

Empecemos por lo básico.

Si te mirás la cara al mediodía sin haberte retocado nada, ¿qué ves?

  • Tirante, seca, como que le falta algo
  • Normal, tranquila
  • Algo de brillo en algunas zonas
  • Brilla bastante, sobre todo frente y nariz
  • Ni idea, nunca me fijé

Sensibilidad

¿Tu piel es de las que bancan todo o se quejan por cualquier cosa?

Probás algo nuevo, una crema, un sérum, lo que sea. ¿Cómo reacciona tu piel normalmente?

  • Le pongo cualquier cosa y ni se entera
  • Casi nunca pasa nada
  • A veces se pone rara, depende de qué sea
  • Muchas veces me pica, arde, o se pone roja
  • No sé, no suelo cambiar de productos

Prioridades

¿Qué es lo que más te gustaría mejorar de tu piel?

De estas preocupaciones, ¿cuáles son las 2 o 3 que más te importan hoy?

  • AcnéGranitos, brotes
  • ManchasHiperpigmentación, tono desparejo
  • ArrugasLíneas finas, pérdida de firmeza
  • DeshidrataciónPiel seca, barrera dañada
  • SensibilidadRojeces, irritación
  • PorosPoros dilatados, textura irregular

Tu perfil de piel

Ejes de tu piel

Oleosidad
Algo grasa
Reactividad
Normal
Pigmentación
Leve
Firmeza
Firme
The quiz, rebuilt from its own questions and components: three of the twelve steps, then the seven-stop tracks it ends on. The answers are one possible run.

The quiz is where I spent the most love. The questions ask the way a friend would: look at your face at noon without touching it up, what do you see? Most have a way out, “ni idea, nunca me fijé”, drawn dashed so not knowing reads as allowed. Nobody should fail a skincare quiz. Lora for the headings over Figtree for the rest, the same pair as this site (I have a type). The tick lands on a little spring and everything else just slides.

V6 · tocás el match
Nuevo 92% match
en 3 comercios
Niacinamida 10%
Apto piel sensible
92%

The Ordinary·Sérum

Niacinamide 10% + Zinc 1% Oil Control Serum

desde $2.800

The product card from the repo’s showcase page, mock price and match included, trying each idea for the slot under the photo before the empty one wins. Then the match, asked why.

The match percentage is the Vivino bit, and the riskiest thing on screen: a number with no reason reads like marketing. The goal written in the spec was for it to stop being “un número mágico”, so you can ask any card why and get one to three actives, each tied to your skin in a plain sentence. The card went through a showcase page of versions until the quiet sixth one won. The stack of store logos left for being noise and the name moved to the serif. My favourite detail is tiny: the 10px eyebrows sit in font-medium, because semibold read heavy and regular read faint.

theroutine.io

Tu skincare,
finalmente con sentido.

2.400+perfiles de piel completados
50+productos evaluados
100%criterio farmacológico, sin publicidad

“Llevaba dos años tirando plata en productos al azar.”

Sofía R. · Buenos Aires
+1260ingredientesAnalizados uno por uno
+213productosDel mercado argentino
0marcas pagasSin sponsors ni publicidad
The landing’s first stats row and a testimonial, both made up, crossed out, and the row that replaced them: counts read from the database, and the paid brands counting down to zero.

It only works if people trust it, so a lot of the design was taking things out. The first landing had 2.400+ skin profiles and three testimonials from people who didn’t exist (sorry, Sofía). They went, along with the hardcoded match on every card. No básico, pro, premium, no unlocks or stars, no emojis, and no AI inventing a routine per person; the spec puts it better than I can, “una rutina no es un juego”. On screen it says sugerencia de rutina and never tratamiento. My test for every line of copy: would it sound natural if I said it in a voice note?

splitInci()

Lista INCI

Aqua, 1,2-Hexanediol, Glycerin

Una coma con dígito de los dos lados no separa.

  1. 1Aquasolvente
  2. 21fantasma
  3. 32-Hexanediolfantasma
  4. 21,2-Hexanediolconservante
  5. 43Glycerinhumectante

118 filas con el ingrediente «1»

114 productos afectados

55% de las filas con la posición corrida

The parser’s own test string: the comma inside the name splits off a phantom “1”, everything after slides down a place, and the damage it had done to the catalogue. Then the rule that fixed it.

My favourite bug is an ingredient called 1,2-Hexanediol, a very common preservative. The parser split on commas, so the comma inside its name made an ingredient called “1” and pushed everything after it down one place. The spreadsheet the catalogue comes from had the same bug, so the parser’s own test was graded against it: fixing the bug made “exact position” drop from 89.8% to 39.7%.

213 products from 34 brands so far, and about five visitors a day (hi, all five of you). It is slow, and I am fine with that. Of all of them, it’s the one I most want to see actually help someone.