CustomBike
•27 septiembre 2024•8 MinutesEl producto
CustomBike es una web de bicicletas ecológicas que se caracteriza por la amplia personalización para todos los estilos de vida: ciudad, desplazamientos, allroad, aire libre, familia y mucho más.
El problema:
La necesidad de este proyecto surgió a partir de la observación de que muchos usuarios enfrentaban dificultades al personalizar y comprar bicicletas a medida en línea. Nuestro objetivo era identificar áreas de mejora en la experiencia del usuario y optimizar la interfaz del sitio web para hacer el proceso de personalización más intuitivo y satisfactorio.
El objetivo:
El objetivo principal de nuestra investigación es mejorar la experiencia del usuario en el sitio web de personalización de bicicletas. Esto incluye hacer el proceso de personalización más intuitivo
Mi rol:
Diseñador UX-UI rediseñando la app desde el concepto hasta el prototipado.
Responsabilidades:
Desde la realización de entrevistas, esquemas en papel y digitales, creación de prototipos de alta y baja fidelidad, realización de estudios de usabilidad, hasta la consideración de la accesibilidad e iteración de diseños.
Entendiendo al usuario
- Investigación de usuarios
- Personas
- Planteamiento de problemas
- Mapas de viaje del usuario
Investigación de usuarios: metodología
Se utilizó un enfoque cualitativo para recopilar datos a través de entrevistas y estudios de usabilidad con 6 participantes ficticios representando diferentes perfiles de usuarios.
Las sesiones incluyeron tareas específicas para observar cómo los usuarios interactúan con el sitio web y la aplicación móvil.
Investigación de usuarios: resumen y puntos débiles
Se observaron varios comportamientos y se identificaron áreas problemáticas específicas durante las tareas de personalización y pedido en el sitio web:
- Optimización de la Carga de la vista previa
- Lentitud en la carga de la vista previa de la bicicleta personalizada.
- Facilidad para Modificar Selecciones
- Claridad del Menú de Navegación
- Información Detallada de Productos
- Facilitar la Comparación de Opciones
- Personalización de Accesorios en Vista Previa
- Mejora de la Experiencia Móvil
Investigación de usuarios: puntos débiles más importantes
1
Feedback Visual en la Interfaz
- Problema: Falta de respuesta visual clara durante la personalización.
- Sentimiento: Confusión.
- Mejora: Mejorar la respuesta visual para hacer el proceso más intuitivo.
2
Facilitar la Comparación de Opciones
- Problema: Dificultad para comparar diferentes opciones de personalización.
- Sentimiento: Indecisión.
- Mejora: Implementar herramientas de comparación de opciones.
3
Mejora de la Experiencia Móvil
- Problema: Experiencia de usuario en dispositivos móviles inferior a la de escritorio.
- Sentimiento: Frustración.
- Mejora: Optimizar la experiencia en dispositivos móviles.
Planteamiento del problema:
Olivia es una emprendedora de tecnología que desconfía de las aplicaciones con interfaces complicadas
Antecedentes:
Edad: 32 años
Estado civil: Casada
Ciudad natal: Madrid
Profesión: Emprendedora y desarrolladora de aplicaciones móviles.
Intereses: Innovación, tecnología, emprendimiento social.
Contexto:
- Olivia está constantemente en movimiento debido a su trabajo como emprendedora.
- Le apasiona crear soluciones tecnológicas que aborden problemas sociales.
Necesidades y Objetivos:
- Busca herramientas eficientes para la gestión de proyectos.
- Desea aplicaciones que faciliten la colaboración remota.
- Quiere estar al tanto de las últimas tendencias tecnológicas para aplicarlas en sus proyectos.
Frustraciones:
- Desconfía de las aplicaciones con interfaces complicadas.
- Le irrita la falta de actualizaciones y soporte técnico en las herramientas que utiliza
Estudio de usabilidad: resultados
Se llevó a cabo dos series de estudios de usabilidad. La información obtenida en la primera evaluación orientó la evolución de los diseños desde los esquemas digitales hasta las representaciones más detalladas. En la segunda evaluación, se empleó un prototipo de alta fidelidad para identificar y perfeccionar aquellos aspectos de las representaciones más detalladas que requerían mejoras
Resultados de la 1ª ronda
1. Simplificar y reorganizar la estructura del menú para que sea más intuitiva y fácil de usar.
2. Mejorar la velocidad de carga de la vista previa de la bicicleta personalizada.
3. Implementar funcionalidades que permitan a los usuarios cambiar sus selecciones durante el proceso de personalización de manera sencilla
Resultados de la 2ª ronda
1. Incluir indicadores visuales que confirmen las acciones del usuario.
2. Incluir descripciones completas, especificaciones técnicas y beneficios de cada componente
3. Proporcionar detalles accesibles y fáciles de entender sobre el proceso de devolución, plazos y condiciones
Mapa del recorrido del usuario
El mapa del recorrido de uno de los participantes reveló lo útil que sería para los usuarios poder elegir de manera sencilla e intuitiva una bicicleta según las necesidades de cada cliente
Empezando a diseñar
Esquemas en papel
Esquemas digitales
Prototipos de baja fidelidad
Estudios de usabilidad
Esquemas en papel
Se realizaron varios wireframes por cada pantalla con el fin de tener más ideas y juntar todas las mejores ideas en un último sexto wireframe.
Wireframes
Invertir tiempo en elaborar versiones en papel de cada interfaz de la aplicación aseguró que los elementos integrados en los diseños digitales fueran apropiados para atender las áreas problemáticas identificadas por los usuarios. En cuantoa la pantalla de selección de bicicletas,me enfoqué en desarrollar un sistema de tarjetas ágil y sencillo con el objetivo de facilitar a los usuarios la visualización por las bicicletas.
Esquemas digitales
Wireframes
Durante la etapa inicial de desarrollo, me cercioré de fundamentar los diseños de las interfaces en las observaciones y resultados obtenidos de la investigación de los usuarios.
Esta sección de bicicletas por tarjetas, facilita y agiliza la visualización a los usuarios. Más adelante, se modificaron ciertas partes de la pantalla
Prototipos en baja fidelidad
LO-FI
Utilizando los esquemas digitales, generé un prototipo de baja fidelidad. Me enfoqué principalmente en el flujo principal del usuario, que abarcaba desde la home hasta la compra de bicicleta hasta la confirmación del perdido, con el propósito de que el prototipo fuera apto para su evaluación en un estudio de usabilidad.
Perfeccionamiento del diseño
Maquetas
Prototipos de alta fidelidad
Accesibilidad
Maquetas
El primer estudio reveló una cierta frustración en las tarjetas de bicicletas.
A una gran mayoría de usuarios les costaba diferenciar el tipo de bicicleta que estaban visualizando. Se añadieron etiquetas arriba para solucionarlo
Prototipos en baja fidelidad
LO-FI
Utilizando los esquemas digitales, generé un prototipo de baja fidelidad. Me enfoqué principalmente en el flujo principal del usuario, que abarcaba desde la home hasta la compra de bicicleta hasta la confirmación del perdido, con el propósito de que el prototipo fuera apto para su evaluación en un estudio de usabilidad.
Related Posts
