O ProviPay é uma solução de pagamentos que a Provi oferece para escolas e infoprodutores.
Como funciona o produto
Pessoas interessadas em compras cursos com parceiros da Provi acessam um link exclusivo do parceiro, escolhem um ou mais cursos, passam por um cadastro e escolhem a forma de pagamento. 
A solução principal da Provi é o financiamento estudantil. Se o usuário escolher essa forma de pagamento, ele passa por uma análise de crédito e, se for aprovado, recebe o contrato.
O problema
Nas versões anteriores do produto, o usuário não conseguia completar a compra com um link só, pois internamente esse fluxo estava separado em dois serviços diferentes. Com a necessidade de unificar todo o fluxo em uma experiência fluida para o usuário, o time de design precisou olhar para o produto do zero.
No capítulo de design, esse trabalho envolveu duas product designers (eu a minha lead, Marina, que no início do projeto atuava como colaboradora individual) e duas UX writers (primeiro a Lua, depois a Mariana). 
Discovery
O momento exploratório do projeto envolveu muito investigação de todos os caminhos possíveis que os usuários poderiam fazer dentro do ProviPay. São muitos casos: pessoas que estão comprando um curso pela primeira vez, pessoas que abandonaram um carrinho e estão retomando a compra, pessoas que receberam um link da escola com um desconto exclusivo. E cada um desses casos apontava para ramificações no fluxo e, consequentemente, telas específicas. Essa frente do trabalho foi liderada pela Marina, que compartilhava e discutia as descobertas do fluxo para pensarmos juntas como dar forma para o produto.
Desenho de interface
Desde o começo sabíamos que a mudança no produto seria muito grande, e tínhamos uma pista de que o layout precisaria ser totalmente repensado. Eu já tinha redesenhado o site da empresa e começado a planejar o design system, e o ProviPay era uma oportunidade de amadurecer o uso de uma identidade visual que tinha acabado de nascer.
A exploração visual começou com uma estratégia: alterar um aspecto por vez como forma de argumentar a importância de um redesign completo. Uma das principais mudanças da nova identidade era a cor principal, e é compreensível achar que atualizar um desenho é tão simples quanto trocar os valores HEX num botão.
Mas eu sabia que o buraco era mais embaixo, porque uma mudança isolada criava um novo problema, que pedia uma outra mudança, e assim por diante. Ficou claro que era preciso deixar o produto anterior de lado e pensar no desenho de interface a partir da experiência, e não como uma camada de tinta.

Experimentei fazer mudanças incrementais: primeiro só cor, depois cor e tipografia, depois uma atualização dos estilos tipográficos (tamanhos, alinhamento, pesos), uso de grid e, por último, diagramação. 

A primeira etapa do fluxo já apresentava um desafio: deixar claro que um mesmo curso pode ter várias turmas (por exemplo, a turma noturna de um bootcamp de Marketing Digital). O usuário precisava entender as diferenças entre o que cada turma oferecia e também a separação entre cursos.
Voltar ao topo