If you want to see this project in English just click HERE! :)
El comercio electrónico, también conocido cómo e-commerce, está tomando mucha importancia en nuestras vidas. ¿Quién tiene tiempo de desplazarse a una tienda física entre semana? Durante el día a día nos vemos sometidos a diferentes situaciones que no nos dejan tiempo libre para poder visitar el comercio en el que queremos comprar un producto. Por todo ello, cada vez más, los emprendedores y las empresas optan por crear un e-commerce en el que los usuarios puedan comprar sin necesidad de salir de casa.
En la actualidad, el e-commerce ya ofrece diversas ventajas frente a la compra presencial a la que estamos acostumbrados. Si a esto le sumamos la rapidez con la que avanzan las nuevas tecnologías, ¿Imagináis las posibilidades que esto nos brinda a la hora de crear un e-commerce? Realidad virtual, realidad aumentada, hologramas, inteligencia artificial…
“Todo lo que puedas imaginar es cierto” Pablo Picasso
El reto ha sido crear un e-commerce futurista pensando en las tecnologías del futuro e implementándolas en nuestro diseño. Cómo UX designers, teníamos claro desde el principio que nuestro proyecto iba a ir enfocado a mejorar la experiencia del usuario con respecto a los e-commerce, queríamos proporcionarles comodidad y usabilidad, sin dejar de lado el principal objetivo de un comercio en línea: la venta de productos.
Para la realización de este proyecto hemos utilizado la metodología Design Sprint y se ha realizado completamente en remoto.
Día 1
Definición del objetivo
Lo primero que hicimos fue definir un objetivo para trabajarlo durante la semana. Nos dimos cuenta de que las aplicaciones farmacéuticas que existían a día de hoy no permitían el envío de medicamentos sujetos a prescripción médica y, debido a esto, las personas mayores y enfermas, debían desplazarse hasta la farmacia para conseguir su medicación. Finalmente decidimos que sería interesante darle un valor añadido a las aplicaciones de farmacia existentes, creando una app mediante la cual fuera posible recibir en casa medicamentos sujetos a prescripción médica. Por ello, nuestra aplicación estaría destinada, principalmente, a personas de más de 40 años, puesto que son más propensos a recibir una medicación.
Después de tener claro el objetivo, cada una de nosotras planteó seis Sprint Questions para plantear dudas y posibles problemas que pudieran surgir a lo largo del proceso de creación.
Proto Persona y Proto Journey
Para tener claro cuáles eran los problemas a los que se podían enfrentar nuestros usuarios potenciales, procedimos a la creación de dos Proto Personas, con distintos perfiles y características.
También creamos un Proto Journey en la herramienta online Miro, en el que se planteaba una situación con un objetivo final y el camino que recorrería el usuario hasta completarlo. De esta forma, podríamos ver reflejadas sus emociones y podríamos encontrar oportunidades de mejora en los momentos más tensos del camino.
Mediante este método, nos dimos cuenta de las dificultades a las que se enfrentaban los usuarios a la hora de comprar un medicamento, tanto de forma presencial cómo online. Antonio, presentaba mayores dificultades puesto que el trabajo hasta conseguir el objetivo era mucho más cansado y laborioso que el de Ana.
Preguntas HMW
Cuando ya habíamos estudiado con detenimiento los problemas que se planteaban en el camino de los usuarios a la hora de comprar un medicamento, procedimos a convertir esos problemas en oportunidades, realizando preguntas How Might We?
En Miro, dividimos un tablero en cuatro columnas: I+D, antes, durante y después y dispusimos ahí todas las HMW. En equipo, votamos las que considerábamos más importantes. Cada una de nosotras disponía de cuatro pegatinas y debíamos ponerlas en las preguntas que nos parecían más relevantes e interesantes. Finalmente, se escogieron dos de ellas para priorizar, pero no dejamos de tener en cuenta el resto.
Al finalizar el primer día ya habíamos definido un marco de actuación, teníamos una idea y una objetivo claros. Además, pudimos entender mejor los problemas a los que nos íbamos a enfrentar para poder solucionarlos más adelante.
Día 2
Revisión de ideas e investigación
Comenzamos el segundo día repasando las ideas del día anterior y realizando una investigación online en busca de inspiración. Cuando finalizamos la búsqueda, pusimos todos los conocimientos adquiridos sobre la mesa y cada una de nosotras explicó al resto del equipo las ideas más originales que había encontrado en la red a través del lightning demos. Mientras una compañera exponía sus ideas, las demás tomábamos nota mediante pequeños Sketches para tener una representación más visual.
Creación de bocetos: Solution Sketch
En esta fase, procedimos a la realización del Solution Sketch, plasmando la idea que más nos interesaba en forma de boceto, dividido en tres pasos y explicados correctamente en un lado. La realización de los Sketches fue anónima para no influirnos ni limitarnos de ninguna forma.
Día 3
Decisión final
Durante el tercer día de trabajo, estuvimos decidiendo cuál de todas las ideas iba a ser sobre la que trabajaríamos durante todo el proceso que nos quedaba por hacer.
Dispusimos las cuatro propuestas en un tablero y utilizando la técnica del dotmocrazy para poner en común cuales nos resultaban más interesantes e innovadoras, aunque todavía no sabíamos la autora de cada una de ellas. Después, todo el equipo en conjunto, analizamos cada uno de los Solution Sketch y tomamos notas de las preguntas que nos surgían en la parte de abajo y de las particularidades buenas que tenía cada una de ellas en la parte de arriba.
Cuando terminamos el análisis, las autoras explicaron el por qué de cada propuesta y resolvieron las dudas que habían surgido. Finalmente, decidimos trabajar sobre la idea de “Pagando por la cara”, una app que se instalaría en un SmartMirror con el método de pago facial y tomar, además, algunas ideas de FarmaHome que también nos resultaron interesantes.
Guión gráfico
Ahora teníamos que darle forma a la idea. Decidimos crear un pequeño Story Board plasmando el recorrido de cómo nuestros usuarios iban a interactuar con la app en el SmartMirror. Después, seguimos anotando pequeños cambios a realizar.
Día 4
Prototipo
¡Llegó el momento de poner a prueba nuestra idea! A lo largo de este día, estuvimos creando un prototipo para que pudiera ser testado al día siguiente. Mediante el guión gráfico pudimos descartar cualquier otra idea y centrarnos solamente en una.
El primer paso fue crear un Inspiration Board para tomar referencias y decisiones a la hora de crear el prototipo.
FarmaHome
El nombre final de nuestra app es FarmaHome, porque transmite perfectamente el objetivo para el cual sería creada.
Buscábamos un prototipo que fuera lo más real posible. Teníamos que crear una interfaz para un SmartMirror teniendo en cuenta todo lo que ello conllevaba, ya que no es un dispositivo al que estemos acostumbrados hoy en día.
Los roles asignados del equipo fueron: creadora, pegadora, redactora y recopiladora de fuentes. A lo largo del proceso fuimos decidiendo las funciones y el contenido de nuestra app:
- Se trata de una aplicación enlazada a la Seguridad Social mediante las recetas electrónicas. El médico de cabecera puede recetar los medicamentos y queda registrado. De esta forma, la farmacia puede enviar medicamentos sujetos a prescripción médica a domicilio.
- La app se activaría mediante un botón situado en el espejo o mediante un código de voz, así, los usuarios con movilidad reducida podrían acceder sin problema.
- Una vez dentro, solamente el usuario de la cuenta puede ingresar en su perfil. El ingreso al perfil sería mediante reconocimiento facial, una técnica muy avanzada de sistemas de reconocimiento biométrico. Comprobaréis que la persona que sale en la imagen de fondo está más cerca del “espejo” en los momentos del reconocimiento facial, esto es para dar énfasis a este procedimiento.
- En el menú principal nos encontramos con cinco opciones: carrito, perfil, calendario, botiquín y parafarmacia. Debíamos tener un MVP. El alcance de nuestro prototipo incluye las funcionalidades de las secciones carrito, calendario y botiquín. Las secciones perfil y parafarmacia no han sido incluidas. A su vez, la sección medicinas sin receta dentro del menú botiquín también queda fuera del alcance.
- Carrito: solamente nos indica si le hemos dado a comprar a algún producto.
- Perfil: puedes configurar tus datos personales y las posibilidades que te brinda la aplicación, cómo por ejemplo, las conexiones con otros dispositivos inteligentes.
- Calendario: es un calendario diario, puedes ver las medicinas que tienes que tomar ese día y programar alarmas de toma. Además, también se puede ver la cantidad de pastillas que quedan de un medicamento, de esta forma, si queda poca cantidad de una medicina importante para el usuario, el sistema le alerta y puede comprar la medicina mediante un CTA o mediante reconocimiento de voz. Por seguridad, el CTA solo aparecerá cuando sea completamente necesario y el doctor lo apruebe.
- Botiquín: el botiquín es un inventario de las medicinas que tienes en casa. Dentro tenemos los menús “medicinas con receta” y “medicinas sin receta”. En “medicinas con receta” encontramos todas las medicinas sujetas a prescripción médica y en “medicinas sin receta” todas las demás, aunque para el test, no configuramos interacciones en esta última. Podemos ver la información de todos los medicamentos y la cantidad de pastillas que quedan de cada uno de ellos. Si quedan pocas pastillas también se podrá comprar desde este menú.
- Parafarmacia: aquí el usuario podrá comprar productos de higiene personal o medicamentos de venta libre.
- Función de compra de medicamentos sujetos a prescripción médica: Cuando el sistema nos alerta de la escasez de un medicamento, se activa el CTA para comprar ese producto.
Se abre el menú del carrito y se procede a comprar el medicamento. Cómo se puede observar, no se han implementado botones de añadir más o menos cantidad del producto para evitar la automedicación irresponsable. Si el usuario pulsa en “seguir comprando” le llevaría directamente al menú “parafarmacia”.
Cuando el usuario pulsa en “Confirmar datos” se abren los datos de la compra y ya puede pulsar en “Finalizar compra”.
El método de pago también sería mediante el sistema de reconocimiento facial, así, evitamos que el usuario tenga que ingresar sus datos bancarios cada vez que va a realizar una compra.
Cuando finaliza el proceso de compra, se nos muestra un mapa para el seguimiento del pedido y el tiempo exacto de la entrega. De esta forma, evitamos uno de los problemas más graves a los que nos enfrentamos cuando creamos un e-commerce: la impaciencia del usuario respecto a la entrega de los productos.
Se cierra el mapa y el espejo vuelve a su función original, arriba a la derecha, podemos ver la cuenta atrás del tiempo de entrega.
Día 5
Test de usuario
El último día del Sprint realizamos los test de usuario. ¡Era el momento de ver cómo personas reales reaccionaban a nuestra app!
Escogimos a cuatro personas de entre 40 y 70 años. Para que la prueba de test fuera eficiente, decidimos poner al usuario en un escenario real y crear una serie de tareas para ir guiando la navegación.
Escenario
“Un hombre de 65 años con una enfermedad crónica se levanta por la mañana y se dirige hacia el baño. Una vez allí, activa su SmartMirror y procede a realizar una serie de tareas”.
Creamos un Mock Up para que la idea fuera mucho más visual:
Tareas
1- Encender el espejo
2- Consultar la medicación diaria
3- Activar la alarma de aviso de toma
4- Comprar el medicamento del que queden pocas pastillas
5- Consultar el tiempo de entrega del pedido
6- Consultar las medicinas ligadas a la receta electrónica
7- Apagar el espejo
¡Testando!
Para realizar las entrevistas nos preparamos un tiempo antes. Mientras que una de nosotras entrevistaba al usuario, las demás apuntábamos todo lo que ellos nos iban proponiendo, dónde fallaban y lo que les parecía más o menos intuitivo.
Comenzamos hablando un poco con ellos de la vida en general para generar confianza, les intentamos tranquilizar y nos aseguramos de que estuvieran cómodos. Después, procedimos a realizar el test.
Finalmente, cuando los cuatro usuarios terminaron los test, pudimos crear un tablero con el resultado de las entrevistas. Al lado del tablero, pusimos las áreas de mejora.
La gran mayoría de ellos, se confundían a la hora de consultar las medicinas ligadas a la receta electrónica. Les parecía poco intuitivo que se permitiera comprar los medicamentos mediante tres caminos: el botiquín, el calendario y la parafarmacia. Además, echaban de menos más información acerca de los iconos o acerca de algunas funciones de la app.
Nuestros usuarios fueron una gran fuente de información. Nos sirvió para darnos cuenta en lo que habíamos fallado y nos dieron la oportunidad de seguir mejorando el prototipo más adelante.
Gracias a los test de usuario, pudimos darnos cuenta de nuestros errores. Basándonos en los Principios Heurísticos de Jakob Nielsen y en todos los fallos de la fase de testado, procedimos a implementar algunas mejoras en nuestro prototipo.
- Para comenzar hemos creado un logotipo para la aplicación y hemos centrado la interfaz para que no saliera tan ajustada a la parte derecha del SmartMirror. Además, se quitaron los letreros de la cara del usuario y ahora se muestran en la parte izquierda, de esta forma, nos deshacemos de esa sensación de agobio de tener algo tapando el rostro. Cómo podemos observar, el botón de encendido y apagado del espejo se encuentra en todas las vistas ya que en el prototipo anterior desaparecía durante la navegación en la app.
- La usabilidad del menú principal no estaba del todo clara. Los usuarios necesitaban más información acerca de los iconos y no sentirse perdidos durante el proceso, por ello hemos añadido labels que nos indican que es cada uno de ellos. Hemos suprimido el icono “parafarmacia” puesto que ningún usuario sabía que significaba y hemos decidido fusionarlo con “Mi Botiquín”, lo veremos más adelante.
- Cuando el usuario entraba en su calendario de medicinas, esperaba encontrarse un calendario más claro. En el anterior prototipo le dimos más importancia a la medicina y el calendario era diario. Algunos usuarios echaron de menos tener un calendario mensual donde poder organizarse las medicinas a largo plazo en caso de necesitarlo. Por ello, el calendario ha pasado a ser mensual y, además, se podrán programar alarmas de toma en las medicinas recetadas para ese día.
- Por otro lado, se ha sustituido la flecha para volver al menú principal por una “x” y posicionada en la parte superior derecha, ya que resultaba muy poco intuitiva para los usuarios en el anterior prototipo.
- Seguimos en el menú “Mi Calendario”. Si pulsamos el día en el que estamos, podremos ver con más detenimiento los detalles de las medicinas diarias. Ahora se indica la hora de toma, la cantidad que debe tomar y la programación de la alarma. Además, hemos añadido una label aclaratoria en el icono de emergencia por escasez de medicina, ya que, en el anterior prototipo, algunos usuarios se sentían confusos con el icono de emergencia, incluso llegaron a pensar que la señal podría significar “medicamento peligroso”. No queríamos dejar lugar a duda y por eso se añadió la label.
- También se añadió una label aclaratoria en la flecha para ir hacia el calendario mensual.
- En la imagen anterior quedaban cinco pastillas del medicamento que se mostraba y por eso sale el CTA “Comprar”. Es importante remarcar que si el medicamento no se encuentra en escasez, el CTA queda desactivado para evitar la automedicación irresponsable o la compra excesiva de medicamentos.
- El menú “Mi Botiquín” también ha sufrido algunos cambios. Cuando entrábamos antes se mostraban dos menús: “Medicinas con receta” y “Medicinas sin receta”. Era muy confuso para los usuarios, por lo que hemos decidido cambiar por completo esta parte y mostrar solamente los medicamentos que tenemos en casa sujetos a prescripción médica.
- Para comenzar, se ha fusionado la parafarmacia con el botiquín, de esta forma, si pulsamos en “Mi Botiquín” encontraríamos las opciones “Mis medicamentos” y “Comprar en parafarmacia”.
- Si pulsamos en “Mis medicamentos” podremos ver todo el Stock de medicamentos con receta electrónica que tenemos en casa. Se ha añadido un texto aclaratorio en el que se nos indica dónde estamos en este momento y lo que nos vamos a encontrar y se ha añadido un scroll táctil en la parte derecha para poder ver más medicamentos. También se nos indica que este menú solo podrá ser editado por el médico de cabecera. Cómo podemos observar, desde aquí también podemos proceder a la compra del medicamento cuando existe una escasez de pastillas.
- Por otro lado, si volvemos al menú “Mi Botiquín”, nos encontramos con la opción “Comprar en parafarmacia”. Cuando lo abrimos también nos encontramos un texto aclaratorio sobre lo que se puede comprar en esta sección. Se pueden comprar medicamentos sin receta médica y productos de higiene personal. Además, se ha añadido un buscador por voz, para evitar poner un teclado en el espejo, algo que tendría muy poca usabilidad.
- Se estuvo barajando la posibilidad de cambiar el nombre del CTA por “Añadir al carrito” pero realizamos un estudio y, en la mayoría de farmacias, las personas suelen llevarse dos productos máximo, por lo que el CTA “Comprar” nos pareció más adecuado en este caso.
- Si pulsamos en un producto, podremos ver para que sirve el producto e incluso opiniones de otros usuarios.
- El proceso de compra no ha cambiado demasiado, puesto que era muy intuitivo y los usuarios no tuvieron gran problema a la hora de usarlo. Hemos eliminado algunas líneas visuales para evitar elementos innecesarios.
- En los datos de la compra se ha añadido un letrero informativo justo debajo del CTA que nos indica que el pago se va a realizar mediante reconocimiento facial.
- En el momento del pago por reconocimiento facial también hemos pretendido mantener al usuario informado de lo que está pasando en todo momento mediante el texto de la izquierda.
- La geolocalización del paquete y el tiempo de espera para la llegada del pedido se ha mantenido tal y cómo estaba puesto que no resultó ser un problema para los usuarios, al revés, les gustó mucho que se mostrara este menú.
- La información del Tracking en el prototipo anterior si que dio problemas. Algunos usuarios no encontraron la forma de volver a ver el mapa de nuevo para ver por dónde iba su pedido. Por eso, hemos añadido un letrero informativo e intuitivo en la parte superior derecha, donde se encontraba el anterior en el que solo ponía el tiempo de llegada.
- Cuando el usuario haya terminado de usar la app, le daría al botón de on/off situado en la parte inferior derecha y el SmartMirror volvería a su función original de espejo.
Publicidad en Redes Sociales
El reto ha sido bastante difícil y a la vez, muy gratificante. Teníamos que pensar en el e-commerce del futuro y decidimos arriesgarnos realizando una interface para un SmartMirror, un objeto al que no estamos acostumbrados en la actualidad.
Trabajamos duro en equipo durante cinco días y pudimos llegar a tener un MVP para poder ser testado. En la fase de Test, los usuarios nos dieron tanta información que decidimos mejorar algunas partes del prototipo y, cómo resultado, obtuvimos una interfaz mucho más intuitiva y minimalista.
No sabemos todavía cuál será el avance tecnológico en un futuro, pero si de algo estamos seguras es de que la tecnología debería evolucionar para ayudar al ser humano a vivir mejor y, proyectos cómo FarmaHome, podrán aportar su pequeño “granito” de arena.
If you want to see this project in English just click HERE! :)
