1. Investigación
Mediante la investigación se analizó el estado de la web para detectar las necesidades y problemas que tenía la web y los posibles problemas que los usuarios tenían al interactuar con el sitio en la versión móvil.
Encuestas y Entrevistas con los usuarios
Con las encuestas se recopilaron las opiciones y observaciones de lo que quieren los usuarios al interctuar en el sitio web. Así como revisar las suposiciones de las posibles cambios a realizarse en el sitio web.
Análisis Heurístico
Mediante este análisis se realizó la evaluación cuantitativa de la usabilidad, accesabilidad y arquitectura del sitio web. Me permitió analizar desde una perspectiva personal las posibles inconvenientes que tiene el sitio, encontrantdo falta de funcionalidades, búsqueda de productos y ayuda a primeros usuarios.
Estudio de Referencia y Documento de Conclusiones
Mediante este estudio se lograron encontrar las mejores prácticas y patrones de diseño que conllevan a una mejor experiencia del usuario, mediante la revisión de los sitios web de otras empresas a nivel nacional o internacional, obtuvimos nuevas ideas, para mejorar y replicar funcionalidades.
Diagrama de Afinidad
Con esta técnica mediante post agrupamos la información obtenida durante todo el proceso de investigación de forma visual, clasificando por áreas las partes del proyecto a mejorar o proponer nuevas funcionalidades acorde a las necesidades del usuario.
Poster Research
Mediante este documento resumimos la información más relevante obtenida en la investigación del proyecto para la presentación de los Stakeholders.
2. Empatizar
Con las conclusiones del poster research definimos los públicos potenciales de CASANOVA AUTOPARTES, así como su comportamiento y necesidades al momento de hacer la búsqueda del producto y así proponer mejoras y nuevas funcionalidades que resuelvan estos problemas.
User Persona
Mediante el user personas identificamos el personaje de nuestro usuario, le dimos un nombre y una personalidad, definimos sus comportamientos, situacion demográfica y necesidades en realción al producto.
Mapa de Empatía
Mediante el mapa de empatía simulamos lo que piensa y lo que escucha el usuario en relación a su necesidad, permitiéndonos meternos en la mente del usuario y anticipar sus decisiones en relación al producto.
Proto-jorney
Definimos los pasos que el usuario o user persona debe cumplir para realizar la compra de un repuesto, reflejando su comportamiento y espectativas, incluyendo sus posibles emociones al interactuar con el sitio web, este nos permitió ver que punto de dolor son los que le impiden tener una mejor experiencia con el sitio web.
3. El Alcance del Proyecto
Mediante el alcance del proyecto creamos un Producto Mínimo Viable y definimos las características necesarias que debe tener nuestro producto para que tenga éxito.
Value Proposititon Canvas
El Value Proposition Canvas nos permitió redefinir o pulir nuestra propuesta de valor y las nuevas funcionalidades de nuestro producto, en donde definimos las actividades del usuario en el producto, puntos de dolor y la forma de contrarestrar estos, así como los productos y servicios mínimos que podremos ofrecer para satisfacer las necesidades del usuario.
Historias de Usuario
Las historias de usuario al ser sencillas y de fácil comprensión nos permitió identificar los requerimientos y necesidades del susuario realizando las preguntas tales: Como, quiero y para conseguir, añadiendo el job story como complemento del contexto del usuario, dando más datos precisos del requerimiento del usuario como cuando necesita de nosotros el producto.
4. Arquitectura de la Información
La arquitectura de la información permitió organizar y distribuir el contenido del sitio de una forma correcta, de tal manera que se encuentre con facilidad.
Sitemap (Mapa del Sitio)
Flujo de Usuario
Definí uno de los principales flujos del producto digital en base a la técnica Ryan Singer, siendo muy fácil de comprender enfocándose en las funcionalidades.
5. Wireframes y Prototipo
Con el objeto de comprobar si las pantallas que se van a diseñar cumplen con el requerimiento del usuario, se procedió a diseñar a nivel de estructura con wireframes hechos a mano sin darle enfásis al diseño sino a las funcionalidades y como se conectan estas entre si.
Wireframes dibujados a mano y Prototipo interactivo
Test de usabilidad
Durante el Test de usabilidad se hizo la siguiente propuesta:
- Que el usuario busque una ROTULA - repuesto por vehículo chevrolet, aveo del año 2015.
- Se le pidió que buque la opción de cambiar de vehículo.
- Se le indicó que busque filtar los productos por marca del repuesto.
- Finalmente se indicó que busque la ficha completa del producto.
Del test de usabilidad el usuario pidió que haya una opción directa donde se pueda gestionar uno o varias unidades cuando hace una búsqueda de tal forma que pueda cambiar a su gusto y también eliminar las opciones en caso de comprar sin necesidad de una marca específica.
Finalmente se realizaron las correcciones y se volvió a presentar la propuesta de valor con wireframes de alta fidelidad para dar una mejor comprención de la propuesta.
Presento en el video el prototipo terminado, me enfoque en las funcionalidades que se plantea incorporar para mejorar la búsqueda y usabilidad en la versión móvil.
Conclusiones y Recomendaciones
Se realizó las diferentes fases del proyecto desde la investigación, empatizar, alcance del proyecto, arquitectura de la información y concluí con los wireframes y el prototipo interactivo, el mismo que fue testeado con los usuarios para probar las mejoras y nuevas funcionalidades del sitio web en móvil.
Las conclusiones con respecto a la Home del sitio web fue incorporar:
- Patrones de Diseño ejemplo filtros de búsquedas
- Navegación clara y comprensible
- Navegación de primeros usuarios guiada
- Advertencias por falta de selección de vehículo para evitar incompatibilidades de repuestos
- Búsqueda fácil y comprensible
- Filtros de vehículos y buscador como primer foco
- Catálogo por Marca de Vehiculo, Marca de Repuesto y Tipo de Repuesto
- Opiniones verificadas de clientes por google u otro sistema de comentarios
- Destacar mejores productos valorados
- Dar breve reseña de Garantía, Envío y Devoluciones
- Incluir banner de Promociones
Para la ficha del producto:
- Imágenes medianas adaptables a móvil
- Características técnicas, posición, EAN (Código de fábrica) y OEM (Código internacional de repuesto) y asignación particular del artículo puesto por el almacén
- Valoraciones
- Disponibilidad y cantidad en stock
- Precio con ahorro en $ y descuento en %
- Selección de lugar de Entrega gratuita y a domicilio
- Fecha tentativa de entrega
- Destacar años X de Garantía
- Cantidad - 1 +
- Botón Añadir a la Cesta
- Comprar Ahora
- Permitir añadir a Favoritos
Todo este trabajo de investigación y desarrollo nos ayudó a averiguar las verdaderas necesidades del usuario en relación al producto digital y poder incorporar cambios viables respondiendo así a los requerimientos del usuario, que permitirán optener más visitas y conversiones.
Agradecimientos:
Muy agradecida por el profesionalismo y expertiz del Profesor Oscar Santos, en Diseño de Producto Digital con Lean y UX durante el curso de Domestika y de Elastic Heads, quienes estuvieron guíandome en todo el proceso.