Caso práctico UX/UI
eWAPP
el comercio electrónico para todos
ROL: diseñadora UX/UI
TIEMPO: 05/28 noviembre
PROCESO: Design Thinking
Proyecto diseño UX en Coursera
¿Qué es «eWAPP»?
«eWAPP» es un servicio de comercio electrónico multidispositivo (app dedicada y ordenador, tablet y móvil) para personas que están dando sus primeros pasos con la tecnología
Objetivo del proyecto
El objetivo de este proyecto es conocer y diseñar los contenidos que serían importantes para facilitar al usuario el uso de una app que sirva para crear su tienda online sin apenas conocimientos de la tecnología.
El desafío
Conseguir que cualquier persona pueda utilizar nuestra app y sea capaz de crear su propio e-commerce, sin más ayuda que la que haya en la misma app.
La meta
Diseñar una app inclusiva, accesible y útil para todos, que sirva para que los usuarios con poca experiencia en tecnología puedan crear un e-commerce con facilidad.
Mi Rol
Como diseñadora de UX/UI de principio a fin durante todo el proyecto, he profundizando en diversos procesos hasta llegar al diseño final.
Mis responsabilidades fueron
- Empatizar con los usuarios
- Encontrar los puntos de dolor
- Definir la declaración del problema
- Idear soluciones
- Crear la arquitectura de la información
- Prototipado en baja y alta fidelidad
- Testeo de los prototipos
- Iteración
Metodología
Utilicé Design Thinking para comprender el problema que debía resolver y crear soluciones para así poder abordar los problemas reales de los usuarios.
EMPATIZAR
DEFINIR
IDEAR
PROTOTIPAR
PROBAR
1. EMPATIZAR
Comencé realizando una investigación UX. Hice entrevistas primarias a 5 personas de diferentes sexos y edades entre 18 y 60 años que tenían un negocio de ventas. Algunos habían tenido experiencia realizando un ecommerce y otros que ni siquiera sabían que se podría hacer sin experiencia previa. Les pregunté qué pensaban sobre crear su propia tienda online, usando una aplicación. A los que ya habían tenido alguna experiencia les pregunté su opinión sobre el uso de la aplicación y con qué problemas se habían encontrado.
Encontré mucha información, la cual me llevó a saber cuáles eran los principales puntos de dolor.
Puntos de dolor
Demasiadas opciones
El usuario que había tenido experiencia anteriormente, se sentía confundido por la cantidad de opciones que se le ofrecía
Suficiente información
Algunos usuarios sentían inseguridad y solicitaban que hubiera algún tipo de ayuda en cada paso del proceso
Imagen corporativa
Los usuarios se preguntaban si podrían mantener la imagen corporativa de su negocio.
2. DEFINIR
Persona
Para encontrar la mejor solución al problema, definí a dos personas que podrían usar esta aplicación. Una más joven que recién comienza con su negocio y otra que está cansada de viajar con sus productos para venderlos.
“Mi sueño siempre fue tener mi propia tienda de ropa”
Marta
Edad: 24
Educación: ciclo de Grado Superior en Gestión de Ventas
Ubicación: Teruel
Familia: soltera
Ocupación: propietaria de una tienda de ropa
Marta acaba de montar su propia tienda de ropa para chicas jóvenes. Vive en una ciudad con pocos habitantes por lo que se siente insegura acerca de su futuro. Su mejor amiga le habló de crear una tienda online para ampliar las miras de su nuevo negocio y apostar por un futuro más próspero.
Metas
• Conseguir que su nueva tienda prospere.
• Vender ropa a chicas de otras ciudades.
Frustraciones
«No puedo permitirme pagar a una empresa que construya mi ecommerce»
«Dudo si podré hacerlo yo sola»
“Me encanta vivir en el campo ya que inspira mi trabajo. Sería increíble si pudiera vender mis cuadros sin necesidad de desplazarme”
Arturo
Edad: 56
Educación: Bellas Artes
Ubicación: afueras de Badajoz
Familia: divorciado
Ocupación: artista pintor
Arturo lleva toda su vida pintando al óleo y vendiéndolos en galerías de arte. Como vive en el campo y a veces le cuesta desplazarse con sus cuadros hasta algunas galerías, alguien le habló de ponerlos a la venta por internet. Le pareció buena idea aunque no tenga muchos conocimientos para hacerlo.
Metas
• Vender cuadros por internet.
• No necesitar desplazarse para vender sus obras.
Frustraciones
«Estoy cansado de ir a galerías de arte a vender mis cuadros»
«No tengo mucha experiencia con internet. Dudo si podré hacerlo»
Mapa del recorrido
Mediante el mapa del recorrido, nuestra persona Arturo realiza los pasos a seguir para crear tu tienda online y poner sus cuadros a la venta.
3. IDEAR
En el proceso de ideación generé un amplio conjunto de ideas por diferentes medios. Primero realicé una auditoría de la competencia para conocer las fortalezas y debilidades de los competidores. Utilicé la lluvia de ideas sobre posibles soluciones utilizando el método How might we, haciendo una sesión Crazy 8’s y creando un guión gráfico y un flujo de usuario.
Auditoría de la competencia
Seleccioné a cuatro competidores directos. Quería usarlos como referentes y saber cómo enfocaban la web tanto en diseño como la arquitectura de la información y contenidos.
Estos competidores ofrecen un proceso para que cualquier usuario pueda crear una web o una app. Algunos eran básicos y sencillos y otros daban muchas opciones con múltiples posibilidades. Me pareció interesante el enfoque que dan sobre el panel de control para que un usuario con pocos conocimientos pueda crear su propia página web, app o e-commerce.
How might we
Utilicé «How might me» para idear y abordar el problema de diseño
¿Cómo podríamos hacer una aplicación para que personas sin conocimiento de la tecnología puedan crear un ecommerce?
¿Cómo podríamos diseñar una aplicación ofreciendo ayuda de cómo realizarla?
¿Cómo podríamos hacer que cualquiera pueda crear una tienda online?
¿Cómo podríamos tener un ecommerce sin tener ni idea?
¿Cómo podríamos fusionar una tienda física con una tienda online?
¿Cómo podríamos hacer que una tienda online venda sola?
Arquitectura de la información
Para poder construir el ecommerce, el usuario debe configurar la aplicación desde un panel de control. Los pasos que debe seguir deben estar claros en la estructura informacional. Para ello organicé todo por orden de importancia.
4 y 5. PROTOTIPADO Y PRUEBAS
Prototipo en Baja Fidelidad
A continuación construí en Figma las maquetas en baja fidelidad y conecté los diferentes elementos de tal manera que se pudiera interactuar con el producto. Primero hice las maquetas para la app y posteriormente para móvil, tablet y ordenador.
Para probar que todo funcionaba correctamente y que el flujo llevaba al usuario a realizar la opción deseada, realicé un estudio de usabilidad.
Con el estudio descubrí que tenía que indicar con más claridad dónde crear los productos y mejorar el apartado de categorías. Solucioné estos problemas y pasé a siguiente paso.
Versión para APP
Versión para Móvil
Versión para Tablet
Versión para Ordenador
Prototipos en Alta Fidelidad
Llegó el momento de elegir colores, tipografías iconos e imágenes para crear las maquetas en alta fidelidad. Una vez creadas estas maquetas para app, móvil, tablet y pantalla, las conecté para crear los prototipos y realicé una segunda ronda de estudio de usabilidad preguntando a los usuarios si en conjunto, cumplía con sus necesidades o encontraban algún problema.
Versión para APP
Versión para móviles
Versión para tablet
Versión para ordenador
Diseño final
Una vez pulidos los detalles de la última investigación, di el trabajo por finalizado.
Próximos pasos
Ampliar el diseño al resto de las pantallas. La falta de tiempo al tener que diseñar todos los dispositivos me llevó a desarrollar las pantallas principales.
Crearía el apartado del front-end del ecommerce.
Crear los textos definitivos.
Diseño visual
Tipografía
Poppins
h2 / 14px
Body normal / 14px
Body pequeño / 12px
Colores
Botones y Enlaces
¿Qué he aprendido?
Los usuarios suelen descubrirme detalles en los que nunca me hubiera fijado
Es importante que arquitectura de la información esté bien organizada para obtener resultados óptimos
La organización en proyectos tan grandes es importante
¡GRACIAS!
Agracezco tu tiempo y atención para la revisión de este trabajo.
Fotos de Pawel Czerwinski en Unsplash