CREACIÓN DE UNA ECOMMERCE PARA 2030 CON DESIGN SPRINT

Maria Farré Ávalos
6 min readOct 12, 2020

--

A finales de septiembre inicié mi formación en diseño UX/UI y hoy vengo a contaros el primer proyecto que he realizado junto a tres compañeras.

Reto: Crear una ecommerce pensada para el 2030.

La única premisa fue la misma, crear una ecommerce tratando de predecir los hábitos de consumo que habrá en 2030. En todo lo demás tuvimos absoluta libertad.

Como habréis visto en el título, la metodología elegida para enfrentarnos a este reto fue el design sprint. Primera toma de contacto con el diseño UX/UI… ¡Allá vamos!

Antes que nada…

El primer paso fue elegir el sector. Teniendo en cuenta que las compras online no dejan de aumentar año tras año en (casi) todos los sectores, optamos por elegir uno cuyo la mayoría de los clientes siguen prefiriendo la experiencia de compra en tienda física: la cosmética.

Se podría decir que el hecho de no poder probar los productos antes de comprarlos es el principal problema al adquirir cosmética por Internet, y a día de hoy este sigue sin resolver.

Este fue el mayor campo de oportunidad que encontramos, por lo que la ideación de nuestra ecommerce giró en torno a este conflicto en todo momento.

Design sprint: paso a paso

Como he mencionado previamente, seguimos paso por paso todas las técnicas que conforman el design sprint, de lunes a viernes, hasta obtener nuestro primer prototipo.

Imagino ya sabréis cómo funciona esta metodología, por lo que simplemente voy a adjuntar capturas de pantalla para mostrar algunas de las técnicas de research e ideación que llevamos a cabo.

User Journey Maps
Ideas y dotmocracy

Aprovecho para comentar que la principal herramienta que utilizamos fue Miro, con la que pudimos trabajar en remoto de forma simultánea. Lo cierto es que la desconocía y ha sido todo un descubrimiento.

Resultado: Cosmetips — La app para escanear, probar productos virtualmente y aprender con tutoriales.

Tras la gran cantidad de ideas que generamos durante los primeros días de la semana, finalmente decidimos quedarnos con 3 hacer de ellas las 3 principales funcionalidades de nuestra app:

  • Escáner de productos: La app permite escanear productos y los encuentra rápidamente.
  • Probador virtual y recomendación personalizada : La app permite “probar” los productos mediante reconocimiento facial. Es decir, la app escanea nuestro rostro y aplica el cada producto en la zona correspondiente. Además, la app recomienda productos específicos para cada usuario en función de distintos criterios: tono de piel, tipo de piel, color de ojos, forma de los ojos, forma de los labios, forma de las cejas… etc. Con esta función se pretende ofrecer en la app la ayuda y atención que prestan los y las dependientas en una tienda física.
  • Tutoriales por reconocimiento facial: Una vez el cliente ha recibido el producto en casa, puede aprender cómo aplicárselo con tutoriales por reconocimiento facial. De nuevo, la app escanea nuestro nostro y nos indica en qué zonas aplicar el producto y cómo hacerlo.

A continuación algunas de las pantallas de la app.

Pantallas de la app Cosmetips

Y llegó la hora de la verdad: Tests de usuario

Realizamos 3 test distintos (uno por cada función principal de la app) a un total de 5 usuarias. Al ser nuestro principal público objetivo, las participantes fueron mujeres de distintas edades desde 23 a 58 años.

Al igual que todo lo anterior, realizar un test de usuario también era algo nuevo para mis compañeras y para mí. Fue gratificante ver que las usuarias eran capaces de conseguir lo que les pedimos, y también muy interesante darnos cuenta de que no todo lo que nosotras veíamos tan obvio al diseñar la app lo era en realidad.

Captura de pantalla durante uno de los test

Tras los test de usuario pusimos en común todos los problemas y puntos de mejora detectados e hicimos los cambios necesarios en nuestra app.

Aún así, recordando el reto (ecommerce para el año 2030) quise aportar por mi cuenta un valor diferencial y añadir el grado de innovación que creía le faltaba a Cosmetips. Por lo que, a partir del diseño e idea iniciales, adapté la app original a una app para espejos inteligentes.

Smakeup: la app de maquillaje para Smart Mirrors

Esta permite:

  • Compras desde la misma app.
  • Probar los productos de forma virtual. Esto funciona mediante reconocimiento facial que aplica los productos sobre nuestro reflejo. Así el usuario puede hacerse una idea lo más realista posible de cómo quedan los productos sobre su piel.
  • Aprender o mejorar las técnicas de aplicación del maquillaje de los usuarios con tutoriales. De nuevo, el reconocimiento facial muestra sobre el reflejo las zonas en las que aplicar los productos y cómo hacerlo.

Además de estas 3 funciones básicas, me gustaría comentar los siguientes puntos:

  • Teclado ergonómico: escribir sobre una superficie colocada completamente vertical puede no ser lo más cómodo. Es por eso que para facilitar la escritura sobre el espejo se ha optado por un teclado ergonómico.
  • Búsqueda por voz: Si el usuario lo prefiere, también podrá dictar lo que desea buscar o la sección que desea abrir.
  • Toda la superficie del Smart Mirror es interactiva, aunque en la mayoría de las pantallas solo se ocupa el tercio inferior para no tapar el reflejo del usuario.
  • Las pantallas que ocupan mayor superficie son las de catálogo, ya que es más rápido y cómodo para el usuario visualizar más productos a la vez.
  • Posibilidad de añadir productos al carrito o a Favoritos arrastrándolos al icono correspondiente de la derecha.
  • Gestos más intuitivos/naturales: Retroceder tocando la parte izquierda de la pantalla o “avanzar” tocando la parte derecha.

A continuación algunas pantallas de Smakeup.

Por último, diseñé el logotipo y una landing page para incentivar la descarga de la app que os muestro a continuación:

Logotipo Smakeup
Landing page Smakeup

¡Y hasta aquí mi primer proyecto como diseñadora UX/UI! He disfrutado mucho con este y estoy impaciente por seguir aprendiendo y enfrentarme a próximos retos :)

--

--