Pocket Office — Caso de estudio UX/UI
Introducción
A estas alturas y con una pandemia mundial de por medio hablar de teletrabajo es historia antigua. Veámoslo con datos para ganar perspectiva: antes de la pandemia teletrabajaba el 4,8% de la población, durante el estadio más duro de la pandemia esta cifra aumentó hasta alcanzar el 16,2% y aunque en la actualidad el porcentaje ha disminuido situándose en 9,4%, podemos extrapolar que la población activa que teletrabaja ha aumentado en un 100% respecto a valores anteriores a la pandemia. Como dicen muchos, el teletrabajo ha llegado para quedarse.
Directamente relacionado con el teletrabajo y las condiciones del hogar para trabajar con comodidad en un espacio apropiado, aparece la no tan conocida domótica experimentando un crecimiento de un 300% a tan solo dos años vista.
A finales de 2021 nuestro equipo recibió un briefing en el desarrollo del UX/UI Design Bootcamp de UXER SCHOOL, que conjugó ambas situaciones. Déjame contarte cómo lo hicimos.
Punto de partida
Partimos del siguiente contexto, una startup de muebles robotizados del MIT Media Lab quiere impulsar la venta de su producto estrella «Pocket Office» en España. Su filosofía se basa en facilitar que las personas de las grandes ciudades vivan con todas las comodidades y beneficios de un gran espacio, en uno reducido.
Para conseguirlo se valen de la creación de una experiencia de compra directa, dando la posibilidad de que el cliente personalice su mueble.
Metodología
Fase de investigación y análisis
Nuestro recorrido comienza en la fase de investigación y análisis. Recabamos información mediante técnicas cualitativas, haciendo entrevistas a una muestra de ocho personas que conformaban nuestro target; y mediante el lanzamiento de una encuesta de Google, técnica cuantitativa.
Filtrando toda la información recibida obtuvimos ideas clave que se repetían, todo ello se materializó en Martina, nuestra User Persona.
La finalidad de todo proceso de investigación es la obtención de los insights, ideas clave expresadas de forma clara y contundente, obtenidas de las entrevistas con los usuarios y refrendadas por verbatims.
Este proceso arrojó datos muy interesantes sobre la venta online y la desconfianza que a priori genera, más aún cuanto más caro es el producto que se va a adquirir. Vimos como este sentimiento de desconfianza se incrementaba de forma exponencial si los potenciales usuarios no podían verlo en una tienda física.
«Nunca he comprado ningún mueble online sin ir a la tienda»
Dimos por finalizada la investigación con la obtención de nuestro Jobs To Be Done, esta herramienta nos permite alcanzar la idea principal que el usuario tiene en mente para adquirir un mueble robotizado, dicha idea principal estará apoyada por varios JTBD secundarios que se sustentarán en información proporcionada por los usuarios entrevistados, incluyendo sus verbatims.
El JTBD principal de nuestros usuarios era tener un espacio de trabajo propio, ya que muchos de ellos tenían que trabajar en su mesa de comedor o en general, en lugares no adaptados para ello reduciendo así su productividad y su comodidad. Otro de los grandes problemas a los que se enfrentaban en su día a día era que no eran capaces de separar su «oficina» de su casa, al usar el mismo espacio para ambas situaciones.
Propuesta de valor
La propuesta de valor tiene que ver con el valor percibido por los usuarios al utilizar un producto o servicio, en otras palabras, aquello que los usuarios creen que van a obtener usando un producto o servicio.
Para hacer tangible la propuesta de valor de nuestro producto nos ayudamos del Business Model Canvas y del lienzo de propuesta de valor, creados ambos por Alexander Osterwalder. El lienzo de propuesta de valor está contenido por el Modelo de Negocio y se divide en dos zonas diferenciadas, por un lado el Mapa de Valor y por otro el Perfil del Cliente. Hemos de ver el Perfil del Cliente (en la imagen posterior, es el círculo de la derecha) como «el espacio del problema de un segmento de clientes» y al Mapa de Valor (en la imagen posterior, es el cuadrado de la izquierda) como «el espacio de creación de valor», una vez que detectamos las dificultades pudimos aportar soluciones.
Hagamos una parada en el camino
No hay nada mejor que alejarse un poco y poner distancia para ver con claridad el punto en el que te encuentras.
La historia está llena de grandes revelaciones, la mayoría incluyen un golpe por objeto contundente, una caída, una llama ardiendo o como poco un halo luminoso y en general suelen ser episodios algo dramáticos. Nosotros no pasaremos a formar parte de este selecto grupo, y sin embargo tuvimos nuestra pequeña revelación, una que nos hizo cambiar de dirección.
Antes de llegar aquí y siguiendo las directrices marcadas en el briefing, todo nos enfocaba a desarrollar un e-commerce. Sin embargo, las entrevistas nos revelaron algo fundamental, y es la desconfianza que genera realizar una compra online de un producto de alto valor sin poder verlo antes físicamente. Todo un reto. Sin embargo, lo que verdaderamente nos hizo virar fue preguntarnos ¿Cuántas veces a lo largo de nuestra vida laboral vamos a poder elegir sin limitaciones el producto que desarrollamos?.
Desde el principio llevábamos en mente como producto secundario una app de domótica, que aportara un valor añadido a los usuarios que adquirieran Pocket Office permitiéndoles controlar su mueble a distancia, y este fue el momento en el cual se encumbró hasta el primer puesto y abandonamos la «aburrida» idea del e-commerce. Este cambio de producto no nos obligó a cambiar de perspectiva, todo el trabajo anterior nos llevó a este punto y todo lo que aprendimos nos sirvió para continuar avanzando.
MVP
El Producto Mínimo Viable debe constar de las características suficientes para satisfacer las necesidades básicas de sus usuarios. Estará listo para ser lanzado con mucha rapidez al mercado, lo cual permite poder testearlo en entorno real e iterar sobre él para mejorarlo. Este concepto está ligado a metodologías ágiles.
La técnica MoSCoW nos ayudó a definir nuestro MVP y las funcionalidades que contendría.
Definimos nuestro MVP basándonos en tres pilares, la pantalla principal sería el dashboard donde encontraríamos todas las funcionalidades a un solo click, mostrándose dichas acciones siempre en un segundo contexto.
Creamos un prototipo inicial con las pantallas definidas en el MVP y lo testeamos con varios usuarios, con estos datos rectificamos o eliminamos aquellas partes que nos habían indicado en el testeo que no aportaban nada o que simplemente no usarían.
Simplificamos nuestra app al desarrollo de cuatro funcionalidades básicas, por un lado la función de modo donde elegir el estado del mueble, si está activado y el mueble está abierto para que podamos trabajar en nuestro escritorio o bien si está recogido y no estamos en horario laboral. A su vez esta función nos permite crear horarios de apertura y cierre automáticos.
La segunda es la función de trabajo, que más adelante la renombramos como descansos, aquí configuramos diferentes períodos de descanso ya sea de modo recurrente o mediante un intervalo concreto, por ejemplo, Martina necesita hacer un descanso de diez minutos por cada hora de trabajo, o bien fija su descanso para comer de 13:30 a 14:30h. Esta función permite habilitar o deshabilitar las notificaciones, si le resultan molestas. Una opción interesante es la llamada «Full Focus» con la que podrás concentrarte sin ser interrumpido.
La tercera funcionalidad de nuestro MVP es la que trata la ergonomía o la higiene postural, en la cual nuestra silla muestra un mapa de calor donde recoge nuestras posturas más habituales, también nos ofrece una serie de consejos para ajustar nuestra silla de trabajo de forma adecuada y adoptar una buena higiene postural. Todos los datos recopilados se verían reflejados en métricas. Como en el caso anterior, permite habilitar o deshabilitar las notificaciones sonoras que te indicarían que estás sentado en una mala postura.
La última de todas las funcionalidades es la que permite la configuración de la luz, podemos escoger que la luz se ajuste de forma automática o manual, en el modo manual podremos configurar la intensidad, la temperatura y el color, también existe la posibilidad de escoger un modo predeterminado de iluminación o crear un modo nuevo con las características que desees.
Este fue el resultado del prototipo final de nuestro MVP:
Arquitectura de la información
Ya teníamos una idea bocetada de cómo iba a ser nuestra app, pero la siguiente duda a resolver era ¿Qué nos interesa que el usuario haga en la app? Y para ello necesitábamos entender cómo piensan los usuarios.
Empezamos por definir el naming y el primer nivel de navegación.
El punto álgido llegó con la creación de los diagramas de flujo donde analizamos en detalle todas las posibilidades de interacción y respuesta.
El último de los flujos que definimos fue un Customer Journey para ejemplificar un día laboral en la vida de un usuario de Pocket Office. Nuestro producto tiene ciertas peculiaridades con respecto a otras apps, y nos pareció útil mostrar la interacción de la app con el usuario.
El siguiente paso del proceso fue uno de los más emocionantes, diseñar los wireframes. Un wireframe es un esqueleto del diseño, se representa en escala de grises sin detenerse en el aspecto visual, su nivel de fidelidad es realmente bajo pero sirve para aterrizar el concepto definiendo la estructura y componentes básicos del diseño.
Comenzamos a diseñar
Todo diseñador tiene sus estrategias, sus trucos y sus preferencias a la hora de afrontar un diseño. Sin embargo, en el abc de cualquier manual de diseño al uso hay varios primeros pasos inexcusables. Uno de ellos es «analiza que hace la competencia», y otro «crea un moodboard».
El moodboard es una técnica creativa que consiste en componer un universo visual del proyecto que vamos a desarrollar, recopilaremos imágenes de diferentes elementos, como pueden ser colores, textos, texturas, patrones…cualquier cosa que se te ocurra será bienvenida siempre que marque esa línea que seguirás cuando comiences a definir tu diseño.
Teníamos muy claro que nuestra app debía reflejar tecnología, IA (inteligencia artificial), algoritmos, debía tener un punto futurista. Queríamos colores planos, nada de degradados, sin texturas, colores oscuros mayoritariamente con un tono claro de acento, algo que simulara la luz de un led. Una tipografía sin serifa, fácil de leer, nuestra app tendría poco texto y sería muy visual. Nos pedía ilustraciones en lugar de imágenes.
Así fue la evolución del look & feel de nuestro dashboard hasta que encontramos la combinación perfecta. Nuestro objetivo era que la app no tuviera una interfaz pesada visualmente, queríamos que resultara muy cómoda y por eso optamos por un fondo oscuro y pocos elementos de texto o resaltados.
Design System
Ya teníamos claro el look & feel de nuestra app, ahora debíamos documentarlo de forma apropiada, necesitábamos crear nuestro Sistema de Diseño.
Elegimos una tipografía sin serifa: Roobert, con una sola tipo y combinando los pesos regular y bold sería suficiente para dar jerarquía a los textos.
La paleta de colores constaba de una serie principal llamada «Brand» que comenzaba con nuestro blanco acabando en un tono negro pasando por una amplia gama de morados que sustentaban la base de color de nuestra app.
Un tono amarillo de acento para dar mayor visibilidad a ciertas funcionalidades, como algún botón o los controles del dashboard. Recordemos esa luz led de la que os hablaba antes, es esta.
Y por último, un tono warning para los posibles mensajes de error.
Prototipo interactivo
Desarrollamos más de 70 componentes para realizar el prototipo… repito ¡más de 70! Pero el resultado fue tan satisfactorio, que mereció la pena.
Nuestra app ya estaba componentizada por completo, solo nos quedaba crear las interacciones para lanzarla en manos de los usuarios y que pudieran testearla y darnos su tan necesaria opinión.
User testing
Y ahora sí, estábamos a un paso de la meta. Había llegado el momento de la verdad, el testeo con usuarios era la prueba de fuego definitiva para comprobar si habíamos realizado un buen trabajo. Necesitábamos saber si la app se entendía, era funcional y útil, si los usuarios encontraban lo que buscaban de forma intuitiva y rápida o si por el contrario surgían problemas que nosotros no habíamos detectado.
Utilizamos dos tipos de test, el no moderado mediante la herramienta Maze y el moderado utilizando Lookback. Ambos métodos aportaron información de valor sobre nuestra app, pero sin duda fue gracias a Lookback donde recogimos la mayor cantidad de información útil, el poder ver a tiempo real como el usuario realizaba una serie de tareas que le habíamos encomendado mientras nos relataba en voz alta sus pensamientos y opiniones, las dificultades que iba encontrando o sus primeras impresiones, fue absolutamente imprescindible para nosotros. Gracias a este testeo pudimos pulir y dar brillo al proyecto.
¡Lo habíamos conseguido! nuestra app estaba acabada, tras varios meses llenos de esfuerzo e ilusión habíamos logrado materializar una idea en un prototipo real. Si quieres probar el prototipo de Pocket Office, pincha aquí.
Agradecimientos
Me gustaría darle las gracias a todos los que han apoyado y colaborado para que este proyecto saliera adelante, en especial al resto de mis compañeros con los que formé equipo: María Albillos, Alejandro Duque y Laura Díez.
Les dedico una mención especial y llena de cariño a todos los mentores que nos acompañaron en el proceso de aprendizaje, sin olvidar a UXER School que nos guio durante todo el camino dándonos ese primer empujón que nos hizo saltar y zambullirnos de lleno en el diseño UX/UI.
