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

No mundo em constante evolução dos aplicativos digitais, a funcionalidade Modo Escuro surgiu como uma virada de jogo, melhorando a experiência do usuário em várias plataformas. Uma empresa que aproveitou com sucesso o poder dessa funcionalidade é o Nubank, um líder no setor de fintech. 

Este artigo levará você em uma jornada perspicaz, explorando como o Nubank integrou de forma inovadora o Modo Escuro em seu aplicativo, respondendo às demandas dos usuários e estabelecendo novos padrões no setor. Da gênese da ideia ao processo de desenvolvimento, superação de desafios e reações dos usuários, nos aprofundamos em todos os aspectos desta fascinante jornada. 

Seja você um entusiasta de tecnologia, um usuário do Nubank ou alguém interessado em design centrado no usuário, este aprofundamento na inovação do Modo Escuro do Nubank oferece insights valiosos. Então, prepare-se para iluminar seu entendimento sobre o Modo Escuro e descobrir como o Nubank está redefinindo a experiência do usuário no mundo fintech.

A decisão de introduzir o Modo Escuro no app do Nubank estava longe de ser arbitrária. Foi uma manobra calculada, impulsionada por uma fusão entre as solicitações dos clientes e as tendências digitais prevalecentes. Curiosamente, apesar de não ser um produto financeiro, o clamor por esse recurso foi notavelmente alto entre a clientela do Nubank. Essa demanda, aliada à crescente popularidade do Modo Escuro na esfera digital, estimulou o Nubank a embarcar na aventura de criar esse recurso para seu aplicativo.

A elaboração do Modo Escuro foi um processo complexo que envolveu vários estágios e equipes. A viagem começou com a equipe de design, que imaginou a estética do Modo Escuro. A utilização de tokens de sistema de design foi fundamental nesta fase, capacitando a equipe a delinear cores, tipografia e espaçamentos que se harmonizassem com temas claros e escuros.

Um design token, para quem não sabe, é um valor único que representa um atributo visual ou funcional específico usado em sistemas de design para garantir uma implementação de design consistente e eficiente em diferentes plataformas e dispositivos.

