El nacimiento del Modo Oscuro: un viaje a la evolución de la aplicación Nubank

Escrito por Carla Demarchi, Eduardo Roder, Enzo Zuccolotto y Marina Brustello

En el mundo en constante evolución de las aplicaciones digitales, la función Modo Oscuro ha surgido como un punto de inflexión, mejorando la experiencia del usuario en varias plataformas. Una empresa que ha aprovechado con éxito el poder de esta característica es Nubank, un actor líder en el sector fintech. 

Este artículo te lleva en un viaje revelador, explorando cómo Nubank ha integrado de manera innovadora el Modo Oscuro en su aplicación, respondiendo a las demandas de los usuarios y estableciendo nuevos estándares en la industria. Desde la génesis de la idea hasta el proceso de desarrollo, la superación de desafíos y las reacciones de los usuarios, profundizamos en cada aspecto de este fascinante viaje. 

Si eres un entusiasta de la tecnología, un usuario de Nubank o alguien interesado en el diseño centrado en el usuario, esta inmersión profunda en la innovación del Modo Oscuro de Nubank ofrece información valiosa. Entonces, prepárate para iluminar tu comprensión del Modo Oscuro y descubre cómo Nubank está redefiniendo la experiencia del usuario en el mundo fintech.

La decisión de introducir el Modo Oscuro en la aplicación de Nubank estuvo lejos de ser arbitraria. Fue una maniobra calculada, impulsada por una fusión de las solicitudes de los clientes y las tendencias digitales predominantes. Curiosamente, a pesar de no ser un producto financiero, el clamor por esta característica fue notablemente alto entre la clientela de Nubank. Esta demanda, junto con la creciente popularidad del modo oscuro en la esfera digital, impulsó a Nubank a embarcarse en la aventura de crear esta función para su aplicación.

La creación del Modo Oscuro fue un proceso complejo que involucró múltiples etapas y equipos. El viaje comenzó con el equipo de diseño, que imaginó la estética del Modo Oscuro. La utilización de tokens del sistema de diseño fue fundamental en esta fase, ya que permitió al equipo delinear colores, tipografía y espacios que armonizarían con temas claros y oscuros.

Un token de diseño, para aquellos que no lo saben, es un valor único que representa un atributo visual o funcional específico utilizado en los sistemas de diseño para garantizar una implementación de diseño consistente y eficiente en diferentes plataformas y dispositivos.

