Taller Hands On de Flores Navarro

 

Logotipo Flores Navarro

En el taller Hands On de Flores Navarro se ha realizado un análisis de la web actual, detectando los problemas de navegación y de la arquitectura de la información. Por consiguiente, se han propuesto diferentes soluciones para mejorar la experiencia del usuario tanto en la versión mobile como desktop.

El proyecto se ha dividido en 5 etapas. En primer lugar, se ha analizado la página actual, para ello el equipo se centró en tres aspectos en concreto: copy, UX, y arquitectura de la información. En la segunda etapa, se hizo un estudio de la competencia, para aprender de buenas praxis. Consecuentemente, se realizó una nueva estructura de la información y navegación. Además, se quiso mejorar la sección más importante de la web, el apartado de bodas. Por último, se realizó dos wireframes donde se plasmó los cambios propuestos.

1. Análisis de la web actual

En cuanto al copy, el equipo se percató que muchas de las fichas de producto estaban incompletas, sin descripciones de producto ni jerarquía en el texto. Además, los nombres de los productos y de las categorías de plantas y flores no eran nada claros. Por otro lado, el contenido no estaba pensado para móvil.  

Respecto al apartado de UX, se enumeraron varias malas praxis de la actual web flores Navarro. Por un lado, no hay una guía de estilos definida, la web tiene diferentes tipos de fuentes y colores, dificultando la lectura al usuario. Por otro lado, no hay un buscador ni tampoco un menú estático donde el usuario se pueda guiar y sepa donde está en todo momento. Se mezclan servicios online y offline, hay productos que se pueden comprar en línea pero en cambio, no dan esa opción para otros productos.

En cuanto a la versión mobile, el menú no se ve de manera clara y aparece repetido en el footer y en la parte derecha del header. Por último, el número de teléfono está escrito pero no se puede llamar directamente. Estas son algunas de las conclusiones a las que se llegó, siendo conscientes de la mala experiencia que estaba sufriendo el usuario.

Referente a la arquitectura de la información, cabe destacar la poca utilidad del menú, se deben de hacer hasta 3 clicks para empezar a ver algún producto. Las categorías del menú de navegación son poco claras siendo la primera opción el blog corporativo. Hay dos webs dentro de una, se cambia de una a otra haciendo click en el logo. Por otro lado, el proceso de compra es muy largo y es necesario registrarse al inicio. No existen filtros de búsqueda ni para desktop ni para mobile. Por último, el submenú de navegación en móvil está muy escondido.

2. Benchmark

Para resolver los problemas de la web actual de Flores Navarro detectados en el análisis previo, se decidió investigar cómo habían resuelto dichos conflictos otras webs de la competencia.

FLORAQUEEN

La web ofrece la posibilidad de buscar flores por ocasiones. Es decir, sus usuarios pueden buscar directamente flores para un nacimiento, un cumpleaños, para dar las gracias, etc.

INTERFLORA ESPAÑA y FLORCLICK

Ambas webs presentan un buscador por filtros en la página principal. El de Interflora España contiene los filtros de destino, ocasión y día de entrega, mientras que el de Florcick contiene los de tipo de flor, ocasión y presupuesto.

Además, Interflora España también contiene otro recurso que pareció interesante. En la página principal, debajo del menú principal y del buscador por filtros, hay una sección de categorías específicas destacadas. Este recurso se ha utilizado para darle fuerza a la sección de Bodas.

URBANSTEMS

De esta web resultó interesante la simplicidad del menú de navegación principal, que contiene únicamente 4 categorías: todo, flores, plantas y regalos. Además, los elementos gráficos de la página web (fondo, texto, botones…) siguen una escala de color neutra, dejando que las flores destaquen por sus colores.

FLOWERS NATURALLY y ROSAS DON ELOY

Ambas webs incluyen una sección de filtros al lado de la lista de productos. Así, la compra es más sencilla para el usuario, al poder descartar productos que no cumplan sus necesidades.

En resumen, a partir del análisis de estas webs se adoptaron las siguientes soluciones. En cuanto a la navegación, se incluyó la posibilidad de buscar flores por ocasiones y por filtros en la página principal. Además, se incluyeron filtros de precio, color de la flor y accesorios (jarrón o cesta) al lado de la lista de productos.

En cuanto a aspectos estilísticos, se decidió seguir un diseño minimalista y neutro en el que las flores sean las únicas que aportan color a la página web, para así destacar su protagonismo.

3. Arquitectura de la información

Se dibujó la arquitectura de la información de la web mediante Gloomaps para poder analizar en detalle su estructura y el modo en que se comparte contenido con el usuario. La home se compone de un menú de navegación, las categorías son: blogproducto, bodas,  servicios, nuestros eventos y contacto. De estas seis categorías, tres de ellas, producto, bodas y servicios, tienen subcategorías.

