Cómo se hizo April Zero
Parte 1
Este es el primer capítulo de cómo diseñé la web original de April Zero. Voy a compartir algunos bocetos, conceptos descartados y prototipos viejos para explicar cómo fue evolucionando por el camino.
Si te interesa usarlo tú mismo, ya puedes registrarte en Gyroscope.
Marzo de 2014: la inspiración
A moverse
Estaba a punto de irme a París con mi compañero de piso. Es un fotógrafo apasionado y, cuando vamos a algún sitio, suele montar un minisitio sobre el viaje, lleno de fotos y videos a pantalla completa. El anterior fue sobre nuestra aventura en Japón.
Siempre era divertido volver unos meses después y ver la crónica detallada de lo que hicimos, con fotos y videos preciosos de cada paso del camino.
Para ese viaje decidimos usar la app Moves para llevar un registro de todos los sitios donde estuvimos. La instalé en la fila de seguridad del SFO, sin imaginar que era el principio de lo que pronto se volvería una obsesión.
Puede que algunos hayan probado Moves o apps parecidas y hayan tenido problemas con la batería. Durante mucho tiempo, cualquier app basada en GPS o movimiento (Nike, Find My Friends, Highlight, etc.) era horrible porque te vaciaba la batería al instante. Y entonces salió el iPhone 5S. Pero con el rumor del futuro iWatch acaparándolo todo, el lanzamiento revolucionario del procesador M7 de Apple pasó desapercibido para casi todos, yo incluido.
De pronto se podían hacer un montón de cosas con un impacto mínimo en la batería. De pronto había muchísimo contenido rico disponible en tiempo real. De pronto toda una generación de dispositivos de fitness quedó obsoleta. Los problemas de hardware pasaron a ser simples problemas de software. Moves fue de los pocos que de verdad lo aprovechó.
Latidos
Más o menos por esa época alguien me habló de una app llamada Cardiio, que podía leer tu ritmo cardíaco con la cámara del iPhone. La descargué sobre todo porque no me creía que funcionara. La verdad es que me daba bastante igual con qué frecuencia latía mi corazón.
Pero después de unos días jugando con ella estaba obsesionado. Lo genial era que solo tardaba unos 15 segundos en darte una medición, quizá 30 si cuentas sacar el teléfono del bolsillo, desbloquearlo y abrir la app.
Lo que me enganchó de verdad fue enterarme de que los atletas bien entrenados suelen tener el ritmo cardíaco en reposo más bajo. Menos era mejor. Era una forma muy fácil de tener una medida objetiva de mi estado. Y era divertido.
Una semana noté que mi ritmo cardíaco estaba anormalmente alto, cerca de 80 o 90 cuando solía andar por 60. ¿Estaba estresado por algo? Salí a correr un buen rato y lo volví a mirar al día siguiente. De vuelta a 60. Fascinante…
Era como haberme instalado New Relic en el cuerpo. Estaba acostumbrado a mirar gráficas y arreglar cosas. Solo que esta vez, en vez de un servidor, era mi cuerpo.
Correr por tu vida
Mi hobby anterior era la escalada en interiores. Vivía a unas calles de Mission Cliffs, y hacer boulder allí se volvió mi rutina de cada noche. Pero es un deporte bastante exigente y pronto empecé con varias lesiones de hombro.
Así que me puse a correr. Estaba saliendo de una ruptura grande y fue una gran forma de sobrellevarlo. Había usado la app de Nike de vez en cuando, una milla aquí y allá, pero sin acumular kilometraje serio. La app con GPS me mataba la batería, así que no era muy agradable de usar.
Pero ahora, con el M7, mis rodillas iban a fallar mucho antes que mi teléfono. Los relojes elegantes de Garmin o las Fitbit que estaba pensando comprarme ya no hacían falta. Es fácil poner excusas sobre la herramienta que te falta, pero todo lo que necesitaba ya lo tenía en el bolsillo.
Publicar las fotos de mis carreras en Instagram me mantuvo motivado y corriendo con constancia desde el principio. Tenían un sistema fácil para superponer el mapa, la distancia y el logo de Nike sobre una foto. Si la subías con el hashtag #nikeplus, seguro te llegaban muchos likes de otros corredores de todo el mundo.
Combinaba tres de mis pasiones: correr, la fotografía y llamar la atención. Era brillante. Era un gran momento para ser corredor: entre Runkeeper, Strava, Nike, etc. había muchísimas herramientas y comunidades buenas.
Ver todos mis datos de cada carrera me daba algo que optimizar y en lo que mejorar. Ahora podía ponerme retos y metas.
Pero casi nada más tenía un ecosistema parecido. Yo quería este tipo de información y motivación para cada parte de mi vida, no solo para correr. Esto no era más que analítica. Yo ya había construido analítica antes. Era hora de empezar a hacer bocetos.
Análisis de sangre
Se me había pasado la revisión médica anual. Me hice todas las pruebas estándar y además pedí que me mandaran por correo una copia de mis análisis de sangre para tenerlos yo.
La semana siguiente recibí un PDF muy completo. No solo tenía mis valores actuales, sino también una explicación de los rangos ideales para cada uno y un análisis de mi situación. Me sorprendió ver mi vitamina D tan baja, y algunas otras cosas fuera de los rangos ideales. Eran datos increíbles, pero atrapados en un PDF de texto en mi correo. Merecían mucho más.
Desde entonces me hago análisis de sangre cada mes y sigo de cerca los cambios. Ponerlos en un panel sería un recordatorio constante de qué tengo que intentar mejorar. Confiaba en mi teoría de que con solo medir las cosas podría mejorarlas. Y si eso no funcionaba, al menos lo sabría y podría esforzarme más.
Grasa corporal
En El cuerpo perfecto en 4 horas, Tim Ferriss habla de varios aparatos y pruebas que usó para medirse. Uno era un ecógrafo portátil por USB para medir con precisión el porcentaje de grasa corporal. Yo ya me pesaba, pero conocer el porcentaje de grasa me daría un entendimiento mucho mejor de qué estaba cambiando.
El proceso del ultrasonido es algo incómodo, lleva unos minutos y hay que usar un gel especial, pero los datos que daba eran muy precisos y fascinantes de ver cada día. Podías ver literalmente dentro de tu propio cuerpo, hasta cuántos milímetros de grasa, músculo y hueso tenías debajo.
Veía cómo la grasa corporal se disparaba los fines de semana después de días de comilona épica, y bajaba aún más la semana siguiente. Los datos que obtenía eran geniales, pero la interfaz y la presentación de la app, no.
Quería ver cómo se relacionaba esto con todo lo demás que estaba haciendo.
También creía en la idea de que solo por medir algo empiezas a mejorarlo. Conocer tu estado actual y tu ritmo de cambio te deja tomar mejores decisiones, iterar rápido y entender qué funciona y qué no. Sin instrumentar todo lo que te importa, básicamente vuelas a ciegas.
Me di cuenta de que necesitaba encontrar el equilibrio entre mediciones fáciles y frecuentes, como el ritmo cardíaco y el peso, y datos más molestos pero reveladores, como mi grasa corporal y mis análisis de sangre. Juntos formarían un panel muy bueno y contarían una historia completa. También apuesto por que la tecnología mejorará rápido, sobre todo cuando esto se vuelva más popular y suba la demanda. Si sale la versión de microchip implantado en Kickstarter, o si Apple empieza a medirlo con el Apple Watch, solo tendría que cambiar unas líneas de código.
Abril de 2014: los primeros borradores
Una cuadrícula de datos
Me gustaba la idea y la simplicidad de este diseño de cápsulas, con una cuadrícula limpia y elementos modulares que podría mejorar después. Casi todos se podían automatizar al 100% con APIs, y los manuales, como mi última escalada, solo llevarían unos minutos.
Aunque me diera pereza o estuviera muy ocupado, el sitio no se quedaría rancio. ¡Seguiría corriendo, escuchando música o subiendo fotos a Instagram!
La importancia de bocetar
Paso la mayor parte de las primeras etapas de un proyecto solo bocetando y pensando. Ya sea creando diseños o escribiendo código, dibujar primero me deja pensar con más claridad.
Trabajar con bocetos en papel es potente porque te deja ir rápido. Seguramente sea el único medio en el que puedes registrar ideas tan rápido como aparecen. Te permite ponerte delante opciones visuales en vez de solo cosas en la cabeza, y tomar decisiones de diseño mejor fundadas. Muchas veces poner dos opciones en papel, aunque sea de la forma más tosca, deja obvio cuál es la mejor.
Tableta Wacom
Después del papel, esbocé rápido esta idea en Photoshop para asegurarme de que seguía teniendo sentido en digital. Muchos diseños se ven bien en papel como una miniatura, pero luego no funcionan al digitalizarlos. El estilo del boceto tiene algo que hace que hasta una mala idea parezca elegante y refinada. Cuando trabajas en pizarra o papel es muy fácil hacer trampa con la escala y meter texto donde no cabe, o que los elementos ocupen mucho más espacio del que en realidad llenan.
A veces me gusta mantener un estilo de boceto en las primeras maquetas. Te deja seguir pensando como si estuvieras en papel y trabajar en una variable a la vez. Como la composición y el contenido acababan de quedar claros, ahora podía añadir color y verificar que el contraste y la escala seguían teniendo sentido. La textura, la tipografía, las imágenes de fondo y otros detalles que llevan tiempo se resolverían más adelante si esto salía adelante.
Esta iteración parecía bastante decente, así que se la mandé a algunos amigos. Se emocionaron bastante, así que seguí en Photoshop haciendo maquetas más realistas. Esto tenía potencial.
Pasé unos días más puliendo detalles y probando variaciones. Estaba muy entusiasmado con el contenido y con la arquitectura de la información, que siempre es lo más importante, pero el estilo y la composición no me quitaban el aliento cada vez que los miraba.
Era un diseño sólido y usable, pero no el mejor del mundo.
La guía de estilo de April Zero
Esto era el futuro. La posibilidad de analizar y compartir mágicamente todo sobre ti mismo es casi tan fantástica como volar o la electricidad. Quería que se sintiera tan futurista como en realidad era.
Cuando construyo una marca, suelo armar un moodboard para prototipar rápido varios estilos y descubrir qué elementos hacen falta para transmitir esa sensación. Las piezas pueden ser cualquier cosa: clips de películas, fotos, vallas publicitarias, capturas de otras apps, etc. Muchas veces saco inspiración del motion design y de la publicidad, que tienen buenos presupuestos y artistas increíbles detrás. También hay mucho material bueno en Dribbble y Behance.
Hay muchos ejemplos de interfaces holográficas geniales y de cosas que se sienten futuristas, pero yo necesitaba acotar a un subconjunto más concreto. Como con casi todas las decisiones de mi vida, me pregunté: ¿qué haría Tony Stark?
Algunos elementos que se repetían eran: capas holográficas, círculos concéntricos, perspectiva isométrica y líneas finas. Meter todo eso en un producto sin sacrificar la usabilidad iba a ser difícil, pero era un gran punto de partida.
Ahora que tenía acotados el contenido y el estilo, tocaba volver a la mesa de dibujo…
Versión 2
Quería mantener la modularidad y la arquitectura de antes, pero sin una composición tan aburrida. Decidí dividirlo todo en “miniapps” que presentaran los datos en torno a temas concretos. Las dos primeras se podían llamar “Sport” y “Explorer”.
Acotar cada sección a un solo contexto permitiría que se formara una historia coherente, en vez de tirarle al visitante un montón de datos y números.
Y en el futuro podría lanzar secciones nuevas sin tener que rehacer las que ya existían. Algunos ejemplos de otras cosas que me hacían ilusión:
“Aviación”: registrar cada vuelo mientras sacaba mi licencia de piloto
“Bajo el agua”: registrar inmersiones mientras me certificaba en buceo
“Digital”: lo que hacía cuando estaba en el ordenador (diseño, código, screencasts, etc.)
“Finanzas” : hábitos de gasto, barra de progreso hacia ser multimillonario
“Amor”: cuantificar mi vida amorosa, etc.
Puede que alguna cosa necesitara contraseña…
Diseñar Sport
La sección Sport tendría todo lo relacionado con el estado físico y lo médico, mostrando mis valores de sangre actuales y la mejora de rendimiento con el tiempo.
La primera iteración era un feed con distintos tipos de actividad. Me gustaba mucho cómo se veían los valores de sangre, pero sentía que el feed costaba demasiado de leer de un vistazo. Solo veía los últimos eventos, y eso no daba una buena visión de conjunto.
Quería poder ver un año de datos de un vistazo. Para eso necesitaba más datos agregados y hacerlo todo más compacto.
Era una composición mejor, pero no se sentía muy avanzada. Ese problema se podía resolver mientras construía, añadiendo animaciones y detalles sutiles.
Esta era la versión estática ya programada. Las columnas laterales más oscuras le dan algo más de contraste y la atan a la portada al desplazar la columna de contenido.
Quería que todo fuera explorable e interactivo. Poner el cursor encima de algo te daría más detalles, porque había muchos datos por debajo que se podían revelar.
El spinner
Un patrón que había notado mirando la analítica de sitios anteriores es que la mayoría de la gente entra a una o dos páginas y se va. Aunque haya todo un mundo de buen contenido, casi ningún visitante llega a él. Hacer clic en algo es todo un compromiso, y explorar cada sección a fondo sencillamente no pasa.
Quería crear un tipo nuevo de interfaz, donde al principio no tuvieras que comprometerte a hacer clic en nada y pudieras simplemente mover el ratón y explorar, con microinteracciones ligeras, fáciles y divertidas.
Y así nació este spinner. Quería crear algo tan divertido de usar y tan revolucionario como el iPod original.
También permitía alejarse de las composiciones rectangulares y aburridas. El moodboard estaba lleno de elementos circulares en movimiento, y esto dejaba que esos detalles existieran de forma natural en la interfaz.
Cuando tuve una maqueta que me entusiasmaba lo suficiente, ¡tocaba empezar a programar! Ya tenía una base básica en Jekyll de un experimento de blog anterior. Creé una rama nueva y me puse a programar el spinner.
Primeros prototipos en código
Este es un buen ejemplo de una situación en la que es muy útil diseñar y programar el mismo problema. Que la página se viera bien era importante, pero cómo se sentía y cómo se movía era igual de importante de resolver. Para eso monté un prototipo básico con algo de Javascript ligero, corriendo dentro del contenedor de Jekyll que originalmente iba a usar para mi blog.
La primera versión no impresionaba mucho. La versión 1 (arriba) era muy básica. Hacer que todo girara y encajara bien tenía su truco, así que usé círculos de colores llamativos mientras lo construía y lo depuraba.
La versión 3 (abajo) añadió los anillos y javascript para más interacciones, como girar el círculo al pasar el cursor por el texto.
La versión 5 añadió una animación de entrada, que fue más difícil de lo que esperaba porque intentaba correr transiciones sobre elementos que también estaban animándose.
La versión 8 trajo una animación de salida con ajustes distintos a los de la entrada, para que hacer clic en algo se sintiera más gratificante.
Cada iteración arreglaba un problema concreto o añadía una función que lo mejoraba un poco. Me sorprendió gratamente lo divertido que se estaba volviendo de usar. Confirmaba mi idea de que aquí había algo que merecía tiempo. Con algunas mejoras y detalles de diseño más, esto podía ser una gran experiencia.
Así que seguí trabajando en ello, pasando horas al día recargando la página y tratando de hacer las animaciones más suaves, más interesantes, mejor sincronizadas.
Lo estaba disfrutando, pero necesitaba más validación para asegurarme de que no había problemas de diseño. En esa época trabajaba desde varias cafeterías, así que recluté a algunos desconocidos para que probaran el sitio.
No les daba más instrucción que “prueba a usar esto” y les pasaba mi portátil, mirando de cerca lo que hacían. Detecté algunos problemas, sobre todo gente que hacía clic en partes de la interfaz que no eran enlaces. Amplié rápido las áreas de enlace para incluir las zonas donde solían pinchar, y añadí efectos al pasar el cursor que reforzaran que eran clicables. Pronto mis voluntarios ya no tenían ningún problema para navegar ni entender el sitio.
Resultó ser tan intuitivo como esperaba. Y más importante: parecían estar disfrutando de verdad al pasar el cursor y hacer clic en las secciones, algo sorprendidos y entusiasmados con todas las animaciones que iban disparando.
Contento con el diseño central de la portada, tocaba enfrentarme a la parte del sitio que más miedo me daba.
Explorer
Un montón de problemas técnicos estaban a punto de entrar en escena. Las secciones anteriores eran bastante fáciles de bocetar y maquetar en Photoshop con datos básicos, pero para esta iba a necesitar contenido real. Saqué una clave de API y empecé a importar mis datos de Moves.
Después de unas semanas en San Francisco, me di cuenta de que necesitaba un conjunto de datos más variado. Así que agarré mi Macbook y mi pasaporte y me fui a Nueva York a investigar. Necesitaba meterme de verdad en la mentalidad de explorar y aventurarse si quería transmitir esa sensación en esta sección.
Ahora tenía que averiguar cómo mostrar vuelos, cambios de zona horaria, carreras por Central Park y la cuenta de cuánta pizza me había comido. Resultó ser muy bueno haber ido, porque enseguida me topé con un montón de problemas en cómo Moves manejaba las zonas horarias que tenía que tener en cuenta. Si me hubiera quedado en San Francisco confiando en los datos viejos de París para probar lo internacional, todo habría implosionado la siguiente vez que cruzara zonas horarias.
En el vuelo de vuelta empecé a procesar todos los datos de Moves y a colocarlos en una línea de tiempo básica. Era un lío bastante ilegible, ¡pero funcionaba con los datos reales de mi viaje!
Una de las decisiones de diseño más grandes fue poner las líneas de tiempo en horizontal, con los días apilados uno encima de otro.
Casi todos los diseños parecidos las ponían en vertical, evitando así el problema del texto superpuesto que yo tenía. Pero yo creía que poder ver todos los días comparados entre sí era esencial. Quería que cada día fuera un eje capaz de contener muchos datos ricos más adelante. El problema de mostrar las etiquetas tendría que resolverlo de otra forma.
Empecé a jugar con un algoritmo que escalonara bien las etiquetas en 4 niveles. Analizaba la diferencia de tiempo entre lugares y se aseguraba de que siempre hubiera espacio suficiente para el texto.
La versión 9 estaba sobre fondo claro, pero en la versión 10 me pasé a fondo oscuro para que los lugares resaltaran más y para que encajara con el estilo del resto del sitio.
Decidí mostrar de entrada solo los lugares importantes, y que al pasar el cursor aparecieran más detalles del día y el texto más pequeño. También bajé el protagonismo de los sitios recurrentes, como casa o los hoteles, porque no eran tan interesantes como otros aunque acumularan mucho más tiempo.
Y un día decidí trabajar al aire libre, en el parque. Al fin y al cabo, la sección se llamaba Explorer.
Y… no podía leer nada.
La versión original con fondo blanco funcionaba bien, pero la nueva con el esquema oscuro mejorado era totalmente inservible bajo el sol.
Por eso usar tu producto en su contexto es importantísimo. Cuanto más alejado estés, incluso de formas que parecen insignificantes, más probable es que algo te pille por sorpresa o que haya fallos de diseño. Por eso me gusta trabajar en aviones, en cafeterías, boca abajo y de otras maneras que provocan miradas raras. Te abre la cabeza a otras perspectivas y saca a la luz problemas que si no pasarían desapercibidos.
Ahora tocaba decidir: ¿lo dejaba oscuro porque era lo que mejor se veía en interiores para el 95% de la gente, o tenía sentido rehacerlo todo en claro? Si me había pasado a mí, le podía pasar a otro y, más importante, me podía volver a pasar a mí.
A veces, cuando te atascas o te topas con un bache, hay que seguir y empujar, echándole horas al problema hasta resolverlo. En otros casos es mejor cambiar de marcha y entrar por otro lado. Hice una versión oscura (11) y una clara (12) para el archivo y decidí pasar a otros problemas.
Representar los viajes
La primera versión tenía los viajes y los lugares en la misma línea. Quería probar a hacerlo más intuitivo, representando el viaje de un punto a otro como saltos.
Estadísticas agregadas
Quería mantener el mapa del mundo arriba mostrando mi ubicación actual, pero también añadir estadísticas generales a la página, con un resumen rápido sin tener que revisar 30 líneas de tiempo. Decidí añadir otro nivel de estructura y dividirlo todo en meses. Cada mes tendría sus propias estadísticas y se podrían comparar entre sí.
Era fascinante ver cómo cambiaban mis hábitos de un mes a otro: algunos meses los pasaba viajando y en aeropuertos, otras veces escalaba mucho o pasaba casi todo el día en cafeterías. Los restaurantes italianos cayeron en picado en cuanto volví de Nueva York, reemplazados por burritos.
Hacerlo responsive
Cuando empecé a trabajar en la versión responsive, la cosa se torció. La línea de tiempo horizontal que funcionaba genial en escritorio no cabía en una pantalla pequeña. Tenía que ser vertical, pero no quería sacrificar la funcionalidad de todo el sitio solo por la implementación móvil. Empecé a refactorizar el código para que pudiera funcionar en las dos orientaciones y cambiar con suavidad al redimensionar la pantalla.
El código para tener una versión móvil aparte sin romper el escritorio ya funcionaba. Ahora podía empezar a diseñar para móvil desde cero, en vez de intentar embutir la versión grande en un espacio pequeño.
Me estaba cansando de jugar con los mismos datos de siempre. El diseño iba avanzando, pero seguía faltándole algo. Necesitaba un cambio de aires y una perspectiva nueva.
Estaba trabajando en una cafetería (Coffee Bar, el 6 de mayo) cuando me escribió un amigo.
Momento perfecto.