Simultaneamente, a equipe de engenharia estava trabalhando para transmutar esses projetos em um recurso funcional. Uma estratégia chave empregada durante esta fase foi a abordagem “quebra galho”, que é usada quando uma determinada tela não é atualizada na versão mais recente do Nu Design System (ou seja, os tokens não estão disponíveis para a versão atual, portanto, a tela “não saberia” como mudar as cores do Modo Escuro. 

Com essa abordagem, em vez de ter que atualizar mais de 3 mil telas uma por uma e atrasar o lançamento do recurso, conseguimos entregá-lo com mais rapidez.

Navegando pelos desafios

A jornada não foi sem obstáculos. O principal desafio foi a magnitude da tarefa: adaptar as 3.000 telas do aplicativo Nubank para o Modo Escuro. Isto exigiu uma abordagem meticulosa e um mecanismo de teste robusto para garantir consistência e funcionalidade em todas as telas.

O principal benefício dos tokens de sistema de design reside na sua capacidade de produzir experiências de usuário consistentes e confiáveis. Esses tokens, ao trazerem uniformidade às escolhas de design, reduzem a carga cognitiva do usuário, abrindo caminho para uma interface de usuário mais instintiva e agradável. Além disso, agilizam o design e o desenvolvimento, permitindo que as equipes priorizem ideias inovadoras e melhorias na jornada do usuário, em vez de lutarem com as irregularidades e repetições que podem ocorrer durante o processo de design.

Outro obstáculo significativo foi a complexidade técnica envolvida na implementação do Modo Escuro. Isso exigiu que a equipe desenvolvesse um mecanismo alternativo que permitiria que o aplicativo mudasse para o Modo Escuro, garantindo um serviço ininterrupto aos usuários.

Depois que o Modo Escuro foi criado, ele passou por rigorosos testes internos. A funcionalidade do recurso foi examinada e quaisquer falhas foram identificadas e corrigidas. O feedback também foi coletado dos Nubankers e dos membros da NuCommunity, fornecendo informações valiosas que ajudaram a refinar ainda mais o Modo Escuro.

Conheça nossas oportunidades

Iteração, aprimoramento e avaliação de sucesso

O feedback recebido desempenhou um papel fundamental no processo iterativo de aprimoramento do Modo Escuro. Com base no feedback, foram feitas modificações significativas no design e na funcionalidade do recurso. Por exemplo, a aparência das guias do aplicativo no Modo Escuro foi ajustada para melhorar a visibilidade e a facilidade de uso.

A revelação do Modo Escuro foi recebida com expectativa e entusiasmo. O seu sucesso foi avaliado com base no feedback do usuário e nos dados de uso. A resposta positiva dos usuários foi um claro indicador do sucesso do recurso.

O feedback dos usuários pós-lançamento foi extremamente positivo, com muitos apreciando a nova interface visualmente atraente. O aspecto mais gratificante do processo de desenvolvimento foi testemunhar o impacto positivo do Modo Escuro na experiência do usuário. O projeto também destacou a importância do design centrado no usuário e o valor do desenvolvimento iterativo baseado no feedback do cliente.

Considerações sobre design

Equilibrando estética e funcionalidade no Modo Escuro

A busca pelo equilíbrio permeou todo o projeto de concepção do Modo Escuro. Um excelente exemplo foi a decisão de adotar o preto puro como cor de fundo. A intenção era tornar a experiência do nosso aplicativo o mais nativa possível, combinando com sistemas operacionais populares como iOS e Android. Além disso, dispositivos com telas OLED apagam a luz para pixels pretos puros, o que pode auxiliar na conservação da bateria.

Outro exemplo foi quando optamos por uma paleta de cinzas neutros, quando poderíamos ter escolhido cinzas frios ou quentes. Esta foi uma decisão que havíamos tomado anteriormente, com a revisão da nossa cor base, mesmo em Modo Claro. Com o Modo Escuro reforçamos a decisão com o intuito de manter um quadro em branco para que as experiências dos produtos se destaquem, sem uma interferência cromática nos neutros, pois aparecem com muita frequência na interface.

Superando desafios de design no Modo Escuro

Nas iterações iniciais do Modo Escuro, a inversão de cores fez com que as superfícies que usavam o roxo característico do Nubank ficassem claras (roxo claro), com texto em preto. Entendemos que essa combinação se distanciava da nossa marca, por isso trabalhamos para manter o aspecto visual do Modo Claro em alguns contextos. Escurecemos o roxo apenas o suficiente, reduzimos um pouco a saturação e mantivemos os textos brancos no topo dessas superfícies, como nos botões.

Outro desafio relacionado foi o roxo da conta PJ, que é mais escuro que o tradicional. Também escurecemos esse roxo para o Modo Escuro, mas neste caso, precisávamos resolver um problema de contraste, pois nem sempre essa cor aparecia o suficiente em combinação com os tons de cinza escuro da interface. Para resolver isso, fizemos algumas iterações testando diferentes taxas de contraste até chegarmos a um equilíbrio entre essas necessidades.

Garantindo uma melhor experiência visual em ambientes com pouca luz

Trabalhamos para que mesmo com a redução do brilho, o Modo Escuro ainda atenda às taxas mínimas de contraste, que foram ajustadas para garantir uma boa experiência. Além disso, ajustamos as cores dos textos, para que fiquem mais claros no fundo preto, evitando um contraste exagerado, bem como a redução da saturação das cores, para que não brilhem muito no contexto escuro e criem um desconforto para os olhos.

Considerações sobre cansaço visual e acessibilidade

Embora o Modo Escuro não seja uma solução focada em acessibilidade, há uma melhora considerável em relação ao uso do modo por pessoas com deficiência visual, como baixa visão e fotofobia. A redução da luminância emitida pelas telas dos dispositivos auxilia na ergonomia visual ao diminuir o cansaço visual, adequar o brilho às condições de iluminação do momento e facilitar o uso da tela em ambientes mais escuros.

Alinhando o Modo Escuro aos princípios de design do Nubank

A eficiência inteligente foi um dos pilares de todo o projeto, procurando soluções simples e escaláveis como ponto de partida. Um exemplo é que nosso objetivo no lançamento inicial era fazer com que as mesmas ilustrações funcionassem bem nos modos Claro e Escuro, evitando a complexidade de ter uma versão escura para cada ilustração no início.

Para isso, ajustamos alguns detalhes no sistema para que as ilustrações também funcionassem no Modo Escuro. Como no caso das sombras projetadas no chão, que desaparecem propositalmente no contexto escuro. Ou cinza bem claro, que ficamais escuro para ganhar mais contraste entre eles.

Conclusão

A jornada de desenvolvimento do Modo Escuro tem sido uma prova do compromisso do Nubank com a inovação centrada no usuário. O recurso teve um impacto significativo na experiência do usuário, fornecendo uma interface visualmente atraente e confortável. O processo de desenvolvimento, desde a decisão inicial de introdução do Modo Escuro até a sua implementação final, foi marcado por um compromisso de melhoria contínua com base no feedback dos usuários. Encorajamos todos os usuários a explorar e usar a funcionalidade Modo Escuro no aplicativo do Nubank e esperamos continuar aprimorando esse recurso com base em seus comentários.

 

Conheça nossas oportunidades