English
EspañolOMNILIFE es una empresa que se dedica a la fabricación y distribución de suplementos nutricionales. De origen mexicano y tiene presencia en más de 20 países.
El Reto
Rediseñar el portal público de OMNILIFE y mejorar la experiencia de uso del e-commerce.
Factores internos y externos a tomar en cuenta
- Por temas jurídicos y legales, no se podía decir mucho de los productos e ingredientes.
- La web debe comunicar a dos tipos de usuarios a quien esté interesado en consumir productos, como quien desee venderlos.
- El contexto cultural, en algunos países es común solicitar cierta información que en otros se considera innecesaria o invasiva.
La Solución
El equipo de diseño definió una estrategia digital basa en tres pilares:
Diseño: Generar bases que se puedan sostener y replicar en el tiempo.
Accesibilidad: Cumplir con los 4 principios base de las pautas WCAG.
Impacto medioambiental: lograr optimizar recursos, disminuyendo la huella de carbono aplicando best practices de green digital skills.
Cliente
OMNILIFE
Tools
Figma, Miro, Excel, Maze, Optimal Workshop
Role
UX Designer Lead en un equipo de 4 personas (2 UI Designers, 1 UX Writting).
Duración
5 meses: de marzo a agosto 2024
La disposición del cliente
La colaboración activa, una toma de decisiones ágil y la apertura al cambio fueron fundamentales para asegurar el éxito del proyecto.
Después de la sesión de Kikoff se definió el plan de trabajo entre los que incluía realizar un workshop de Lean Inception (5 sesiones en una semana).
El Proceso
1. Discovery, Lean inception y estrategia
En la etapa de discovery realizamos investigación cuantitativa y cualitativa para identificar las necesidades, motivaciones y dolores tanto de los usuarios, stakeholders y mercado.
a. Principales hallazgos del Discovery
Entrevistas
Encuestas
Benchmark
b. Lean Inception
A través de un trabajo inmersivo, enmarcado en las metodologías ágiles, nos permitió definir un plan para abordar el proyecto desde un MVP.
Logramos definir:
-
Objetivo y alcance
-
Propósito y usuarios
-
Viaje de usuarios
-
Funcionalidades
-
Certidumbre e impacto
-
Contenidos y tono de voz
2. Definición
Definimos los perfiles de usuario, sus viajes y necesidad clave en el canal digital de la web.
2.1 Proto Persona
Definimos los clientes potenciales y actuales en grupos distintos basados en características demográficas, comportamientos de compra, necesidades y objetivos que pretenden alcanzar al interactuar con la empresa.
3. Ideación
3.1 Mapa del sitio
Se han simplificado las rutas para que las personas lleguen más rápido a lo que necesitan.
Reorganizamos los contenidos del sitio a partir de los hallazgos de la etapa de Discovery. Esta fue una de las tácticas que usamos para desomnilizar el sitio.
4. Design
4.1 Wireframing
Antes de comenzar a diseñar, revisé todo lo que se había creado hasta ahora: mapa del sitio, personas, hallazagos del discovery y tener siempre presenter el objetivo definido. La comunicación con el equipo y cliente fue eficientemente en todo momento.
El proceso fue el siguiente: sesión con stakeholder decisor > análisis de información actual >wireframe > iterate > re-wireframe.
4.2 UI Design
Construímos el UI Kit con elementos visuales y componentes de interfaz para que puedan ser utilizados y adaptados para construir el sitio web y mobile.
El objetivo es disminuir errores en el proceso de diseño, favorecer la consistencia, facilitar el desarrolloy reutilización de componentes.
5. Prototipado y Testing
Medimos la experiencia a través de test de usuarios. Nuestro proyecto tuvo 11 Sprints de 2 semanas.
Realizamos 3 procesos de test:
- Sprint 3: Tree Testing.
- Sprint 8: Test de usuarios moderado.
- Sprint 10: Test de usuarios no moderado.
6. Principales logros
Lograr la colaboración activa, para una toma de decisiones ágil y la apertura al cambio fueron fundamentales para asegurar el éxito del proyecto.
Consistencia y estandarización
Estructura: para la navegación y layouts de página.
Look and feel: consistencia visual y pautas de accesibilidad.
Escalabilidad
UI Kit, con 430 componentes reutilizables y ajustables.
Para todos y todas
Sitio fácil de navegar, reducimos la curva de aprendizaje y utilizamos un lenguaje claro y conciso.
Accesible, aplicando estándares internacionales A y AA.
7. Siguientes Pasos
El proyecto se encuentra en proceso de implementación, se han realizado sesiones de handoff con el equipo de TI para velar por la consistencias entre diseño y desarrollo (QA).
- Se tiene un listado de backlog y priorización de siguiente funcionalidades a abordar.
- Aplicar la estrategia CRO.