Más información sobre el uso de cookies en Políticas y Privacidad.
MASHA - Academia de Yoga
Imagina un espacio donde la búsqueda del equilibrio físico, mental y espiritual se fusiona con la tecnología para alcanzar a más personas.
Eso es MASHA, una academia de yoga con una misión clara: inspirar a sus alumnos a través de clases, talleres y técnicas holísticas personalizadas.
Sin embargo, para cumplir esta visión, MASHA necesitaba una plataforma digital que reflejara su esencia y conectara con su público objetivo.

Aquí es donde mi viaje comenzó. Como Diseñador UI/UX y Desarrollador Front-end, asumí el emocionante reto de construir un sitio web completo para MASHA, desde su concepción inicial hasta su puesta en producción. Lo hice en solitario, lo que me permitió una inmersión profunda y autónoma en cada fase del proyecto.
Mi proceso fue metódico y centrado en el usuario. Inicié con una investigación exhaustiva para entender a fondo el problema y las necesidades, solicitando toda la información clave a través de un Brief detallado que definió objetivos, público objetivo, alcance y plazos. A partir de ahí, mi flujo de trabajo cubrió la ideación (con bocetos y wireframes), el prototipado, la iteración constante y, finalmente, el desarrollo y despliegue del sitio.
Para asegurar que el producto final fuera intuitivo y alineado con la misión de MASHA, me apoyé en marcos de trabajo como Design Thinking y herramientas como el Mapa de Empatía, Proto-Personas y las leyes de la UX.
Más abajo te explico en detalle.
Año
2024Cliente
MASHADuración del proyecto
60 díasMi Rol/Responsabilidades
Diseñador Web / UI / UX / Desarrollador Front-EndServicios contratados
Tecnología utilizada
Figma | HTML/CSS/JavaScript | Vercel |Objetivos del proyecto
Cuando MASHA se acercó, su necesidad era clara: transformar su visión de bienestar en una presencia digital que resonara con nuevos estudiantes. 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 MASHA al mundo digital.
Nos propusimos metas ambiciosas, diseñadas para captar la atención y nutrir la comunidad de MASHA:
- Generación de Leads: El corazón de su expansión. Diseñamos puntos de contacto intuitivos desde formularios de contacto hasta suscripciones a newsletters para convertir visitantes en futuros yoguis.
- Visibilidad Local y Alcance: Sabíamos que muchos buscaban bienestar cerca de casa. Por eso, era vital que MASHA fuera fácilmente encontrada en búsquedas locales, asegurando que aquellos que buscaban "clases de Yoga" en su área los encontraran primero.
- Exhibición de la Oferta y Transparencia: La claridad es clave. El sitio debía describir detalladamente cada clase, taller y programa, permitiendo a los interesados comprender la riqueza y diversidad de su oferta.
- Accesibilidad y Confianza: Mostrar información de contacto y ubicación de manera prominente (dirección, horarios, teléfono, y un mapa interactivo) era fundamental. Esto no solo facilitaba el acceso, sino que también construía una base de confianza y autoridad, cimentada con testimonios y reseñas de clientes satisfechos que validarían la experiencia MASHA.
- Construcción de Comunidad y Marca: Más allá de las transacciones, el objetivo era crear un sentido de pertenencia. Fomentar la interacción a través de un blog o enlaces a redes sociales fortalecería su comunidad. Paralelamente, la optimización SEO era crucial para posicionar la marca y alcanzar a un público más amplio.
- Experiencia Visual Inmersiva: Finalmente, y no menos importante, la interfaz visual debía ser un reflejo del alma de MASHA: atractiva, dinámica y moderna, pero siempre en sintonía con los valores de la marca y la conexión espiritual que buscaba su público.
Metodologías usadas:
Cuando me embarqué en la construcción del sitio web para MASHA, mi meta iba más allá de simplemente crear páginas bonitas. Necesitaba una estrategia que asegurara que cada decisión de diseño y desarrollo estuviera profundamente alineada con los valores de la academia y, crucialmente, con las necesidades reales de sus futuros alumnos.
Para lograrlo, no dejé nada al azar y me apoyé en un conjunto de metodologías probadas que guiaron mi proceso de principio a fin.
El Pilar del Entendimiento:
- Design Thinking.
- Mapa de empatía.
- Proto-Personas.
- Design Systems.
Metodologías a detalle:
- Design Thinking: Mi punto de partida fue el Design Thinking, una metodología que me permitió abordar el proyecto con una mentalidad centrada en el usuario. En lugar de saltar directamente a la solución, este enfoque me guio a través de un proceso iterativo de empatizar, definir, idear, prototipar y testear. Fue fundamental para entender el ecosistema de MASHA y sus usuarios en profundidad.
- Mapa de Empatía: Para realmente meterme en la piel de los futuros estudiantes de yoga, utilicé el Mapa de Empatía. 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. ¿Qué los motivaba a buscar yoga? ¿Qué frustraciones encontraban en otras plataformas? Estas revelaciones fueron vitales.
- Proto-Personas: A partir de esa empatía, creé Proto-Personas. Estas representaciones ficticias de los usuarios ideales de MASHA me permitieron tener siempre en mente a quién le estaba diseñando. Cada proto-persona encapsulaba los patrones de comportamiento, las motivaciones y los objetivos de un segmento clave de la audiencia, asegurando que las soluciones que ideaba fueran genuinamente relevantes y útiles. Juntas, estas metodologías formaron la base para definir las funcionalidades y la estructura de navegación de un sitio que realmente conectara con su audiencia.
- Design System: Una vez que tuve una comprensión sólida de los usuarios y sus necesidades, la fase de diseño y desarrollo requería eficiencia y coherencia. Aquí es donde entró en juego la implementación de un Design System. Aunque trabajé en solitario, construir un sistema de diseño desde el inicio fue una decisión estratégica que me permitió:
- Mantener la coherencia visual y funcional, optimizar el tiempo de desarrollo y facilitar futuras actualizaciones al sitio.





