Prototipos del flujo de compra
Las pantallas clave que recorrería un cliente: descubrir, elegir y comprar.
Página de inicio
“Naturalmente al cuidado de tu familia.”
Portada del e-commerce con la dirección visual “Boticario heredado”: cálida, cercana y de confianza.
- Hero con propuesta de valor y buscador
- Categorías y productos destacados
- Bloque de confianza (107 años, sucursales)
Detalle de producto
Ejemplo: Oscillococcinum 200CK · Boiron
La página que convierte: toda la información para decidir la compra con confianza y cumplimiento sanitario.
- Galería, precio y agregar al carrito
- Indicaciones y dosificación claras
- Aviso y disclaimers COFEPRIS
Página de inicio (alternativa)
“El cuidado que hereda tu familia.”
La misma portada resuelta con la dirección visual “Wellness contemporáneo”: clara, luminosa y actual.
- Mismo contenido, otra personalidad de marca
- Para comparar tono y estética lado a lado
- Ayuda a elegir la dirección definitiva
Direcciones visuales
Dos caminos de identidad para la marca. El objetivo de esta fase es elegir uno.
Boticario Heredado
“El cuidado de siempre, con calidez de botica de barrio.”
Paleta cálida en cremas y terracota, tono artesanal y humano que honra los 107 años de historia.
- Colores, tipografías y texturas
- Personalidad: cercana, tradicional, cálida
Wellness Contemporáneo
“Bienestar natural, claro y para hoy.”
Paleta marino y aire limpio, estética moderna de bienestar que proyecta confianza y modernidad.
- Colores, tipografías y componentes
- Personalidad: limpia, actual, confiable
Sistema de diseño
Los bloques reutilizables que dan consistencia a todo el sitio.
Librería de componentes
“La librería que viste en el home, lista para aprobar.”
Tokens, tipografía, colores, botones, tarjetas y estados — la base técnica sobre la que se construye el sitio.
- Escala tipográfica y de color
- Componentes en claro y oscuro
- Accesibilidad (contraste AA)
Landing de la propuesta
“Gracias por confiarnos 107 años de cuidado.”
Página narrativa que presenta la visión y el porqué del proyecto, pensada como carta de presentación.
- Contexto y objetivos del rediseño
- Resumen de la propuesta 2026