Diseccionando el Design Sprint para HomeConnect

Manuel Serrano
8 min readJul 16, 2021

--

Una de las técnicas que más me llamaron de metodología de trabajo, desde que busqué información sobre UX/UI, es la llamada “Design sprint”. Desde que me enteré de esta metodología en la escuela Neoland, quise practicar esta forma de trabajo. Mención especial al libro de JAKE KNAPP, lo recoge y explica todo de una forma increíblemente fácil y legible. Durante cinco días hemos comprobado, en pequeños grupos de compañeros de trabajo, cómo es en acción el Design Sprint, lo barato que puede llegar a ser para un proyecto y lo rápido que es.

Design sprint, para ponernos un poco en contexto, es una metodología ágil que ha sido desarrollada por Google Ventures y que popularizó a nivel global Jake Knapp, sobre todo a partir de esta mítica conversación a tres con Eric Ries (The Lean Startup) y Tim Brown, (CEO of IDEO) del año 2014.

Si tuviese que definirla rápido, y siguiendo lo que pude sacar gracias al libro de Knapp, podríamos decir que el Design Sprint es el Design Thinking en modo hackathon.

Design Sprint y cómo mejorar el consumo eléctrico.

El reto elegido para este Design Sprint ha sido el consumo eléctrico y cómo mejorar la percepción del usuario. Desde el 1 de junio de 2021, todas tarifas de acceso 2.0 y 2.1 se han aunado en una sola, la 2.0TD. Esta tarifa cuenta con 3 precios de la energía y 2 de potencia.

Este fue nuestro punto de partida, donde tendríamos que ayudar a los usuarios a mejorar su consumo eléctrico ahora que estará regulado por diferentes horarios y que podría ser algo confuso para el usuario medio.

La premisa era:

¿Cómo hacer saber de manera sencilla qué esta consumiendo en su hogar y ayudar a reducir el consumo fácilmente?

Con estas premisas nos teníamos que reunir y buscar soluciones para todo esto. No teníamos barreras económicas, podíamos hacer cualquier tipo de propuesta, “por muy loca que pareciera” y la idea que peor pueda sonar, tal vez, sea la más acertada.

Día 1: Dia de preguntas y entendernos

Tras finalmente formar los grupos, empezamos a exponer diferentes preguntas sobre qué se podrá hacer para el usuario, tales como:

  • ¿Cuál es el precio real de la electricidad?
  • ¿Se podría saber el consumo en tiempo real de un electrodoméstico?
  • ¿Ves forma de apagar un electrodoméstico a una hora concreta o pasado un voltaje usado concreto?

Gracias a esas preguntas que nos hicimos tocó ir al siguiente paso. En esta ocasión tuvimos que convertir las Sprint Questions en preguntas que llevasen a una solución (How Might We).

  • ¿Cómo conseguir añadir aparatos de fuera de nuestra app?
  • ¿Cómo podríamos hacer que el usuario conozca su gasto energético en tiempo real?
  • ¿Cómo conseguir que aparezca las horas de uso óptimas?

Para que la idea tenga una aplicación real, siempre deberá tenerse en cuenta el público o los usuarios a los que va dirigida. Para ello, fijamos nuestro punto de mira en un proto-persona que creamos. Después, determinamos un camino o historia donde pudiese servir de ayuda nuestro futuro producto.

Día 2: Ideación

El segundo día era el momento de la creatividad y de plasmarlo en el papel.

¿Y cómo empezamos? No hay mejor manera de empezar que empapándose de inspiración. Para ello, buscamos diferentes diseños de webs y apps que nos pudieran orientar sobre qué funcionalidades tendría nuestro prototipo en lugares como dribbble.

Tras tener claro las ideas era la hora de dibujar.

Para definir cada vez más la idea, realizamos diferentes procesos:

  1. Tomar notas: Para ello es necesario volver a las Spring Questions y HMW, y así extraer todas las ideas posibles.
  2. Recoger ideas: De forma individual, realizaremos unos bocetos de baja fidelidad donde se plasmen algunas ideas iniciales.
  3. Crazy 8: Doblando un folio en ocho partes, esbozamos una pantalla o funcionalidad en cada sección. Para cada dibujo contamos con 1 minuto, por lo que es una auténtica locura.
  4. Boceto final/Wireframe: Para terminar, esbozamos un prototipo a baja fidelidad donde se refleje la identidad de la idea.
Crazy 8

Día 3: Decisión

Cada uno de los compañeros preparó su propuesta de wireframes del mismo tema pero con diferentes enfoques, también llamado Museo del Arte.

Una vez planteadas era hora de votar las mejores propuestas que posteriormente nos pondríamos a crear.

