Instituto lala - Responsive website
El sitio web anterior fue diseñado por el equipo de diseño gráfico en el departamento de marketing de la agencia anterior que Grupo Lala contrató para diseñar sus sitios web. La propuesta de diseño no consideró la arquitectura de información, el contenido necesario para un instituto de investigación, ni una propuesta de valor bien definida. Grupo Lala tenía una comprensión clara del tipo de usuarios que utilizarían la plataforma, pero no se realizó investigación de usuario durante el alcance del proyecto. Por lo tanto, el mandato de diseño, el alcance y el entregable solo incluyeron definir la arquitectura de información, la propuesta de contenido y prototipos con wireframes de mediana resolución. Estos prototipos servirán como guía para otros equipos, como diseño visual, desarrollo, marketing y contenido, en el marco de trabajo en cascada definido por el cliente.
Fecha:
Febrero a marzo de 2021
Cliente:
Grupo Lala México
Servicios:
- Benchmark de contenidos.
- Benchmark de rendimiento.
- Auditoría competitiva.
- Arquitectura de información.
- User journey maps.
- Digital wireframes.
- Mid-fidelity prototype.
El objetivo:
Re diseñar la arquitectura de información, proponer una estrategia de contenidos y un nuevo diseño visual del sitio web.
Mi rol:
UX designer, Arquitecto de información y consultor UX.
Responsabilidades:
Conducir estudios de mercado e investigación sobre contenidos y arquitectura de información de los institutos de investigación en las principales marcas comercializadoras de productos lácteos y proponer una nuevo diseño sitio web y una estrategia de contenidos acorde a la importancia y responsabilidad social de la marca en México.
EL PROBLEMA
Entendiendo el contexto
Como experto investigador de usuario, el proceso de realización de un benchmark implica los siguientes pasos:
- Identificar los competidores y referentes relevantes del mercado.
- Definir los criterios de evaluación para comparar los sitios web o aplicaciones de los competidores.
- Recopilar y analizar datos de los competidores en función de los criterios de evaluación definidos.
- Identificar fortalezas y debilidades de los competidores.
- Sintetizar los hallazgos y presentarlos de manera clara y visual a los stakeholders.
- Obtener feedback de los stakeholders y realizar iteraciones si es necesario.
Este proceso permite obtener información valiosa sobre cómo se está desempeñando la competencia en el mercado y qué se puede aprender de sus fortalezas y debilidades. Estos hallazgos pueden ser utilizados para guiar la toma de decisiones en el diseño y desarrollo de un producto o servicio.
Benchmarks realizados:
- Benchmark de rendimiento en pares y competidores.
- Benchmark de arquitectura de información.
- Benchmark de contenidos.
- Análisis de datos públicos de Google Analytics.
COMPETIDORES
INSTITUTO DANONE – MÉXICO
http://www.institutodanone.org.mx/
LECHE PULEVA – ESPAÑA
https://www.institutopulevanutricion.es/
SIGMA NUTRICIÓN – MÉXICO
https://www.institutopulevanutricion.es/
LACTALIS NUTRICIÓN – FRANCIA
https://lns-privatelabel.com/
UNDENIABLY DAIRY – USA
https://www.usdairy.com/
PEDIASURE PESO Y TALLA – MÉXICO
https://www.pediasurepesoytalla.com.mx/
11 sitios web analizados + Instituto Lala
OTROS INSTITUTO DANONE
INSTITUTO DANONE – USA (blog)
http://www.dannon-institute.org/
INSTITUTO DANONE – ITALIA
https://www.istitutodanone.it/
INSTITUTO DANONE – FRANCIA
https://institutdanone.org/
INSTITUTO DANONE – ESPAÑA
http://www.institutodanone.es/
INSTITUTO DANONE – INDONESIA
http://www.danonenutrindo.org/
INSTITUTO LALA – MÉXICO
https://lns-privatelabel.com/
Arquitectura de información
Pares y competidores mejor evaluados
Arquitectura de información
Sitio web actual
Propuesta de valor para nuevo sitio web
SITEMAP
Mi proceso para definr la arquitectura de información
Como arquitecto de información en el contexto de UX Design, el proceso para definir la arquitectura de información de un sitio web implica los siguientes pasos:
- Identificar los objetivos y necesidades del usuario y del negocio.
- Realizar una investigación sobre los usuarios y sus necesidades, para entender cómo se relacionan con la información del sitio web.
- Definir los principales temas y categorías de contenido que se abordarán en el sitio web.
- Desarrollar una estructura de navegación para el sitio web, identificando las secciones principales y subsecciones, y determinando cómo se relacionan entre sí.
- Crear un mapa del sitio web que visualice la estructura de navegación y cómo se relacionan las páginas entre sí.
- Definir las etiquetas y la nomenclatura utilizada en el sitio web, asegurándose de que sean claras y consistentes.
- Realizar pruebas de usuario para validar la estructura de navegación y la nomenclatura, y hacer ajustes según sea necesario.
Este proceso permite crear una arquitectura de información sólida que asegure que los usuarios puedan encontrar y comprender la información de manera efectiva y eficiente, mejorando la experiencia del usuario y cumpliendo con los objetivos del negocio.
Wireframes y prototipos
Patrón Z en pantallas de equipos de escritorio
Como arquitecto de información, considerar el patrón Z en el diseño de interfaces es importante porque permite crear una estructura de navegación efectiva que ayuda a los usuarios a escanear la información de manera eficiente y natural. Al seguir este patrón, los usuarios pueden encontrar fácilmente los elementos clave de la interfaz, lo que mejora su experiencia de usuario y reduce su carga cognitiva.
Además, el patrón Z también me ayuda a crear una jerarquía visual efectiva. Los elementos importantes se colocan en lugares clave del patrón Z, lo que asegura que los usuarios puedan identificarlos y comprender rápidamente su función. Al diseñar la interfaz siguiendo este patrón, se pueden mejorar la accesibilidad y la usabilidad, lo que se traduce en una mayor satisfacción del usuario.
En resumen, el patrón Z es importante en el diseño de interfaces porque permite crear una experiencia de usuario intuitiva y fácil de usar. Al seguir esta estructura de navegación, se pueden optimizar la eficiencia y la efectividad de la interfaz, lo que a su vez mejora la satisfacción del usuario y la eficacia del producto.
Prototipos en Adobe XD
Enlaces a los prototipos en mediana resolución con los flujos y propuesta de contenidos realizados en Adobe XD, con licencia del software de la suite de Adobe proporcionada por la agencia digital.
Diseño visual
El diseño visual lo realizó un externo siguiendo los flujos, wireframes y prototipo en Adobe XD proporcionados en esta fase del diseño del sitio web.
Aprendizajes
Me hubiera gustado realizar una investigación más completa y elaborado la técnica card sorting con usuarios reales para comprobar hipótesis y sustentar con más pesos las decisiones del diseño. También me hubiera gustado dar seguimiento con el diseño visual y el desarrollo del sitio además de realizar pruebas de usabilidad para iterar, ajustar y mejorar la interfaz. El alcance de este proyecto no lo permitió y únicamente participé en la fase de definición de la arquitectura de información y diseño de los flujos de usuarios.
El cliente en Grupo Lala estuvo muy complacido con el entregable y respetaron casi en su totalidad los flujos, el diseño UX y la propuesta de contenidos.