Battle APPgainst Time
Cómo desarrollamos “TrenLab Quiz” y lanzamos justo a tiempo para el South Summit 😎
En este post queremos compartir nuestro proceso de trabajo y los aprendizajes tras lanzar un producto con un deadline muy ajustado para una empresa bajo la supervisión de Wayra y Renfe (sin presiones 😅)
But first: ¿quiénes somos?
Carlos Hernández y yo somos Commit Sans, un estudio de desarrollo integral de productos digitales.
¿Por qué integral? Porque no solo desarrollamos webs y apps (y cosas tan chulas como Community Tools): también ayudamos a nuestros clientes con su estrategia digital, marketing y analytics, UX, UI y hasta algo de branding e ilustración con nuestrxs colaboradorxs.
Por qué hemos hecho un juego para TrenLab
A mediados de agosto Wayra nos contrató para un proyecto un tanto distinto a los que solemos hacer.
TrenLab –la aceleradora de Renfe gestionada por Wayra– iba a montar un booth en el South Summit, y habían tenido una idea muy chula para que la gente se acercase: un trivia con preguntas sobre emprendimiento e innovación.
Nos llamó mucho la atención la oportunidad de hacer un juego, ya que es algo que hace tiempo que teníamos ganas de hacer, y aunque hemos estado muy liados montando Community Tools, con esta frase nos ganaron inmediatamente:
“Tenéis total libertad creativa”
Así que hicimos hueco en el calendario para darle caña y nos pusimos manos a la obra.
El kickoff
Lo primero que hicimos fue tener una llamada (una cól, como dicen ahora los chavales) con Luis Murrieta e Inês Oliveira Ribeiro, que fueron quienes tuvieron la idea, para entender bien su visión del proyecto, y poderla plasmar en el diseño. En la llamada también apareció por sorpresa Carlos Ruisanchez, un gran amigo que ahora está en Wayra, para aportar también muchísimas ideas al proyecto.
Inmediatamente después, empezamos a pintar en nuestra querida pizarra negra qué pinta tenía el producto en distintas superficies, y a estudiar cómo lo hacen otros juegos. Después, diseñamos en Figma el flujo de interacción con el producto y el flujo de una partida completa, desde que alguien llega al booth hasta que la termina.
En el booth habría una TV y flyers con la URL y un QR para que la gente pudiera acceder lo más rápido posible a una PWA montada con Vue.js + Vuetify sobre Firebase.
El equipo de Luis e Inês tenía un nivel de estrés importante de cara a la preparación del evento, así que en lugar de comunicar los updates a través de mail o llamadas (que suele ser un proceso bastante lento), decidimos hacer un pequeño vídeo explicando el primer flujo:
Mientras nos llegaba el feedback, empezamos a desarrollar una identidad visual mínima.
Antes de empezar un proyecto, siempre intentamos tener a mano todos los assets necesarios para diseñarlo, porque enseguida nos ponemos a maquetar; en este caso, TrenLab estaba trabajando en un rebranding, así que no teníamos mucho de lo que partir 😅
Generamos una paleta de colores usando el color corporativo de Renfe como base; normalmente uso Kuler, Colordot, Paletton, Material Color Tool y el plugin de Sketch Material Theme Editor para generar todos los shades de los colores elegidos.
Cuando migré mi workflow a Figma, me importé uno de los sistemas de componentes del Theme Editor y lo customicé un poquito para poder generar proyectos más eficientemente.
Diría que el import Sketch➡️ Figma todavía deja que desear… no se importan los colores ni los estilos de texto como estilos compartidos, lo que en un proyecto nuevo da relativamente igual, pero en un proyecto grandecito resulta bastante doloroso 😬
Mientras yo avanzaba el diseño, Carlos trabajaba en el sistema de añadir preguntas y validar respuestas correctas, y en una versión minimal del dashboard que entregaríamos al cliente para que pudieran crear y editar preguntas y programar partidas a las horas que quisieran.
En la primera versión, teníamos un flujo de login en el que se preguntaba a lxs jugadorxs por su job title y compañía. Decidimos implementar el login social con Firebase, como hemos hecho otras veces.
Por suerte, lo dejamos para el final; enseguida veréis por qué.
La iteración
En la recta final del proyecto, pasaron dos cosas: la primera, que TrenLab terminó su rebranding y nos envió un manual de marca actualizado que especificaba sobre qué colores usar su identidad, así que “migramos” todo a esto:
En esta fase, ya no trabajábamos sobre el Figma; nos coordinábamos usando GitHub porque el front estaba a punto de caramelo.
La segunda, que una corporación con el tamaño y la responsabilidad de Renfe tiene un proceso de validación legal bastante intensivo que requiere mucho más tiempo del que teníamos al empezar el proyecto.
Pero ¿qué tiene que ver lo legal con un trivia? Pues que para hacer login se necesita una política de privacidad, de uso de datos, de seguridad… dependiendo del contrato y del proyecto, también se puede necesitar un seguro de responsabilidad civil, profesional, etc.
En resumen: decidimos quitar el login y repensar el flujo para jugar como “usuario anónimo”.
Por suerte, todavía no lo habíamos implementado. Pero el leaderboard, tal y como lo habíamos planteado, sí dependía de perfiles “enriquecidos”:
Quedaba por terminar una cosa fundamental: las preguntas.
El cliente nos mandó un montón relacionadas con la industria, con innovación abierta y con su enterno, y también nos pidieron que escribiéramos algunas más sobre el ecosistema startupil (¡que estamos muy puestos!): incluimos desde aceleradoras como Tetuan Valley o SeedRocket, hasta conocidas startups como Spotahome y OnTruck, pasando por figuras tan emblemáticas como Steve Blank o Eric Ries.
La recta final
Días antes del South Summit, pisamos el acelerador y terminamos los últimos detalles. Nos dio tiempo hasta a dejar el dashboard bonito 🥰
Volvimos a mandar otro vídeo explicando cómo funcionaba el dashboard y cómo se vería el juego en las teles: un media query ocultaba la información relevante para un/a usuario/a “individual” (puntos, respuestas, historial de partidas…) y la sustituía por un contador de preguntas y un historial global.
Estuvimos probando el juego en las teles del Campus de Google –donde estamos basados desde 2015– y podemos decir que es el QA más divertido que hemos hecho hasta la fecha 😂
El estreno
El miércoles nos levantamos prontito para ir al South Summit a ver a la gente jugar en directo:
A unas 40-50 personas/partida, parece que la acogida no fue mala 😁
La magia del directo
Nos sorprendió que, a pesar de haber hecho QA intensivamente, los móviles de la gente y la tele tenían un delay de unos 3 segundos, lo que ayudó a lxs participantes más espabilaos a ganar algunos puntos extra esperando a ver las respuestas correctas en la pantalla…
Por suerte, Carlos estaba allí con su SLIMBOOK, listo para cambiar la interfaz y hacer un despliegue en real time para ponérselo un poquito más difícil 🤓
…y comieron perdices
Aquí tenéis la foto de la ganadora, emocionada al llevarse dos billetes de AVE gratis a donde ella quiera 🤩
¿Qué hemos aprendido?
En 2015 hicimos un software similar para gamificar un evento de Google. Cada actividad en la que participases te desbloqueaba un badge.
Nos encargamos de crear el contenido, y resultó que todas las ilustraciones y el copy tenían que pasar por un third party que a su vez tenía que mandarlo a San Francisco para revisión.
En este proyecto, el pipeline era similar, pero con un deadline más ajustado. La diferencia esta vez ha sido que estábamos preparados para cualquier escenario. Tener un workflow lo más optimizado posible y saber ser flexible es clave para adaptarse a cambios inesperados.
En 2015 también nos encontramos con usuarixs espabilaos, y aunque en 2019 barajamos distintos use cases en los que lxs usuarixs podían hacer trampas, el delay con la TV fue totalmente inesperado.
Planificar es fundamental, y la experiencia ayuda mucho, pero lo que realmente marca la diferencia es la capacidad de adaptación.
Moraleja: ten un design system hiper atomizado, un código modular y sin chapuzas, gente con experiencia que sepa apagar fuegos sin quemarse demasiado, y solo tendrás que preocuparte de encontrar los proyectos que realmente te hagan saltar de la silla.
Si ya tienes a gente así en el equipo: ¡enhorabuena!
Si no, puedes escribirnos cuando quieras 😄
Créditos
TV Mockup — Mockup psd created by graphictwister — www.freepik.com
