Diseño de interfaz web para PANAR, comunidad para apasionados del pan casero. Una tienda que también es un lugar para crear, compartir y aprender.
El reto era diseñar una interfaz que comunicara el concepto de comunidad desde el primer impacto, permitiera descubrir y comprar productos artesanos de forma intuitiva y reflejara la identidad visual ya desarrollada: tonos cálidos, mascota cercana y tipografía moderna.
Se analizaron plataformas de comunidad gastronómica y tiendas de productos artesanos de panadería. Hallazgo clave: las que mejor funcionan combinan el discurso de comunidad con fichas de producto completas —valoraciones, descripción detallada y recetas asociadas— en lugar de separar tienda y contenido en secciones distintas.
Error recurrente en los referentes: priorizar el catálogo sobre la propuesta de valor, lo que convierte la home en un listado de productos sin discurso ni personalidad.
Marta, aficionada al pan casero de 28–45 años: hornea en casa de forma habitual, busca harinas de calidad y quiere conectar con otros apasionados. Valora las reseñas reales y las recetas asociadas al producto. Dispositivo principal: ordenador.
Álex, nuevo usuario de 25–40 años: ha visto la marca en redes y llega curioso. No conoce el proyecto; necesita entender qué es PANAR antes de comprar. La propuesta de comunidad es lo que le convence. Dispositivo principal: móvil.
El análisis reveló que la mayor oportunidad era diferenciar PANAR de una tienda convencional
desde el primer scroll: el concepto de comunidad tenía que estar en la portada, no enterrado en
un "sobre nosotros".
La propuesta se articuló en cuatro ejes:
1. Comunidad como protagonista: la home abre con un hero que explica qué es
PANAR —"más que una tienda de pan"— con CTA directo a conocer la comunidad, antes de mostrar
producto.
2. Ficha de producto completa: cada producto integra valoraciones de clientes,
descripción técnica, precio claro y una receta destacada, convirtiendo la compra en una
experiencia de aprendizaje.
3. Credibilidad mediante reseñas: un bloque de reseñas reales con puntuación
refuerza la confianza sin necesidad de texto de marketing.
4. Navegación limpia: buscador, carrito y perfil en el header; información
secundaria (política de privacidad, envíos, contacto) agrupada en el footer para no
contaminar la experiencia principal.
Se wireframearon dos páginas clave: la home y la ficha de producto. La home sigue el orden: hero con propuesta de comunidad → sección "¿Quiénes somos?" → productos recomendados. La ficha de producto sigue el orden: imagen + precio + valoración → descripción técnica → receta destacada → productos relacionados → reseñas de clientes.
Este orden responde a la lógica de los dos perfiles: el nuevo usuario necesita entender el contexto antes de comprar; el usuario habitual llega directo al producto y encuentra en las reseñas la validación que busca.
La identidad de PANAR parte de tres principios:
1. Calidez cromática: paleta en tonos naranjas y crema que evocan
el pan recién horneado y conectan emocionalmente con el producto desde la primera
pantalla.
2. Mascota como hilo conductor: el personaje del panadero aparece
en la navegación, las fichas de producto y el footer, aportando coherencia y
personalidad sin recargar la interfaz.
3. Tipografía moderna y legible: General Sans equilibra el carácter
artesanal del logotipo con la claridad necesaria para leer descripciones técnicas
de producto y reseñas de clientes.
El prototipo en alta fidelidad cubre la home en desktop (1440 px) —con el hero de comunidad, la sección "¿Quiénes somos?" y la selección de productos— y la ficha de producto completa, con receta destacada, reseñas de clientes y productos recomendados.
