Más información sobre el uso de cookies en Políticas y Privacidad.
Lavanda Spa - Salón de Belleza
Imagina un lugar donde la armonía del cuidado personal se encuentra con la eficiencia de la tecnología, llevando el bienestar a un nuevo nivel de accesibilidad.
Ese es el espíritu de Lavanda SPA, un reconocido salón de belleza y cosmética en Osorno. Su misión es clara: ofrecer un santuario de relajación y profesionalismo a través de servicios como manicuras, masajes, depilación y más.
Pero para que esta visión de bienestar trascendiera las paredes del salón, Lavanda SPA necesitaba expandir su eco digital. Si bien sus redes sociales ya creaban una conexión, era el momento de construir su propio refugio online. Un espacio donde pudieran no solo consolidar su presencia, sino también impulsar la venta y promoción de sus servicios con mayor profesionalismo y alcance.

Mi viaje con Lavanda Spa comenzó mientras era Diseñador UI/UX en la agencia Mascreativo. En este rol, fui el responsable principal de la concepción y el diseño del prototipo web para este cliente. Fue un proyecto abordado con una metodología centrada en el usuario, iniciando con una investigación exhaustiva a partir de un Brief detallado proporcionado por el cliente, que sirvió como la brújula para todo el proceso de diseño.
Me apoyé firmemente en el Design Thinking, abordando el proyecto con una mentalidad de solución basada en la empatía. Recorrí un proceso iterativo de empatizar, definir, idear, prototipar y testear.
Para realmente "ponerme en los zapatos" de los clientes de Lavanda SPA, utilicé el Mapa de Empatía. Esta herramienta visual fue clave para entender no solo lo que decían o hacían, sino también lo que pensaban y sentían: sus deseos, sus inquietudes, sus aspiraciones en torno al cuidado personal. ¿Qué los motivaba a buscar un spa? ¿Qué frustraciones habían encontrado en otras experiencias? Las respuestas a estas preguntas fueron vitales para definir las funcionalidades y la estructura de navegación.
A partir de ello, creé Proto-Personas y comencé a sentar las bases de un pequeño Sistema de Diseño para asegurar coherencia visual.
Más abajo te explico en detalle.
Año
2022Cliente
Lavanda SpaDuración del proyecto
15 días (Fase de Diseño en Agencia), 30 días (Fase de Desarrollo)Mi Rol/Responsabilidades
Diseñador Web / UI / UX (Agencia Mascreativo) / Desarrollador Front-End (Freelance)Servicios contratados
Tecnología utilizada
Figma | Astro/React | Vercel |Objetivos del proyecto
Cuando Lavanda Spa se acercó, su necesidad era clara:
Fortalecer su presencia digital y generar mayor confianza y profesionalismo. No se trataba solo de tener un sitio web; el verdadero reto era crear una plataforma atractiva, rápida y funcional que se convirtiera en su principal motor de crecimiento y conexión.
Definir los objetivos fue, por tanto, el primer paso crítico para trazar el mapa de su éxito digital.
Cada uno de estos objetivos no solo guio mi proceso de diseño y desarrollo, sino que se convirtió en un pilar fundamental para el lanzamiento exitoso de Lavanda Spa al mundo digital.
El foco fue fortalecer la presencia digital, aquí algunos de los objetivos:
- Generación de Leads: Captar nuevos clientes potenciales a través de la venta directa de servicios y la promoción de ofertas.
- Visibilidad de la Oferta: Presentar de forma clara y atractiva la gama completa de servicios, incluyendo descripciones detalladas, costos y beneficios específicos para el cliente, facilitando su decisión de compra.
- Optimizar la Gestión de Citas: Simplificar el proceso de reserva para los clientes y mejorar la eficiencia en la gestión de citas para el salón.
- Posicionamiento de Marca: Fortalecer la presencia online de Lavanda SPA mediante la optimización para motores de búsqueda (SEO), ampliando su alcance a un público más diverso y relevante en la región.
- Ofrecer una Experiencia Visual Inmersiva: Diseñar una interfaz atractiva, dinámica y moderna que no solo reflejara los valores de la marca (limpieza, profesionalismo, elegancia, seguridad), sino que también conectara emocionalmente con su público objetivo, personas interesadas en su bienestar y cuidado personal (idealmente entre 18 y 40 años, aunque el rango se extendía de 15 a 80 años).
Metodologías usadas:
Para guiar el proyecto y asegurar un enfoque centrado en el usuario, utilicé las siguientes metodologías y marcos de trabajo:
El Pilar del Entendimiento:
- Design Thinking.
- Mapa de empatía.
- Proto-Personas.
- Sistemas de Diseño.
Metodologías a detalle:
- Design Thinking: Fue mi punto de partida, permitiéndome abordar el proyecto con una mentalidad iterativa de empatizar, definir, idear, prototipar y testear. Fue fundamental para comprender el ecosistema de Lavanda SPA y las necesidades de sus usuarios en profundidad. La investigación inicial se realizó a través de un Brief detallado con el cliente, que estableció los objetivos, público, alcance y plazos.
- Mapa de Empatía: Para realmente entender a los futuros clientes de Lavanda SPA, utilicé esta herramienta visual. Me ayudó a comprender no solo lo que decían o hacían, sino también lo que pensaban y sentían, sus necesidades, miedos y aspiraciones.
- Proto-Personas: A partir de la empatía, creé representaciones ficticias de los usuarios ideales. Cada proto-persona encapsulaba patrones de comportamiento, motivaciones y objetivos, asegurando que las soluciones de diseño fueran relevantes y útiles para la audiencia de Lavanda SPA.
- Sistemas de Diseño: Una vez definida la comprensión del usuario, la eficiencia y coherencia fueron clave. Decidí construir un pequeño design system desde el inicio. Esto me permitió mantener una coherencia visual y funcional impecable, optimizar el tiempo de desarrollo, y facilitar futuras actualizaciones del sitio, incluso trabajando en solitario.



