2022 — Design de Produto

Nova Telecom

Redesenho da experiência digital de uma operadora, com planos, contratação e área do cliente organizados em uma estrutura previsível.

TelecomUI DesignWeb

Capa do projeto Nova Telecom

|Contexto

Projeto de exploração visual criado para aprimorar minhas habilidades em design de interface no Figma. Por ser um exercício conceitual, não passou por etapa de pesquisa: o foco foi a construção da interface e do design system.

|O que é a Nova Telecom

A Nova Telecom é uma empresa de internet de Ribeirão das Neves (MG).

A ideia de criar uma nova interface surgiu porque a interface antiga não atendia os clientes com facilidade.

Todo o processo foi realizado no Figma, partindo direto para a alta fidelidade.

|Design system

Cores utilizadas no projeto

Optei por usar as cores da marca, para preservar a identidade da empresa.

#1C99BA

#000000

#ECE300

Criei uma pequena tabela com a função de cada cor, para otimizar a criação das telas.

Cores para tipografia

#9B9B9B

#535353

#1C99BA

#F3F3F3

#100D0D

#C4C4C4

Cores para detalhes

#1C99BA

#1C99BA — 40%

#585858

#C4C4C4

Cores para status

#EC1414

#EFAA25

#298100

Cores para CTAs (Calls to Action)

#1C99BA

#E8E8E8

#535353

#F3F3F3

#120F0F

Cores para backgrounds

#F3F3F3

#1C99BA

#F1F1F1

#5C5C5C

#FAFAFA

#DADADA

#FFFFFF

Fontes utilizadas no projeto

A família utilizada foi a Roboto, organizada em grupos para facilitar a criação das telas.

Headlines

Headline 0118px — Bold
Headline 0224px — Regular

Body

Body 0116px — Light
Body 0214px — Regular
Body 0316px — Regular
Body 0420px — Regular

Button

Button 0116px — Regular
Button 0214px — Regular
Button 0324px — Regular
Button 0412px — Regular

|Protótipo

Tela de login

Tela de login da Nova Telecom com campos de usuário e senha

Tela de login com a senha visível pelo ícone de olho aberto

Tela de login exibindo o erro usuário ou senha incorretos

Recuperação de senha

Tela de recuperação de senha com o campo de CPF vazio

Tela de recuperação de senha com o CPF preenchido

Tela de recuperação de senha exibindo o erro CPF não encontrado

Modal de confirmação de e-mail de recuperação enviado

Home

Tela inicial da Nova Telecom com boas-vindas, fatura atual, consumo de franquia e atalho de diagnóstico

Diagnóstico de rede

Tela de diagnóstico com conexão, status da rede e financeiro sinalizados em verde

Tela de diagnóstico indicando problema de conexão em vermelho e canais de contato

Extrato

Tela de extrato com a lista Suas faturas exibindo status em aberto, atrasado e pago

Faturas

Tela de fatura em aberto com código de boleto e botões para copiar código ou pagar com cartão

Tela de fatura atrasada com código de boleto e botões de ação

Tela de fatura paga com data de pagamento, método do cartão e botões de comprovante

Modal confirmando que a nota fiscal foi enviada para o e-mail, com botão Voltar

Toast de código copiado com sucesso sobre a fatura em aberto

Toast de código copiado com sucesso sobre a fatura atrasada

Pagamento com cartão de crédito

Tela de pagamento com cartão com os campos Nome no cartão, Número do cartão, Validade, CVV e CPF do titular vazios

Tela de pagamento com cartão preenchida e botão Pagar habilitado

Tela de pagamento com cartão exibindo o erro número do cartão inválido em vermelho

Tela de pagamento com a opção Autorizar débito automático marcada

Modal confirmando que o pagamento foi efetuado com sucesso

Modal de pagamento com sucesso informando que as próximas faturas serão cobradas automaticamente no cartão cadastrado

Modal de pagamento negado por saldo insuficiente, com botão Tentar novamente

Comprovante de pagamento

Comprovante de pagamento com a folha de compartilhamento do sistema aberta, exibindo contatos e opções de envio

Meu espaço

Tela Meu Espaço com a mensagem Bem vindo ao seu espaço e o menu Dados Pessoais, Contratos, Atendimento e Sair, com a barra inferior Home, Extrato e Meu Espaço

Dados pessoais

Tela Dados Pessoais com campos de nome completo, CPF, telefone e e-mail, e botões Salvar e Voltar

Tela Dados Pessoais com o campo de telefone em foco, exibindo o número preenchido

Tela Dados Pessoais com o campo de e-mail em foco, exibindo o endereço preenchido

Contratos

Tela Contratos com três contratos listados: n° 42184 Ultravelocidade 320 MB ativo, n° 42185 Ultravelocidade 240 MB suspenso e n° 42186 Econômico 50 MB finalizado, com indicadores verde, amarelo e vermelho

Fale conosco

Folha inferior Fale com a gente sobre o menu do Meu Espaço, com botões WhatsApp, Ligar e Voltar

Sair

Modal de confirmação Deseja realmente sair do aplicativo? sobre o menu do Meu Espaço, com botões Voltar e Sair

|Navegue pelo protótipo

Explore o fluxo completo do conceito diretamente no protótipo interativo do Figma.

Abrir protótipo no Figma ↗