Por ejemplo, al hacer click en producto, tenemos las siguientes subcategorías: Flores, plantas, bonsais, arte funerario y añadir un detalle. Y al hacer click en flores, se abre otra subcategoría: con base, sin base y ramos espectaculares. Como podemos ver en el ejemplo hay dos niveles de categorías para cada categoría.

Mapa de la web actual de Flores Navarro

Arquitectura de contenidos de la web actual de Flores Navarro

Análisis de la arquitectura actual

La primera categoría es el blog y, siendo la web un negocio de flores y plantas, esto confunde el usuario, no es relevante para la web. Algunas categorías, como “añadir un detalle” resultan difíciles de entender.

Debido al nivel muy profundo de cada categoría, da como resultado una navegación difícil; ya que, hay que hacer 3 clicks para  poder ver un producto.

Se han analizado cada categoría y se ha concluído que, las categorías principales y sus subcategorías son poco claras y no ayudan el usuario en la navegación de la web. El número de subcategorías, como se puede ver en la imagen, es demasiado amplio y no ayuda el usuario en su navegación. 

Después de este análisis, se decidió definir la siguiente propuesta de nueva arquitectura de la información de la web de Flores Navarro.

Propuesta de mejora de la arquitectura de la web de Flores Navarro

Propuesta de mejora de la arquitectura de la web de Flores Navarro

4. Navegación

Se determinaron 3 tipos de usuarios diferentes de la web de Flores Navarro y, para cada tipo se determinó un journey distinto, un tipo de navegación diferente.

  1. Usuario que quiere ojear: Tendrá disponible el menú principal con las categorías de productos y todos ellos.
  2. Usuario que tiene una ocasión concreta: Podrá usar el buscador con filtros para reducir las opciones de compra.
  3. Usuario que quiere un producto específico: Podrá usar el buscador textual para introducir el nombre del producto que busca.

5. Sección Bodas

Para finalizar, se decidió escoger una parte de la web y desarrollarla en profundidad. Para ello se eligió la sección de bodas, ya que Flores Navarro la destaca en su web actual por la relevancia que tienen las bodas en el sector de la floristería.

La navegación de los clientes que buscan flores para su boda en la web actual está bastante segmentada. Es una navegación por tipo de producto, con las categorías: centros de mesa, complementos, colecciones, packs y ramos de novia.

Por ello, se decidió ofrecer una navegación más fluida, que engloba todos los servicios florales de una boda de una forma más natural. La conclusión fueron dos tipos de navegaciones:

  1. Por tipo de producto. En esta navegación, los novios encontrarán tres subcategorías, según sus necesidades. La primera, Tu ramo de novia, para las novias que sólo buscan un ramo. La segunda, Decora tu ceremonia, mostrará arreglos florales para decorar iglesias o espacios dedicados a la ceremonia. Por último, la tercera, Decora el restaurante, ofrecerá los centros de mesa y otros arreglos florales para la celebración. 
  2. Diseño personalizado paso a paso. La segunda navegación es para los novios que quieran el pack completo. Es decir, los que quieran encargar las flores para decorar una boda en su totalidad (ramo de novia, flores para la ceremonia y para el restaurante) y, además, quieran que los guíen en todo momento.  La web irá mostrándoles el catálogo de productos fase por fase y, finalmente, se les ofrecerá un presupuesto orientativo que podrán confirmar poniéndose en contacto con Flores Navarro.

Finalmente, para ayudar en la selección de flores se incluirán unos filtros de estilo de boda. Así, los novios podrán descartar productos que no sean afines a su estilo. Los filtros de estilo de boda serán estilo clásico, estilo natural y estilo románticoTodos estos cambios se muestran en el siguiente wireframe de la propuesta de nueva sección de bodas.

6. Wireframes

Los wireframes de la propuesta de mejora de la web de Flores Navarro reflejan un concepto minimalista, estructurado y haciendo énfasis en los elementos más importantes de la página web que atraerán al usuario a comprar de una manera más clara. Se hicieron dos prototipos: para Desktop y para Mobile

Desktop

Mobile

 

7. Conclusiones

El objetivo del análisis fue entender cómo el usuario interactúa con la web y los principales problemas que tiene al comprar. Es importante ver que el análisis fue enfocado en la parte de usabilidad y experiencia de usuario. Aunque en la propuesta se tomó también en consideración la parte de diseño.

Este trabajo de usabilidad y experiencia de usuario fue realizado en 9 horas. En éstas, se exploraron nuevas herramientas como Marvel y Gloomaps, las cuales fueron de utilidad para el equipo al desarrollar los prototipos.

Para concluir, la usabilidad de la página de Flores Navarro se ve resumida en un prototipo fácil, gráfico y minimalista, para que los usuarios tengan una experiencia única al comprar flores online.

 

Equipo de trabajo: Arianna Loayza, Laura Cano, Laura Ruiz, Leire Alonso, Maria Celma y Mile Rubio

¡Deja el primer comentario, no seas tímido!

Únete a la discusión

Puedes utilizar los siguientes HTML tags y atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>