Redesign da Conta de Energia Elétrica da COPEL Paraná

Veja como é possível ter uma conta de energia elétrica que todo mundo entende, que respeita seus olhos e seu tempo. Nesse post eu mostro passo-a-passo como esse projeto foi feito.

Tive a ideia de fazer esse redesign depois da repercussão positiva de outro projeto: o redesign do comprovante de débito da Cielo (veja logo abaixo).

Redesign Comprov Debito.indd

Esse projeto foi bem recebido na Internet, tendo mais de 20.000 likes e sendo compartilhado milhares de vezes. Visto que há um interesse nesse tipo de projeto, resolvi fazer um mais complexo, mostrando o passo-a-passo, que você pode acompanhar a seguir.

Passo a passo Redesign da Conta de Energia

Na imagem abaixo você pode ver como era a conta de energia original:

antes-redesign-conta-de-energia-eletrica

O principal problema desse layout é que ele confunde o usuário da conta:

  • As informações são misturadas
  • Tudo parece ter a mesma importância
  • As letras são pequenas
  • As cores mais atrapalham do que ajudam
  • A organização geral da conta demonstra pouca preocupação com quem irá usar o documento

Para resolver esse problema, eu:

  1. Identifiquei os dados mais importantes
  2. Agrupei essas informações importantes
  3. Depois eu identifiquei o que era menos importante na conta
  4. E daí simplifiquei essas informações menos importantes
  5. A seguir, eu organizei as informações importantes que eu tinha agrupado
  6. Organizei também os dados menos importantes
  7. Daí juntei as 2 partes: o bloco mais importante com o bloco menos importante
  8. Por fim, ajustei as cores
  9. E ajustei a tipografia

A seguir você pode acompanhar visualmente o passo-a-passo:

1. Identificar os dados mais importantes

1

Nem todas as informações da conta são importantes. Nessa etapa eu isolei tudo que eu considerei importante. Fiz baseado na minha própria experiência. Num projeto ideal, seria preciso consultar os consumidores para decidir junto com eles o que é importante ou não.

2. Agrupar as informações importantes

2

Depois de isolar o que era importante, eu criei grupos visuais, mantendo juntas as informações que tivessem relação com outras do mesmo assunto. Assim, tudo que tinha a ver com histórico de consumo eu mantive junto. Tudo que identificava o consumidor eu coloquei perto também.

3. Identificar o que é menos importante

3

Eu considerei que as informações mais técnicas tem menor importância, por isso eu coloquei isso num grande grupo separado do resto.

4. Simplificar o que é menos importante

4

As informações menos importantes eu tentei simplificar trocando as palavras muito técnicas por outras mais compreensíveis. Por exemplo, na fatura antiga aparecia a sigla DIC, que quase ninguém sabe o que é. No novo modelo eu troquei DIC por “Número de horas com falta de energia elétrica no mês”. Isso é mais útil. Fiz o mesmo em outras siglas, deixando mais simples.

5. Organizar as informações mais importantes

5

Agora eu comecei a mexer no layout em si, adicionando linhas, adicionando espaços e definindo uma hierarquia tipográfica, usando o negrito e o tamanho das letras para indicar o que merece mais destaque (preço, nome, data, consumo).

6. Organizei os dados menos importantes

6

Os dados que são menos importantes eu não dei muita atenção, apenas organizei visualmente e tentei deixar menos poluído. Usei 2 retângulos para agrupar as Informações Técnicas e os Indicadores de Qualidade. A nota fiscal obedece regras mais rígidas, então não havia muito o que fazer.

7. Juntei os 2 blocos: importante e o menos importante

7

Como os dois blocos já estavam organizados, eu juntei os 2, colocando as informações mais importantes no alto e as menos importantes embaixo. Nesse momento eu ainda não havia mexido com a cor e com a tipografia, algo que fiz em seguida.

8. Ajuste das cores

8

Ajustei as cores de forma a adicionar ritmo visual, um pouco de vida e contraste ao layout, pois com o fundo todo branco parecia mais confuso.

Por último, ajustei a tipografia, incluindo uma fonte que permite leitura mais fácil em tamanhos pequenos. Isso acontece pois essa fonte tem letras com “counters” maiores. O counter é a parte interna das letras e afeta fortemente a leitura. O resultado final pode ser visto na imagem a seguir:

depois-redesign-conta-de-energia-eletrica

Esse layout foi feito de forma a ser impresso em 2 etapas: num primeiro momento, seria impresso apenas o fundo colorido, como já é feito hoje. No segundo instante, a folha receberia os dados variáveis, impressos em preto.

Mas você deve estar se perguntando: Mas e o sinal verde, como seria impresso, já que algumas pessoas teriam contas atrasadas, e neste caso o sinal deveria ser um X vermelho? Você imagina como isso seria resolvido, já que os dados variáveis só podem ser impressos em preto? Veja se você adivinha, comente aí embaixo 😉 Ah, e compartilhe essa matéria nas redes sociais =)

Ainda não acabou

Depois, analisando o resultado final, achei que ainda tinha ficado muito pesado. Então decidi fazer uma versão mais simples, a ser enviada por e-mail ou whatsapp, para quem desejasse. O resultado ficou assim:

screen-shot-2016-09-10-at-12-59-51-pm

E aqui você vê uma comparação antes e depois, do estilo visual:

9

Então, qual você prefere? A completa ou a simplificada? Deixe seus comentários =)

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s