Pravaler App
do Aluno
At a glanceEm resumo
DivergeDivergir
Why the old channel failed, and what to build first.Por que o canal antigo falhava e o que construir primeiro.
More than a boletoMais do que um boleto
In 2024 the app was a place to pay a boleto (the Brazilian bank payment slip) and leave. The bet: make it the student’s main self-service channel, rebuilt from zero in React Native.Em 2024, o app do Pravaler era um lugar para pagar o boleto e sair. A aposta era transformá-lo no principal canal de autoatendimento e relacionamento do aluno. Isso significou deixar o app legado em Flutter e reconstruir o canal do zero em React Native: uma decisão de produto, não um redesign.
What every call really costQuanto cada ligação custava de verdade
Every hand-off from the WhatsApp bot to a person cost about R$16. With CX, we ranked contact reasons to decide what the app solves first.Cada transbordo do bot de WhatsApp para uma pessoa custava cerca de R$16. Com o CX, ranqueamos os motivos de contato para decidir o que o app resolveria primeiro.
Problem statements from continuous discoveryProblemas enquadrados no discovery contínuo
How might we make every bill understandable and payable without calling us?Como fazer cada boleto ser entendido e pago sem precisar nos ligar?
From that ticket breakdown: doubts about open amounts (23%), second copy of the boleto (14%), due-date change (11%) and payment advance (8%) led the contact reasons.Pelo recorte dos tickets: dúvidas sobre valores em aberto (23%), 2ª via de boleto (14%), troca de vencimento (11%) e antecipação (8%) lideravam os motivos de contato.How might we make a long, regulated credit contract predictable?Como tornar previsível um contrato de crédito longo e regulado?
7 of 7 interviewees struggled with re-hiring; readjustments came without communication, and payment behaviour affects renewal.7 de 7 entrevistados tiveram dificuldade na recontratação; reajustes chegavam sem comunicação, e o comportamento de pagamento afeta a renovação.How might we reach the right student, about the right status, at the right time?Como falar com o aluno certo, sobre o status certo, na hora certa?
Communication was mostly by e-mail, and 7 of 7 interviewees ignored notification permission prompts.A comunicação era majoritariamente por e-mail, e 7 de 7 entrevistados ignoravam os pedidos de permissão de notificação.A product-led launch, step by stepUm lançamento orientado a produto, passo a passo
| Beta success criteria | Target | Result |
|---|---|---|
| Critical errors | < 1% | 0% |
| CSAT | > 4 | 4.2 |
| Notification opt-in | ≥ 70% | 83% |
| Uninstall rate | < 60% | 17% |
Beta with 155 active users: 62% used payments; PIX was the most copied code (66%). Each rollout step waited for every criterion.
Earn the opt-inConquistar o opt-in7 of 7 interviewees ignored permission prompts, so the tutorial explains the value of notifications before asking. Result: 83% opt-in.7 de 7 entrevistados ignoravam pedidos de permissão, então o tutorial explica o valor das notificações antes de pedir. Resultado: 83% de opt-in.
ConvergeConvergir
Findings turned into a system: shared components and a status language.Os achados viram sistema: componentes compartilhados e uma linguagem de status.
One library for design and React NativeUma biblioteca para design e React Native
The first styleguide had colours named like paint samples and 37 one-off text styles. I rebuilt it as one library shared with React Native engineering, where every name says what it is for.O primeiro styleguide do app tinha cores com nomes de amostra de tinta e 37 estilos de texto avulsos. Reconstruí as fundações como uma biblioteca única compartilhada com a engenharia React Native, em que toda decisão segue uma escala e todo nome diz para que serve.
Colour · semantic rampsCor · escalas semânticas
PrimaryBrand, main actionsMarca, ações principais
fff8f4
ffd9c6
ffba98
ffa578
ff8b51
fa5300
c74200
ab3900
953200
772700
NeutralSurfaces, lines, iconsSuperfícies, linhas, ícones
f5f7fa
ebf0f5
dfe7f0
c3cfdc
8799ae
57697f
3c4b5d
2b394a
1a2533
101725
SuccessUp to date, paidEm dia, pago
ecfdf7
d9f7ec
b2f0d9
8ceaca
24d7a1
00bc83
009c6f
006f52
004a3b
00342a
WarningDue soonVencimento próximo
fff7ea
fdeed0
fce1ac
fbd48b
f9bc53
f7aa33
d99026
b47320
805217
46290e
DangerOverdue, errorsAtraso, erros
fff3f2
ffe4e0
ffb5ad
ff695b
f75244
e94035
cc2f25
ac261e
951a1e
791b1e
See Secondary, Accent, Info, Typography, Overlay and gradientsVer Secondary, Accent, Info, Typography, Overlay e gradientes
SecondarySupporting surfacesSuperfícies de apoio
f7f5f4
e2d7d3
948781
7f6f67
766156
735546
6e4029
5e3019
4a1e09
06080d
AccentRenewal in progressRenovação em curso
f6f0fd
ebddfd
d5bcfc
bb99f8
a47df1
8154e8
633dc7
482aa7
311a86
21106f
InfoRenewal, guidanceRenovação, orientação
e3faff
d1f2fc
7cd4e8
46bbd5
418797
044058
00354b
002332
001620
000000
TypographyText rolesPapéis de texto
f5f7fa
ebf0f5
dfe7f0
c3cfdc
8799ae
57697f
3c4b5d
2b394a
1a2533
101725
OverlayScrims behind modalsFundos atrás de modais
Primary linear
Secondary linear
WCAG 2.1 ratio of each swatch against its paired text colour, computed from the tokens. AA Large = passes only for large or bold text.Cada amostra mostra a cor de texto com que é pareada na especificação e sua razão de contraste WCAG 2.1, calculada a partir dos tokens. AA Large significa que o par só passa para texto grande ou em negrito (3:1). Os papéis vêm do styleguide do Pravaler.
Role, not hueFunção, não matizNames describe what a colour does: Primary/500 for actions, Danger/500 for overdue, Neutral/900 for text. Banners and payment cards pull from the same source.Os nomes descrevem o que a cor faz: Primary/500 para ações, Danger/500 para atraso, Neutral/900 para texto. Banners e cards de pagamento buscam da mesma fonte.
See the legacy → semantic mappingVer o mapeamento legado → semântico
Type · Suitable, sized like clothingTipografia · Suitable, tamanhos como roupa
Display XLLMS
Title XLL28L24MSXS
See Body and Caption stylesVer estilos Body e Caption
Body LMSXSEXS
Caption LMSXS
Specimen set in Pravaler Display and Pravaler Text, with the size, line height and letter spacing of each text style in the styleguide.Espécime em Pravaler Display e Pravaler Text, com tamanho, altura de linha e espaçamento de cada estilo de texto do styleguide.
37 → 19 styles37 → 19 estilosOne-off styles were merged into the scale, and every line height sits on a 4px grid.Estilos avulsos foram fundidos na escala, e toda altura de linha segue um grid de 4px.
Components · every state, ready for React NativeComponentes · todos os estados, prontos para React Native
See inputs and select in every stateVer inputs e select em todos os estados
Iconography · named by meaningIconografia · nomeada pelo significado
One stroke weight across the set. Colour comes from the tokens, never from the icon file.Um só peso de traço em todo o set. A cor vem dos tokens, nunca do arquivo do ícone.
See 50 system iconsVer 50 ícones de sistema
For everything else the library uses Material Symbols (Outlined), so the brand set stays small and meaningful.Para todo o resto a biblioteca usa Material Symbols (Outlined), para o set da marca ficar pequeno e significativo.
Status system: the right message, for the right status, at the right timeSistema de status: a mensagem certa, para o status certo, na hora certa
The Home header and the payment card work as one scale: the more urgent the situation, the warmer the colour, and both always move together.O cabeçalho da Home e o card de pagamento são as duas principais mensagens do app. Em vez de desenhar cada caso separadamente, organizei tudo em uma escala: quanto mais urgente a situação, mais quente a cor, e cabeçalho e card sempre se movem juntos.
The dynamic header · one engine, many statesO header dinâmico · um motor, vários estados
InputEntrada
150+overlapping status codes, unified with dates and contract data in Salesforce to feed the header.códigos internos de status descrevendo cada contrato, muitos sobrepostos e difíceis de ler até para o time. Junto com datas e dados do contrato, foram unificados no Salesforce para alimentar o header.
RulesRegras
OutputSaída
8header families the student understandsfamílias de header que o aluno entende
12345by subjectpor assunto≤ 60 ch100–120 ch17–23 chby urgencypor urgênciaStress-tested with maximum-length copy on a 240px screen: any new status fits without a layout change.Testado com o texto mais longo possível numa tela de 240px: qualquer novo status cabe sem mudar o layout.
Payment scale · header + payment cardEscala de pagamento · cabeçalho + card de pagamento
Up to dateEm dia
Reassurance only. No call to action competes for attention.Só tranquilidade. Nenhuma chamada de ação disputa atenção.
Success/500
Due soonVencimento próximo
The due date becomes the headline, with a single “Pay installment” action.A data de vencimento vira a manchete, com uma única ação “Pagar parcela”.
Warning/400
OverdueEm atraso
Copy shifts from reminder to resolution, and the card counts what is pending.O texto muda de lembrete para resolução, e o card conta o que está pendente.
Danger/500
RenegotiatedRenegociado
The debt was renegotiated: the card keeps the history visible without alarming the student again.A dívida foi renegociada: o card mantém o histórico visível sem alarmar o aluno de novo.
Danger · tagCard-only stateEstado só no card
Renewal cycle · same structure, its own coloursCiclo de renovação · mesma estrutura, cores próprias
One structureUma estruturaSame layout in every state, updated without a new release: students learn it once.Mesmo layout em todos os estados, atualizado sem nova versão do app: o aluno aprende uma vez.
Motion & illustration: one animation per momentMotion e ilustração: uma animação por momento
Illustration with a jobIlustração com função
23 lightweight Lottie animations, one per moment (payment confirmed, contract signed, renewal done), never inside a money flow.23 animações Lottie leves, cada uma ligada a um momento: pagamento confirmado, contrato assinado, alerta, renovação concluída. Vivem em cabeçalhos, estados vazios e confirmações, nunca dentro de um fluxo de dinheiro.
See all 23 animationsVer as 23 animações
Beyond the app · the system scalesAlém do app · o sistema escala
The same foundations later carried the renewal guide and the contract itself, so students recognise Pravaler wherever they meet it.As mesmas fundações depois sustentaram duas iniciativas de renovação fora do app: um guia para o aluno e o próprio contrato. Mesmos tokens, mesmos ícones, mesmas cores de status, para o aluno reconhecer o Pravaler onde quer que o encontre.
See the landing page and the contractVer a landing page e o contrato
A guide that answers before students callUm guia que responde antes de o aluno ligar
Renewal was the most confusing moment of the contract. Built low-code with the Renewal squad, Marketing and CX, the page explains the process in steps, with a video and an FAQ, reusing the app’s icons, Info blue for renewal and Primary orange for actions.A renovação era o momento mais confuso do contrato. Construída em low-code com o squad de Renovação, Marketing e CX, a página explica o processo em etapas, com vídeo e FAQ, reusando os ícones do app, o azul Info da renovação e o laranja Primary das ações.
- The FAQ drew far more clicks than the step-by-step, so questions were reordered by clicks.O FAQ teve muito mais cliques que o passo a passo, então as perguntas foram reordenadas pelos cliques.
- Students looked for the status of their own renewal, so the page now points them to the app to follow it.O aluno buscava o status da sua renovação, então a página passou a direcioná-lo ao app para acompanhar.
A credit contract students can actually readUm contrato de crédito que o aluno consegue ler
Three different covers explained the same debt in three ways, which created distrust and longer support calls. In a design critique with Product and Legal we set three principles (one cover for every scenario, full transparency about the debt, and a clear benefit) and rebuilt the cover with the system: a card per party, Primary section titles, and Info and Warning blocks for the “Margem para Imprevistos” (safety margin) and payment reminders.Três capas diferentes explicavam a mesma dívida de três formas, gerando desconfiança e atendimentos mais longos. Numa design critique com Produto e Jurídico definimos três princípios (uma capa para todos os cenários, transparência total sobre a dívida e um benefício claro) e reconstruímos a capa com o sistema: um card por parte, títulos em Primary e blocos Info e Warning para a Margem para Imprevistos e os lembretes de pagamento.
Before · three covers in use: Standard, with Reserve, ComplementaryAntes · três capas em uso: Padrão, com Reserva, Complementar
1 · After Legal review: the safety margin explained in a side-by-side block1 · Após revisão jurídica: a margem explicada num bloco lado a lado
2 · After the usability test: one financed amount, and the margin as a short Info note2 · Após o teste de usabilidade: um único valor financiado e a margem como nota Info curta
3 · The same cover for contracts without a margin3 · A mesma capa para contratos sem margemValidated with 532 real students (95% confidence, ±4.2% margin of error):Validada com 532 alunos reais (95% de confiança, margem de erro de ±4,2%):
- The trade-off: the safety-margin block still confused 11%, a projected overflow of about 9k support calls. That led to financial literacy embedded in the journey and separate opt-out rules for each institution.O trade-off: o bloco da margem ainda confundiu 11%, um transbordo projetado de cerca de 9 mil chamados. Isso levou a letramento financeiro embutido na jornada e a regras de opt-out por instituição.
- Names and tax IDs on the covers are fictitious test data.Nomes e CPFs nas capas são dados fictícios de teste.
Inside the contract · 12 pages rebuilt with the systemDentro do contrato · 12 páginas refeitas com o sistema
The legal text became a structured “Confissão de Dívida” (debt acknowledgement), reworked with Legal and the BITS content agency: an index, glossary cards for every charge, a payment timeline, numbered conditions and plain-language callouts, all with the app’s colours, icons and type scale. Scroll sideways to browse.O texto jurídico virou uma Confissão de Dívida estruturada, reescrita com o Jurídico e a agência de conteúdo BITS: índice, cards de glossário para cada encargo, linha do tempo de pagamento, condições numeradas e destaques em linguagem simples, tudo com as cores, ícones e escala tipográfica do app. Role para o lado para navegar.
Index · 9 sections, each with a one-line summaryÍndice · 9 seções, cada uma com um resumo
Charges explained in plain words, plus a payment timelineEncargos explicados em palavras simples, com linha do tempo de pagamento
Payment rules, early payment and late fees as cardsRegras de pagamento, antecipação e atraso em cards
What happens if enrollment changesO que acontece se a matrícula mudar
Validation rules as four numbered conditionsRegras de validação em quatro condições numeradas
Data protection, with “What changes for you? Nothing.”Proteção de dados, com “O que muda para você? Nada.”EvolutionsEvoluções
Every flow shipped, measured and iterated against the contact rate.Cada fluxo lançado, medido e iterado contra a taxa de contato.
Four flows, each shipped and measuredQuatro fluxos, cada um lançado e medido
Home · Calendar or timeline?Home · Calendário ou linha do tempo?
27svs 212s to find what’s duevs 212s para achar o que venceTwo ways to show what’s coming next, tested with 425 students.Duas formas de mostrar o que vem pela frente, testadas com 425 alunos.
My decisionMinha decisãoWhy the calendar wonPor que o calendário venceuDue dates and renewal on a monthly grid were read at a glance. The timeline mixed financial events with editorial content and confused people.Vencimentos e renovação em uma grade mensal foram lidos num relance. A linha do tempo misturava eventos financeiros com conteúdo editorial e confundia.
Payments · Inline or modal?Pagamentos · Inline ou modal?
−44%misclicks on the new flowcliques errados no novo fluxoThe decisionA decisão
Showing every option looked faster, but the data said the opposite: one action and a bottom sheet cut misclicks by 44% and time on task by 14%.Mostrar todas as opções parecia mais rápido, mas os dados disseram o contrário: uma ação e um bottom sheet reduziram os cliques errados em 44% e o tempo na tarefa em 14%.
The winning flowO fluxo vencedor
1 · Pay installmentPagar parcela
2 · Choose PIX or boletoEscolher PIX ou boleto
3 · Copied, with clearing timeCopiado, com prazo de compensaçãoThe confirmation sets the 1–5 day clearing expectation, which prevents “I paid but it didn’t update” calls.A confirmação informa o prazo de compensação de 1 a 5 dias, o que evita ligações do tipo “paguei e não atualizou”.
See how we got here · V1 and the A/B testVer como chegamos aqui · V1 e o teste A/B
What V1 taught usO que a V1 ensinou
Two equal actions and no PIX on the card. “Payment advance” became the #1 reason to call: 312 contacts, +80% in two weeks.Duas ações de mesmo peso e nenhum PIX no card. “Antecipação de pagamento” virou o motivo nº 1 de contato: 312 contatos, +80% em duas semanas.
V2 · A/B test, card onlyV2 · teste A/B, só o card
| MetricMétrica | A · Inline | B · Modal |
|---|---|---|
| Direct successSucesso direto | 80.0% | 85.8% |
| Drop-offDesistência | 17.5% | 11.6% |
| Misclick rateTaxa de cliques errados | 1.91% | 1.07% |
| Avg. time (success)Tempo médio (sucesso) | 26.1s | 22.5s |
| SUS | 71.8 | 79.4 |
Unmoderated A/B test sent to 23,868 students: 259 on Inline and 245 on Modal.Teste A/B não moderado enviado a 23.868 alunos: 259 no Inline e 245 no Modal.
My Financing · What do I owe?Meu Financiamento · Quanto eu devo?
72%task completion in testingde conclusão da tarefa em teste
Total, paid, outstandingTotal, pago, saldo devedor
“Amounts financed” stayed in the top 3 reasons to call. The balance now splits into three plain numbers, one tap from the progress card.“Valores financiados” seguia no top 3 dos motivos de contato. O saldo agora se divide em três números simples, a um toque do card de progresso.
See the usability test and design critiqueVer o teste de usabilidade e a crítica de design
“The installment composition is crystal clear now. Before, I couldn’t understand it.”“A composição da parcela ficou muito clara agora. Antes, eu não conseguia entender.”
Participant #14, usability testParticipante nº 14, teste de usabilidadeDesign critique · 11 Sep 2025Design critique · 11/09/2025
The critique board: every My Financing screen annotated by the team with questions, problems and ideas. Click to open full size.O quadro da critique: cada tela do Meu Financiamento anotada pelo time com dúvidas, problemas e ideias. Clique para abrir em tamanho real.
Renewal · Renew without callingRenovação · Renovar sem ligar
80%of renewing students used the appdos alunos em renovação usaram o app
Documents & income proof · the hardest step, made followableDocumentos e comprovação de renda · a etapa mais difícil, feita para ser seguida
Regulated, full of rules, and often done by a parent or grandparent acting as guarantor.Regulada, cheia de regras e muitas vezes feita por pais ou avós como garantidores.
AAThe income rule, in one sentenceA regra de renda, em uma frase
To renew, the student and the guarantor together must prove a monthly income of at least 2× the full monthly tuition. It can come from the student alone or be added up with the guarantor.Para renovar, aluno e garantidor juntos precisam comprovar renda mensal de pelo menos 2× o valor integral da mensalidade. Pode vir só do aluno ou ser somada à do garantidor.
The exact amount shows before any upload, so nobody sends documents that would fail.O valor exato aparece antes de qualquer envio, para ninguém mandar documentos que não passariam.
See the full document flow · steps 2–6 and researchVer o fluxo completo de documentos · etapas 2–6 e pesquisa
“I contacted support many times just to know when my renewal would be done.”“Eu entrava em contato muitas vezes só para saber quando a renovação seria concluída.”
A student interviewed during the renewal study (anonymised).Aluno entrevistado no estudo de renovação (anonimizado).
Try the final version yourselfExperimente a versão final
- Start on the Home screen.Comece na Home.
- Tap Meu Financiamento in the tab bar, or Ir para Meu Financiamento → on the card.Toque em Meu Financiamento na tab bar, ou em Ir para Meu Financiamento → no card.
- Explore the balance composition, amount paid, outstanding balance, installments and contract details.Explore a composição do saldo, valor pago, saldo devedor, parcelas e detalhes do contrato.
What changed for students and the businessO que mudou para alunos e negócio
In production · after the April 2025 rolloutEm produção · após o rollout de abril de 2025
Thanks for reading this far!
