Floristería Bromelia
Floristería Bromelia
Floristería Bromelia
Rediseño de página web para una floristería con enfoque en mejorar su usabilidad y accesibilidad
Duración del proyecto
4 Días
Categoría
UX / UI
Herramientas utilizadas
Figma
WAVE
Attention Insight
Descripción
Floristería Bromelia
Floristería Bromelia
Bromelia es una floristería especializada en la creación de arreglos florales únicos y personalizados para diversas ocasiones, como bodas, eventos corporativos, cumpleaños y momentos especiales.
Se enfoca en ofrecer flores de alta calidad y un servicio cercano y detallista que hace que cada cliente se sienta especial.
Bromelia es una floristería especializada en la creación de arreglos florales únicos y personalizados para diversas ocasiones, como bodas, eventos corporativos, cumpleaños y momentos especiales.
Se enfoca en ofrecer flores de alta calidad y un servicio cercano y detallista que hace que cada cliente se sienta especial.
Problemática
Problemática
La página actual de Bromelia presenta dificultades de navegación, lo que impide que los usuarios encuentren productos y secciones fácilmente. Además, el proceso de compra resulta poco fluido. La estética del sitio tampoco refleja la calidez y elegancia que caracteriza a la marca.
La página actual de Bromelia presenta dificultades de navegación, lo que impide que los usuarios encuentren productos y secciones fácilmente. Además, el proceso de compra resulta poco fluido. La estética del sitio tampoco refleja la calidez y elegancia que caracteriza a la marca.
Objetivos
Objetivos
• Mejorar la Experiencia de Usuario: La navegación debe ser intuitiva y permitir que los usuarios exploren las categorías de forma clara y sin distracciones.
• Reflejar la Personalidad de la Marca: Queremos una estética que evoque naturaleza y calidez. Bromelia se inspira en el verde, tonos cálidos y flores vibrantes, por lo que el diseño debe proyectar una sensación acogedora y cercana a lo natural.
• Mejorar la Experiencia de Usuario: La navegación debe ser intuitiva y permitir que los usuarios exploren las categorías de forma clara y sin distracciones.
• Reflejar la Personalidad de la Marca: Queremos una estética que evoque naturaleza y calidez. Bromelia se inspira en el verde, tonos cálidos y flores vibrantes, por lo que el diseño debe proyectar una sensación acogedora y cercana a lo natural.
Análisis
Wave (Web Accessibility Evaluation Tools)
Wave (Web Accessibility Evaluation Tools)
Es una herramienta que evalúa automáticamente la accesibilidad web y te da detalles sobre errores o alertas según las pautas WCAG (Web Content Accessibility Guidelines).
Es una herramienta que evalúa automáticamente la accesibilidad web y te da detalles sobre errores o alertas según las pautas WCAG (Web Content Accessibility Guidelines).
Diseño original
Análisis WAVE
Resultados generales del análisis:
Errores de Accesibilidad: Se detectaron elementos que presentan problemas de accesibilidad, como contraste insuficiente de colores, etiquetas faltantes o incorrectas en imágenes.
Problemas de Contraste: Hay varias áreas del sitio con contrastes de color que no cumplen con los estándares de accesibilidad, lo que podría dificultar la lectura para personas con baja visión.
Uso Inapropiado de Encabezados: La estructura de encabezados no es consistente, lo que afecta la jerarquía visual y dificulta la navegación para usuarios de tecnologías asistidas.
Resultados generales del análisis:
Errores de Accesibilidad: Se detectaron elementos que presentan problemas de accesibilidad, como contraste insuficiente de colores, etiquetas faltantes o incorrectas en imágenes.
Problemas de Contraste: Hay varias áreas del sitio con contrastes de color que no cumplen con los estándares de accesibilidad, lo que podría dificultar la lectura para personas con baja visión.
Uso Inapropiado de Encabezados: La estructura de encabezados no es consistente, lo que afecta la jerarquía visual y dificulta la navegación para usuarios de tecnologías asistidas.
Arquitectura de la información
La arquitectura de información para el rediseño de la página web fue creada con el objetivo de mejorar la navegación y la accesibilidad, facilitando que los usuarios encuentren rápidamente los productos y servicios de la floristería. La estructura se ha diseñado en torno a tres secciones principales: Tienda, Sobre Nosotros y Contacto, cada una con subcategorías que responden a las necesidades de información de los usuarios.
Esta organización permite un acceso intuitivo a las áreas clave, como los arreglos florales y plantas disponibles para compra en la tienda, los canales de contacto y la información sobre el equipo, brindando así una experiencia de usuario fluida y coherente con la identidad de la marca.
La arquitectura de información para el rediseño de la página web fue creada con el objetivo de mejorar la navegación y la accesibilidad, facilitando que los usuarios encuentren rápidamente los productos y servicios de la floristería. La estructura se ha diseñado en torno a tres secciones principales: Tienda, Sobre Nosotros y Contacto, cada una con subcategorías que responden a las necesidades de información de los usuarios.
Esta organización permite un acceso intuitivo a las áreas clave, como los arreglos florales y plantas disponibles para compra en la tienda, los canales de contacto y la información sobre el equipo, brindando así una experiencia de usuario fluida y coherente con la identidad de la marca.
user persona
La User Persona de Ana Martínez aporta un valor significativo al proyecto de la floristería al representar a una clienta ideal con un enfoque en la sostenibilidad y la calidad. Su perfil permite identificar oportunidades de mercado, personalizar la experiencia de compra y desarrollar estrategias de marketing efectivas.
Además, conocer sus necesidades y puntos de dolor guía la innovación en productos y servicios, fomentando la lealtad del cliente y diferenciando la floristería de la competencia.
Al alinearse con sus valores, el negocio puede ofrecer una experiencia memorable que impulse el crecimiento y la recomendación boca a boca.
La User Persona de Ana Martínez aporta un valor significativo al proyecto de la floristería al representar a una clienta ideal con un enfoque en la sostenibilidad y la calidad. Su perfil permite identificar oportunidades de mercado, personalizar la experiencia de compra y desarrollar estrategias de marketing efectivas.
Además, conocer sus necesidades y puntos de dolor guía la innovación en productos y servicios, fomentando la lealtad del cliente y diferenciando la floristería de la competencia.
Al alinearse con sus valores, el negocio puede ofrecer una experiencia memorable que impulse el crecimiento y la recomendación boca a boca.
Wireframes
En esta etapa del proyecto, desarrollé los wireframes con el objetivo de mejorar la experiencia de usuario y la claridad en la navegación.
Los wireframes permiten una visualización inicial de la estructura y jerarquía de los contenidos, organizando secciones clave como el hero principal, el catálogo de productos, la sección "Nosotros", las reseñas de clientes y los detalles de contacto. Cada elemento ha sido colocado estratégicamente para maximizar la usabilidad y facilitar a los usuarios la exploración de los servicios de la floristería, logrando así una experiencia fluida y accesible en cada sección de la página.
En esta etapa del proyecto, desarrollé los wireframes con el objetivo de mejorar la experiencia de usuario y la claridad en la navegación.
Los wireframes permiten una visualización inicial de la estructura y jerarquía de los contenidos, organizando secciones clave como el hero principal, el catálogo de productos, la sección "Nosotros", las reseñas de clientes y los detalles de contacto. Cada elemento ha sido colocado estratégicamente para maximizar la usabilidad y facilitar a los usuarios la exploración de los servicios de la floristería, logrando así una experiencia fluida y accesible en cada sección de la página.
Diseño visual
Teniendo en cuenta la dirección visual elegida y los ejemplos seleccionados, cree un diseño inicial de baja fidelidad para llegar a un prototipo funcional.
Teniendo en cuenta la dirección visual elegida y los ejemplos seleccionados, cree un diseño inicial de baja fidelidad para llegar a un prototipo funcional.
protipo
heatmap
Attention Insight (tecnología basada en el seguimiento ocular o eye trackin)
Attention Insight (tecnología basada en el seguimiento ocular o eye trackin)
Utilicé el mapa de calor para analizar cómo los usuarios visualizan y recorren la landing page, enfocándome en observar su patrón de lectura. Este análisis me permitió identificar las secciones de mayor y menor atención, lo cual es clave para comprender cómo los usuarios interactúan de manera natural con los elementos en pantalla.
Esta información sirve de base para posibles mejoras en el diseño, alineando la estructura visual con las preferencias de lectura de los usuarios.
Utilicé el mapa de calor para analizar cómo los usuarios visualizan y recorren la landing page, enfocándome en observar su patrón de lectura. Este análisis me permitió identificar las secciones de mayor y menor atención, lo cual es clave para comprender cómo los usuarios interactúan de manera natural con los elementos en pantalla.
Esta información sirve de base para posibles mejoras en el diseño, alineando la estructura visual con las preferencias de lectura de los usuarios.
Conclusiones generales
El rediseño de la web de Bromelia fue realizado con tres objetivos clave: mejorar la experiencia de usuario, optimizar el proceso de compra y reflejar la personalidad de la marca. A través de una navegación clara e intuitiva, se facilitó la exploración de productos, eliminando distracciones para una experiencia fluida.
La nueva navegación permite una exploración clara e intuitiva de la pagina ofreciendo una experiencia fluida para el usuario. El diseño refleja fielmente la esencia de Bromelia, con una paleta de tonos cálidos y acentos de color verdes que evocan naturaleza y calidez.
Este enfoque transmite una estética acogedora y cercana, alineada con la identidad de la marca.
El rediseño de la web de Bromelia fue realizado con tres objetivos clave: mejorar la experiencia de usuario, optimizar el proceso de compra y reflejar la personalidad de la marca. A través de una navegación clara e intuitiva, se facilitó la exploración de productos, eliminando distracciones para una experiencia fluida.
La nueva navegación permite una exploración clara e intuitiva de la pagina ofreciendo una experiencia fluida para el usuario. El diseño refleja fielmente la esencia de Bromelia, con una paleta de tonos cálidos y acentos de color verdes que evocan naturaleza y calidez.
Este enfoque transmite una estética acogedora y cercana, alineada con la identidad de la marca.