Solución:
Con los objetivos claros y un profundo entendimiento de la audiencia de MASHA, mi enfoque en la solución fue diseñar una interfaz que no solo fuera funcional, sino que también transmitiera la calma, la serenidad y la positividad inherentes a la filosofía del yoga. Cada elección de diseño fue deliberada para invitar a la relajación y la conexión.
Paleta de colores: Para construir este ambiente visual, opté por una paleta de tonos pastel suaves con degradados sutiles y modernos (rosados, blancos y amarillos, inspirados en la flor de loto). Estos colores no solo evocan la armonía y la naturaleza, sino que también generan un entorno visual relajante y acogedor, fundamental para la experiencia de un sitio de yoga. Además, me aseguré de que todos los contrastes de color cumplieran con las recomendaciones WCAG, garantizando la accesibilidad para todos los usuarios.
Tipografía: La legibilidad era primordial para no fatigar al usuario. Por ello, seleccioné una tipografía moderna y de alta legibilidad, aplicando rigurosamente técnicas como el kerning, leading y tracking. Esto no solo optimizó la experiencia de lectura, sino que también contribuyó a la sensación de orden y equilibrio.
Imágenes: Para darle vida al sitio, utilicé fotografías de alta calidad y resolución de alumnos practicando yoga, capturando expresiones genuinas de felicidad y bienestar. Estas imágenes fueron cuidadosamente optimizadas en tamaño y formato para asegurar una carga rápida sin sacrificar la calidad visual, lo que resultó en una navegación fluida que transmitía auténticas expresiones de paz, serenidad y disfrute.
Finalmente, las funcionalidades clave se diseñaron pensando en los objetivos del negocio: se implementaron formularios de contacto y suscripción al newsletter, esenciales para la generación de leads.
La estructura del sitio y el contenido (visual y textual) se optimizaron meticulosamente para describir claramente las clases y talleres, y sentaron las bases para mejorar el SEO y posicionar la marca de MASHA en un mercado competitivo.
Para fomentar la construcción de comunidad, integramos fluidamente enlaces y contenido de las redes sociales de la academia, asegurando que la conexión con MASHA trascendiera el sitio web.
Fase de Desarrollo (Demo Técnico):
Resumen y aprendizaje:
El proyecto MASHA fue mucho más que un encargo; representó una oportunidad invaluable para consolidar mi experiencia y explorar cada faceta del diseño y desarrollo web. Al no tratarse de un rediseño, pude abordar la Interfaz de Usuario (UI) y la Experiencia de Usuario (UX) desde cero, prestando una atención meticulosa a cada detalle y sentando bases sólidas desde la concepción. Esta independencia me permitió sumergirme a fondo en cada fase, desde la ideación hasta el despliegue.
Uno de los aprendizajes más significativos fue la importancia clave de una selección tecnológica estratégica desde el inicio. Comprendí cómo la implementación de tecnologías de desarrollo modernas y robustas 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. Estas decisiones, tomadas con anticipación, son las que marcan la diferencia entre un sitio funcional y uno que realmente potencia los objetivos del negocio y encanta al usuario.
Quiero destacar que, si bien lo que ves aquí es un demo técnico funcional, creado como una landing page para mostrar mis habilidades, cada desafío resuelto en MASHA reforzó mi convicción en la importancia de un enfoque integral.
Este proyecto me permitió demostrar mis conocimientos y capacidades como Diseñador UI/UX y Desarrollador Front-end, preparándome 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.
La experiencia que obtuve trabajando en solitario en MASHA, desde la investigación de usuario hasta la optimización técnica, consolidó mi capacidad para gestionar proyectos integrales y tomar decisiones que impulsen resultados tangibles.
Nota importante sobre propiedad intelectual:
¿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