SITIO WEB: SINZU
Diseño de sitio web para un lanzamiento de producto nuevo. Investigación de mercado, investigación de usuario, descubrimiento y definición de la estrategia, alcance, estructura y esqueleto del sitio web mobile first.
Fecha:
Junio 2020 a Octubre, 2020
Disciplinas:
UX, Investigación de mercado, Auditorías competitivas, Data análisis, Propuesta de valor, Wireframes, Prototipado, Diseño de interacciones, Prueba de usabilidad.
Cliente:
Sinzu Nuvenne
Descripción del proyecto
El problema
La empresa Nuvenne quiere lanzar un MVP de una nueva línea de productos nutraceúticos, pero no conoce que hace la competencia y cuál debería ser su propuesta de valor a plasmar en un sitio web que sirva para mostrar la información de los productos y dónde comprarlos. No conoce tampoco que elementos de navegación y la estructura del sitio web que pueda ser escalable hasta llegar a un sitio de comercio electrónico. Además se cuenta con un presupuesto nulo para la investigación de usuarios y muy limitado para la definición y el diseño del prototipo.
Mi rol en el proyecto
Researcher, Diseñador UX y Diseño de interacciones. Diseñando un prototipo interactivo de un sitio web mobile first desde la investigación, definición, ideación y hasta el prototipo con interacciones para validarlo y proporcionarlo a otro equipo para el diseño visual y el desarrollo.
Las metas
- Definir la arquitectura de información del sitio web mobile first que sea escalable conforme avanza el desarrollo del producto.
- Definir y diseñar la propuesta de valor para el MVP en el sitio web.
Responsabilidades
Investigación de usuarios, benchmarking, auditorías competitivas, wireframing digital, creación de prototipos en baja y media fidelidad, realización de un estudio de usabilidad e iteración de diseños en mediana fidelidad.
Entendiendo el contexto
Benchmarking y auditorías comptetitivas
Objetivos
- Identificar estándares y soluciones de pares y competidores de los sitios web con mejor desempeño cumpliendo lineamientos y requerimientos de Google para posicionamiento SEO.
- Identificar indicadores clave de rendimiento, posicionamiento y comportamiento de sus usuarios.
Metodología
Benchmark secundario de sitios web comerciales de medicamentos de venta libre, suplementos alimenticios y nutracéuticos utilizando el conjunto de datos públicos de las propiedades de Google Analytics del sitio web, se analizaron las verticales siguientes:
- Visitas
- Tiempo promedio
- Rebote
- Tráfico desktop
- Tráfico mobile
- Directo
- Referido
- Orgánico
- Pagado
- Mailing
- Social
- Velocidad 4G
- Velocidad PC
- Peso
Plataforma
Herramientas digitales de pruebas de rendimiento y velocidad web y de consulta de
datos públicos de Google Analytics siguientes:
- Pingdom Tools
- GT Metrix
- Google Test My Site
- Similar Web
Formato
Visual y detallado. Screenshots y gráficas comparativas en Excel.
Pares y competidores directos e indirectos
Datos públicos demográficos en google analytics
empezando el diseño
- Arquitectura de información.
- Propuesta de valor.
- Digital wireframes.
- Low-fidelity prototype.
- Mid-fidelity prototype.
- Estudio de usabilidad.
Arquitectura de información
Objetivos:
- Identificar los principales contenidos de navegación, estándares y soluciones de pares y competidores.
- Estructurar sistemas de información para facilitar la
usabilidad de un sistema. - Hacer que la información sea atractiva y accesible para
una audiencia.
Mi proceso para definir la arquitectura UX
Como arquitecto UX, mi proceso para analizar las interfaces en el mercado y seleccionar los elementos en común se basa en una metodología rigurosa y sistemática.
En primer lugar, identifico las interfaces de referencia que son relevantes para el proyecto que estamos desarrollando. Para ello, investigo a los competidores directos o productos similares que los usuarios pueden estar utilizando.
Una vez que tengo una lista de interfaces de referencia, defino los criterios de análisis que utilizaré para evaluar las interfaces. Estos criterios están basados en los principios de usabilidad, accesibilidad, estética y funcionalidad. También me aseguro de tener en cuenta las necesidades y expectativas del usuario objetivo.
En el siguiente paso, analizo cada interfaz de referencia con un enfoque crítico y detallado, utilizando los criterios previamente definidos. Busco identificar las mejores prácticas y elementos en común que pueden ser aplicados en el diseño de nuestra interfaz propia.
Una vez que he analizado todas las interfaces de referencia, identifico las mejores prácticas y los elementos en común que se pueden aplicar en nuestro propio diseño. Estos elementos pueden incluir patrones de diseño, la organización de la información, la disposición de los botones y la forma en que se presentan los contenidos.
Finalmente, adapto estas prácticas y elementos en común a las necesidades del usuario objetivo y a los requisitos específicos de nuestro proyecto. Asegurándome de que la interfaz sea intuitiva, fácil de usar y cumpla con las expectativas del usuario.
En resumen, mi proceso como arquitecto UX para analizar las interfaces en el mercado y seleccionar los elementos en común, implica la identificación de las interfaces de referencia, la definición de criterios de análisis, el análisis detallado de las interfaces de referencia, la identificación de las mejores prácticas y elementos en común y su posterior adaptación a las necesidades del usuario objetivo y del proyecto.
Interfaces analizadas
A continuación, muestro únicamente el análisis del sitio web competidor e inspiración resultado del benchmark. Analicé la estructura y arquitectura del home (página principal) y de los elementos contenidos en los menús de navegación en la cabecera y pie de página. Después elaboré un mapa del sitio preliminar en base a los contenidos que los usuarios objetivos están acostumbrados en otras interfaces y finalmente, busqué añadir la propuesta de valor que pueda competir con el sitio inspiración.
MVP Arquitectura de información
Propuesta de valor
Usando el modelo del canvas de propuesta de valor, pudimos identificar los elementos necesarios, los puntos de dolor a evitar y los generadores de alegrías. En este sitio web propusimos que un perfilador nutricional, un geo localizador de tiendas, estadísticas actualizadas y contenidos personalizados por perfil de usuario harían destacar el sitio web sobre sus competidores.
Wireframes
Mi proceso para crear wireframes
Como experto en diseño UI, el proceso de creación de wireframes de mediana resolución en el contexto del diseño de experiencia de usuario involucra:
- Investigación y análisis para entender las necesidades y objetivos del usuario.
- Bocetos para explorar ideas y soluciones.
- Definición de la estructura y el flujo de la interfaz.
- Creación de wireframes de mediana resolución utilizando herramientas de diseño como Sketch, Figma o Adobe XD.
- Obtención de feedback y realización de iteraciones para mejorar la interfaz.
- Refinamiento de los detalles visuales como tipografía, color e iconos para alinear con la identidad de marca.
Este proceso garantiza que la interfaz final sea funcional, fácil de usar y visualmente atractiva para los usuarios.
Prototipado
Primera versión
Utilizando el conjunto completo de wireframes digitales, creé un prototipo de mediana fidelidad. El flujo de usuario principal que conecté fue el proceso de registro, localización de tiendas por geolocalización, por código postal y por categorías de publicaciones, por lo que el prototipo podría usarse en un estudio de usabilidad.
Después del estudio de usabilidad
Después de probarlo con un grupo de usuarios y con el cliente, se realizaron varios ajustes, se re diseñaron algunas secciones y agregaron otras funcionalidades. Después de realizar los ajustes, el cliente aprobó el prototipo y decidió pasar a la siguiente fase: El diseño visual y la entrega de archivos al equipo de desarrollo.
Aprendizajes:
- Me hubiera gustado realizar una investigación de usuarios que es una etapa antes del diseño UX y también realizar la etapa posterior, el diseño visual.
- Este proyecto me permitió conocer sobre la industria de complementos alimenticios, farmacéuticos y nutraceúticos.
- Los prototipos guiaron al cliente a tomar decisiones sobre su producto y a los equipos de diseño y desarrollo para las siguientes etapas.
- El tiempo dedicado al proyecto también fue limitado, pero el objetivo se alcanzó satisfactoriamente para el equipo de UX.