Prototipado personal con wireframes
Prototipado de idea ganadora

Tras la elección tocaba crear por último un storytelling explicando el uso de esta App de casa. Nos dedicamos a situar al user Persona en la trama propuesta.

Storytelling creado para el Design Sprint

Día 4: Prototipar

Teníamos claro ya lo que había que crear. A partir de aquí ya tocaba el trabajo individual y crear, respetando la idea ganadora, un prototipado para hacer que un usuario, tuviera una casa inteligente.

En él teníamos que incluir que al conectar un aparato a un electrodoméstico. Este te avisara de los kv que generaba y en qué zona de la casa estaba. Que fuera intuitivo para el usuario y supiera cuándo conectar ciertos aparatos para ahorrar luz y por último que los aparatos se pudieran desconectar y conectar de forma sencilla e inteligente.

Hora de crear los procesos y pantallas. Utilizando FIGMA, realicé de la forma más realista posible lo que sería las pantallas y algunas animaciones para estas pantallas.

Pantallas creadas para los procesos

Para el prototipado de la app de casa, se creó en un formato “tablet” para la pared. Con el reto de que las pantallas fueran lo más rápidas en intuitivas, opté por:

1️⃣ Dos colores, Un color verde para poder identificar correctamente los aparatos conectados y un color morado que apareciera de forma “corporativa” tanto en el menú como en algunos en el logo.

2️⃣ Pantalla de inicio rápido, así de una manera directa poder conectar o desconectar los aparatos tecnológicos más usados.

3️⃣ Pantalla de inicio, con hora y zona de gasto (Baja, media, alta).

Prototipado App en Figma

Para rematar el prototipado se crearon algunas animaciones para el cambio de color en la zona de gasto o los toggles para conectar o desconectar rápidamente.

Pantallas de la App

A continuación explicaré las iteraciones creadas para HomeConect.

  • Inicio
Pantalla de inicio

La intención es que en la pantalla de inicio apareciera el máximo de detalle posible de forma rápida y sencilla. En ella podemos conectar o desconectar con un solo click algún electrodoméstico conectado en casa. A su vez te avisa en qué zona horaria estás (roja, amarilla o verde). Y lo que se está consumiendo por hora.

Incluimos un Mini Side Bar Menú, en las que aparecen las secciones de la casa más comunes; Cocina, dormitorios, baños…

  • Secciones de la casa.
Pantalla cocina HomeConect

Al entrar en una de las secciones, se nos abrirá una lista de aparatos tecnológicos conectados a la casa, el consumo medio y si están activados o no. Como pasaba en la pantalla principal, aquí se puede conectar y desconectar cada aparato. La diferencia es que aquí tendrá una opción de editar o donde poder borrarlo. Junto a ello un botón para añadir otro producto de forma rápida. (Te lanzaría a la pantalla de WIFI).

  • Pantalla WIFI (Conectar)

Por último estas serían las tres pantallas del proceso y objetivo principal para el Design Sprint. En ellas muestran el proceso desde que conectamos con un aparato (Izquierda), el proceso donde la app busca y reconoce el nuevo aparato (centro) y por último cómo nombrar, colocar la zona de la casa y añadirlo.

Para que estas pantallas de Wifi funcionen, es necesario antes tener conectado nuestro aparato a una fuente de alimentación inteligente y pulsar el botón de WIFI, así automáticamente la aplicación detectará el producto y autocompletará los campos (pantalla del centro).

Día 5: Testeo

Tocaba ver si estos 4 días de trabajo podrían funcionar con los usuarios. Por lo tanto el siguiente paso fue la creación de pruebas y preguntas de usabilidad de la app, la plataforma elegida fue Maze. En el podemos ver los mapas de calor y si el usuario tiene algún “missclick”.

Para el testeo conté con 10 personas de sectores diferentes. En ellos pude recabar toda la información necesaria para conseguir un feedback adecuado y ver si era funcional o no el proyecto.

Pantallas con mapas de calor sobre testeo

Tras el testeo pude recoger

  • Facilidad de uso.
  • La estética les gustaba y se veía elegante.
  • Los iconos se podrían hacer aún más minimalistas.

Iteración

Tras el Feedback recogido, me dispuse a cambiar algunos de los iconos que presentaban equivocación para actualizarlo en Figma.

Pantalla con cambio de iconos

Conclusiones

Design Sprint ha sido una de las metodologías más intensas e interesantes que he conocido en mi carrera hasta ahora. Ayuda a trabajar en equipo y eliminar egos dentro del grupo.

Consigue hacer que veas las cosas desde otra perspectiva y que tu trabajo sea rápido y productivo. No se siente que pierdes el tiempo en ninguno de los 5 días de trabajo.

--

--