Al mismo tiempo, el equipo de ingeniería estaba trabajando para transmutar estos diseños en una característica funcional. Una estrategia clave empleada durante esta fase fue el enfoque de «alternativa», que se utiliza cuando una pantalla determinada no está actualizada en la última versión de Nu Design System (es decir, los tokens no están disponibles para la versión actual, por lo tanto, la pantalla «no sabe» cómo cambiar los colores para el Modo Oscuro. 

Con este enfoque, en lugar de tener que actualizar más de 3 mil pantallas una por una y retrasar el lanzamiento de la función, pudimos entregarla más rápido.

Navegando a través de desafíos

El viaje no estuvo exento de obstáculos. El principal desafío fue la enorme magnitud de la tarea: adaptar las 3000 pantallas de la aplicación Nubank al Modo Oscuro. Esto requirió un enfoque meticuloso y un mecanismo de prueba sólido para garantizar la coherencia y la funcionalidad en todas las pantallas.

El principal beneficio de los tokens del sistema de diseño radica en su capacidad para producir experiencias de usuario consistentes y confiables. Estos tokens, al aportar uniformidad a las opciones de diseño, reducen la carga cognitiva del usuario, allanando el camino para una interfaz de usuario más instintiva y agradable. Además de esto, aceleran el diseño y el desarrollo, permitiendo a los equipos priorizar ideas novedosas y mejoras en el recorrido del usuario, en lugar de luchar con las irregularidades y repeticiones que pueden ocurrir durante el proceso de diseño.

Otro obstáculo importante fue la complejidad técnica que implica la implementación del Modo Oscuro. Esto requirió que el equipo desarrollara un mecanismo alternativo que permitiera a la aplicación cambiar al Modo Oscuro, garantizando un servicio ininterrumpido a los usuarios.

Una vez que se creó el Modo Oscuro, se sometió a rigurosas pruebas internas. Se examinó la funcionalidad de la característica y se identificaron y rectificaron los fallos. También se recopilaron comentarios de Nubankers y miembros de NuCommunity, lo que proporcionó información invaluable que ayudó a perfeccionar aún más el Modo Oscuro.

Check our job opportunies

Iteración, mejora y evaluación del éxito.

Los comentarios recibidos jugaron un papel fundamental en el proceso iterativo de mejorar el Modo Oscuro. Según los comentarios, se realizaron modificaciones significativas en el diseño y la funcionalidad de la característica. Por ejemplo, la apariencia de las pestañas de la aplicación en Modo Oscuro se ajustó para mejorar la visibilidad y la facilidad de uso.

La presentación del Modo Oscuro fue recibida con anticipación y entusiasmo. El éxito de la función se evaluó en función de los comentarios de los usuarios y los datos de uso. La respuesta positiva de los usuarios fue un claro indicador del éxito de la función.

Los comentarios de los usuarios después del lanzamiento fueron abrumadoramente positivos, y muchos usuarios apreciaron la nueva interfaz visualmente atractiva. El aspecto más gratificante del proceso de desarrollo fue presenciar el impacto positivo del Modo Oscuro en la experiencia del usuario. El proyecto también subrayó la importancia del diseño centrado en el usuario y el valor del desarrollo iterativo basado en los comentarios de los usuarios.

Consideraciones de diseño

Equilibrando estética y funcionalidad en el Modo Oscuro

La búsqueda del equilibrio impregnó todo el proyecto de diseño del Modo Oscuro. Un buen ejemplo fue la decisión de adoptar el negro puro como color de fondo. La intención era hacer que la experiencia de nuestra aplicación fuera lo más nativa posible, compatible con sistemas operativos populares como iOS y Android. Además, los dispositivos con pantallas OLED apagan la luz para obtener píxeles negros puros, lo que puede ayudar a conservar la batería.

Otro caso fue cuando optamos por una paleta de grises neutros, cuando podríamos haber elegido grises fríos o cálidos. Esta fue una decisión que habíamos tomado antes, con la revisión de nuestra base de Color, incluso en Modo Claro. Con el Modo Oscuro reforzamos la decisión con la intención de mantener un lienzo en blanco para que las experiencias de los productos destaquen, sin interferencia cromática en los neutros, como aparecen con mucha frecuencia en la interfaz.

Superar los desafíos de diseño en el modo oscuro

En las iteraciones iniciales del Modo Oscuro, la inversión de color hizo que las superficies que usaban el característico color púrpura de Nubank se volvieran claras (púrpura claro), con texto negro. Entendimos que esta combinación se distanciaba de nuestra marca, por lo que trabajamos para mantener el aspecto visual de Modo Claro en algunos contextos. Oscurecemos el violeta lo suficiente, reducimos un poco la saturación y mantuvimos los textos blancos encima de estas superficies, como en los botones.

Otro desafío relacionado fue el morado de la cuenta del PJ, que es más oscuro que el tradicional. También oscurecimos este violeta para el Modo Oscuro, pero en este caso necesitábamos resolver un problema de contraste, ya que este color no siempre aparecía lo suficiente en combinación con los tonos grises oscuros de la interfaz. Para solucionar esto, hicimos algunas iteraciones probando diferentes tasas de contraste hasta alcanzar un equilibrio entre estas necesidades.

Garantizar una mejor experiencia visual en entornos con poca luz

Trabajamos para garantizar que incluso con la reducción del brillo, el Modo Oscuro siga cumpliendo con las tasas de contraste mínimas, que se ajustaron para garantizar una buena experiencia. Además, ajustamos los colores de los textos, para que queden más claros sobre el fondo negro, evitando un contraste exagerado, así como la reducción de la saturación de los colores, para que no brillen demasiado en el contexto oscuro y generen molestias en la vista.

Consideraciones sobre la fatiga visual y la accesibilidad

Aunque el Modo Oscuro no es una solución enfocada a la accesibilidad, sí hay una mejora considerable en relación al uso del modo por parte de personas con discapacidad visual, como baja visión y fotofobia. La reducción de la luminancia emitida por las pantallas del dispositivo ayuda a la ergonomía visual al reducir la fatiga visual, ajustar el brillo a las condiciones de iluminación del momento y facilitar el uso de la pantalla en ambientes más oscuros.

Alineando el Modo Oscuro con los principios de diseño de Nubank

La eficiencia inteligente fue uno de los pilares a lo largo de todo el proyecto, buscando como punto de partida soluciones sencillas y escalables. Un ejemplo es que nuestro objetivo para el lanzamiento inicial era hacer que las mismas ilustraciones funcionaran bien tanto en el modo Claro como en el Oscuro, evitando la complejidad de tener una versión oscura para cada ilustración al principio.

Para ello, ajustamos algunos detalles en el sistema para que las ilustraciones también funcionaran en Modo Oscuro. Como en el caso de las sombras proyectadas en el suelo, que desaparecen intencionadamente en el contexto oscuro. O grises muy claros, que se oscurecían para ganar más contraste entre ellos.

Conclusión

El camino hacia el desarrollo del Modo Oscuro ha sido un testimonio del compromiso de Nubank con la innovación centrada en el usuario. La función ha tenido un impacto significativo en la experiencia del usuario, proporcionando una interfaz cómoda y visualmente atractiva para los usuarios. El proceso de desarrollo, desde la decisión inicial de introducir el Modo Oscuro hasta su implementación final, ha estado marcado por un compromiso de mejora continua basado en los comentarios de los usuarios. Alentamos a todos los usuarios a explorar y utilizar la función Modo oscuro en la aplicación de Nubank, y esperamos continuar mejorando esta función según sus comentarios.