Solución:
Con los objetivos claros y un profundo entendimiento de la audiencia de Lavanda Spa, la solución de diseño se materializó en un prototipo web integral, visualmente atractivo y funcional.
Paleta de Colores: Inspirada en la flor de lavanda, con tanos de lila, verde y blanco, evocando calma, seguridad y limpieza. Se usaron fondos con transparencias para potenciar esta sensación. Tambien se consultó la WCAG para recomendaciones en cuanto a contraste de colores para no afectar a la accesibilidad.
Imágenes: Se usaron fotografías de alta calidad de personas disfrutando de los servicios de Lavanda, como manicure y depilación.
Tipografía: Una combinación de tipografía moderna y legible para los párrafos, con serifa para los títulos, proyectando elegancia y sofisticación. Se aplicaron rigurosamente conceptos de diseño tipográfico (kerning, leading, tracking) para optimizar la lectura.
Iconografía: Se implementaron iconos personalizados que refuerzan visualmente los títulos de los servicios, manteniendo consistencia en forma y tamaño para armonía del diseño.
Usabilidad y Experiencia del Usuario (UX) Fluida: El diseño se centró en una navegación intuitiva y lógica, permitiendo a los visitantes encontrar rápidamente información sobre servicios, precios y horarios. El sitio es completamente responsivo, adaptándose perfectamente a cualquier dispositivo. También se integraron estrategias de SEO desde el inicio, incluyendo palabras clave relevantes y una estructura de contenido optimizada para mejorar la visibilidad del sitio.
Fase de Desarrollo (Demo Técnico):
Una vez finalizada mi colaboración con la agencia Mascreativo, y con el objetivo de expandir y mostrar mis habilidades como Desarrollador Web Front-End, decidí tomar el diseño original de Lavanda Spa (creado por mí en la agencia) y desarrollar una implementación técnica personal.
Este demo técnico no es el sitio web oficial de Lavanda Spa ni el producto final entregado por la agencia. Es una recreación funcional del diseño original que desarrollé de forma independiente, utilizando HTML, CSS, JavaScript y el framework Astro/React. El despliegue del sitio web se realizó en Vercel, una plataforma que asegura un rendimiento óptimo y una entrega rápida del contenido.
Esta fase me permitió demostrar mis capacidades de codificación, interactividad, responsividad y optimización front-end. Realicé exhaustivas pruebas de rendimiento y usabilidad en los dispositivos más comunes: desktop, tablet y mobile, para garantizar una experiencia fluida y óptima en cualquier formato.
Si bien el demo técnico funciona como una landing page, se usaron metodologías y patrones de diseño para agilizar el desarrollo del proyecto, entro lo que se destaca la correcta estructuración de las carpetas, separación y reutilización de componentes, separación de lógica, entre otras.
Resumen y aprendizaje:
El proyecto Lavanda Spa, en sus distintas fases, fue una oportunidad invaluable para consolidar mi experiencia en el diseño y desarrollo web. La etapa de diseño en la agencia me permitió una inmersión profunda en la investigación de usuario y el pensamiento de diseño. Posteriormente, el desarrollo del demo técnico de forma autónoma consolidó mi capacidad para transformar diseños complejos en experiencias web funcionales y optimizadas.
Aprendí la importancia clave de una selección tecnológica estratégica desde el inicio. Comprendí cómo la implementación de tecnologías modernas y robustas (como Astro/React y Vercel) no es solo una cuestión técnica, sino una decisión fundamental que impacta directamente en la optimización, la fiabilidad, el SEO y la velocidad de carga del sitio.
Este demo técnico, aunque una implementación personal y creada como una landing page para mostrar mis habilidades, me permitió tomar decisiones técnicas que impulsan resultados tangibles y demuestran mi capacidad para gestionar proyectos integrales, desde la conceptualización hasta la optimización técnica. Estoy preparado para abordar con confianza proyectos futuros que requieran una visión completa, desde la conceptualización hasta la optimización para el rendimiento y el éxito.
Nota importante sobre propiedad intelectual:
El diseño del prototipo web fue realizado mientras trabajaba en la agencia Mascreativo como solicitud del cliente Lavanda Spa, y los derechos sobre ese diseño, así como los logotipos y la marca del cliente, pertenecen a sus respectivos dueños.
El desarrollo de este demo web fue una iniciativa personal, no siendo ya miembro de Mascreativo, con el único fin de mostrar mis habilidades como desarrollador front-end.
No tomo crédito por la propiedad intelectual del cliente ni de la agencia, salvo mi participación directa en el diseño y mi desarrollo independiente de este demo técnico.
¿Te interesa mi trabajo?
Siempre puedes contactarme enviándome un mensaje 👇🏻
contactoarcosmax@gmail.comDiseño Gráfico
Diseño Web
UI/UX
Desarrollo Front-End
SEO/SEM
Diseño Gráfico
Diseño Web
UI/UX
Desarrollo Front-End
SEO/SEM
Diseño Gráfico
Diseño Web
UI/UX
Desarrollo Front-End
SEO/SEM
Diseño Gráfico
Diseño Web
UI/UX
Desarrollo Front-End
SEO/SEM