Relatório | Redesign do Aplicativo COPEL

Redesign do Aplicativo COPEL

Soluções em Energia

por:

Aurora Cristina Marcela Rolim Ribas

Design Gráfico Projeto Web

orientador:

Rafael Dubiela

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

1

Sumário

>

1. Introdução

........................................................................................................3

1.1 Aplicativo Copel ............................................................................3 1.2 Objetivo .........................................................................................4 1.3 Resumo do Processo Metodológico...........................................4 1.4 Resumo do Trabalho.....................................................................5 2. Processo Metodológico ....................................................................................6 2.1 Estruturas de Componentes Digitais de Garrett (2011)...........6 2.2 Análise Descritiva do Aplicativo com base em Garrett............8 2.3 Pesquisa de Similares..................................................................12 2.4 Heurísticas Utilizadas...................................................................13 2.5 Planejamento...............................................................................13 3. Desenvolvimento .............................................................................................14 3.1 Aplicação da Metodologia.........................................................14 3.2 Diagnóstico de problemas encontrados..................................14 3.3 Teste de Usabilidade e Entrevista com os Usuários...............17 3.4 Discussão de Resultados............................................................18 3.5 Requisitos.....................................................................................21 3.6 O Processo...................................................................................21 4. Conclusão

......................................................................................................33

4.1 Comparação do Layout..............................................................33 4.2 Reflexões .....................................................................................34 5. Apêndice .............................................................................................................35

2

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

1

Indtrodução 1.1 Aplicativo Copel O aplicativo da COPEL, desenvolvido pela Copel Distribuição e lançado em 12/01/18 para Smartphones e Tablets nos sistemas operacionais Android e IOS, tem como objetivo “atender e facilitar a vida de seus consumidores” por meio de funções que possibilitem ao usuário o acesso de suas faturas, o contato com a empresa etc.

Essa interface conta com diversas funções oferecidas pelo desenvolvedor, segundo notícia do site institucional da empresa, o aplicativo oferece as seguintes funcionalidades ao usuário:

1) Alterar e-mail e telefones de contato; 2) Aderir à entrega da Fatura Digital por e-mail; 3) Consultar desligamentos programados; 4) Consultar desligamentos não programados (emergenciais) 5) Informar falta de energia; 6) Receber notificação informando falta de energia na região; 7) Receber notificação lembrando sobre faturas em atraso; 8) Consultar débitos; 9) Emitir segunda via em PDF e copiar o código de barras; 10) Consultar histórico de consumo e pagamento; 11) Alterar data de vencimento da fatura; 12) Registrar autoleitura; 13) Solicitar religação de conta cortada, após o pagamento das faturas em atraso; 14) Consultar o responsável pela iluminação pública de seu município; 15) Consultar locais de atendimento com a opção de traçar a rota; 16) Simular o consumo dos equipamentos elétricos; 17) Registrar solicitações na Ouvidoria da Copel.

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

3

A escolha do aplicativo para esse projeto deu-se por experiência anterior da equipe com a interface e por dificuldades já percebidas anteriormente pelos membros quando tentaram utilizar o material.

Unidas a vontade de reprojetar um serviço com potencial de impacto em grande escala.

Além de questões técnicas, que fogem do campo do design, como os erros constantes da interface a nível de consulta do banco de dados ou de conexão com o sistema da Copel, o aplicativo é composto por uma série de funções mal organizadas, que mais confundem o usuário que ajudam, os ícones e informações da interface não seguem a malha de diagramação e nem estão alinhados a ela e, a maneira como as informações estão dispostas, não facilita a utilização pelo usuário. Outros problemas foram percebidos também durante a entrevista com usuário, que será abordada no capítulo 2.

1.2 Objetivo O objetivo desse trabalho é apresentar uma proposta de redesign do aplicativo da Copel, corrigindo os problemas identificados pelas comparação com heurísticas, pela Análise realizada com base nos estudos de Garrett e durante a entrevista e análise de usabilidade da interface com os usuários, além de sugerir uma nova organização para as informações e funções da interface, também apresentando novas funcionalidades ao aplicativo.

4

1.3 Resumo do Processo Metodológico O processo metodológico do projeto, que será aprofundado no capítulo 2, foi baseado na utilização de heurísticas de Fleming (1998), Cato (2001) e das Estruturas de Componentes Digitais de Garrett (2011). Além disso, desenvolveu-se um protocolo de usabilidade e foi realizado um teste de usabilidade com cinco pessoas para identificar problemas da interface e reconhecer se as funções determinadas pela equipe conseguiam ser realizadas pelos usuários do aplicativo.

Dentro dos componentes de Garrett (2011), no campo de estratégia, foram identificados os objetivos do aplicativo (tanto por parte da empresa, quanto do usuário), o público alvo e as demais informações técnicas da interface. Nessa etapa, também foi realizado o Teste de Usabilidade, para permitir com que a equipe definisse os demais problemas a serem corrigidos nos níveis superiores.

No escopo, a equipe procurou definir as ferramentas e funcionalidades atuais do aplicativo e os componentes da interface, além de organizar os conteúdos que o aplicativo apresenta. Dentro da Estrutura, foi identificada a atual arquitetura da informação utilizada no aplicativo e, dessa forma, desenvolveu-se uma nova arquitetura, sugerindo uma reorganização das funções e conteúdos, de forma a permitir com que o usuário tivesse mais facilidade para encontrar as informações desejadas.

Dentro do campo de Esqueleto, a equipe traduziu a arquitetura da informação escolhida em wireframes, definindo a localização dos componentes da interface (funções e conteúdos) e inserindo as novas funcionalidades. Por fim, na Superfície, os wireframes foram refinados e, com base neles, a equipe desenvolveu as telas finais, aplicando a paleta de cores da marca e os ícones do Material Design, do Android.

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

1.4 Resumo do Trabalho Este trabalho, realizado para a disciplina de Proj.

VI - Webdesign, envolve o processo de redesign do aplicativo da COPEL, processo esse que se inicia na escolha da interface, até o desenvolvimento das telas do aplicativo e a discussão dos resultados alcançados. >Capítulo 1 - Introdução: contempla a descrição do aplicativo da Copel, o objetivo do trabalho e apresenta um breve resumo do Processo Metodológico utilizado durante a realização do projeto. > Capítulo 2 - Processo Metodológico: descreve o passo-a-passo do trabalho, abordando de que forma foram realizadas as etapas do projeto.

Para esse projeto, foram utilizadas as de Fleming (1998) e Cato (2001) e as Estruturas de Componentes Digitais de Garrett (2011), como norteadores do processo metodológico. Neste capítulo também é abordado o desenvolvimento do roteiro e do protocolo de teste de usabilidade, que foram utilizados para entrevistar os usuários. > Capítulo 3 - Desenvolvimento: neste capítulo, é abordado o processo de redesign do aplicativo, partindo do processo metodológico até a realização dos testes de usabilidade, os requisitos e restrições do projeto e o desenvolvimento da nova arquitetura de informação, base para a criação dos wireframes e das telas finalizadas da interface. > Capítulo 4 - Conclusão: aqui, aborda-se os resultados alcançados e a comparação do antigo e do novo layout, além da discussão do que influenciou as mudanças e de como o teste com os usuários é essencial para o processo metodológico. É discutido, também, que o projeto não foi um redesign, mas um pré-redesign, que dependeria de uma futura validação e teste com usuários para compreender se as ferramentas adotadas e as mudanças propostas pela equipe proporcionam uma experiência mais positiva entre a interface e o usuário.

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

5

Processo Metodológico

2

2.1 Estruturas de Componentes Digitais de Garrett (2011) Estratégia:

Nessa etapa, foi realizada a identificação dos objetivos da interface, tanto os objetivos que a empresa demonstrou para o aplicativo, quanto os objetivos do usuário em se utilizar do material. Além disso, foram determinadas as funções da interface e os demais conteúdos necessários.

Para maior inserção do usuário no processo, foi criado um protocolo de entrevista e um teste de usabilidade, que serão melhor abordados no item X. Esse teste teve como objetivo avaliar se o usuário era capaz de realizar cinco ações determinadas pela equipe, além de permitir com que fossem identificados outros problemas na interface que poderiam ser corrigidos nos níveis superiores.

Escopo:

nessa fase, o objetivo foi a definição das ferramentas e funcionalidades que estão presentes no aplicativo e os demais componentes da interface, ou seja, o que deveria estar ou não presente. Surgiram aqui outras formas de organizar as funções e o conteúdo. Por exemplo, a equipe constatou que a home (tela inicial) possuía 13 ícones, que levavam a 13 funções, além do menu sanduíche, presente no menu superior fixo, e que algumas dessas funções faziam parte de categorias semelhantes.

6

Funções da Home, na ordem Apresentada:

No Menu Superior:

(1) Fatura digital (2) Desligamentos (3) Informar falta de luz (4) Consultar débitos (5) Consultar histórico (6) Alterar vencimento (7) Informar autoleitura (8) Solicitar religação (9) Iluminação pública (10) Locais de atendimento (11) Simulador de consumo (12) Ouvidoria (13) Débito automático

(1) Título da sessão (2) Perfil (3) Adicionar cliente (4) Informações sobre a unidade (5) Alterar dados (6) Alterar lembrete (de senha) (7) Alterar senha (8) Sobre

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

Dessa forma, foi refeita a forma e a organização das funções e ferramentas, além de mudar a localização de alguns conteúdos. Aqui, também foram inseridas as novas funções propostas pela equipe.

As treze funções da tela inicial passaram a ser organizadas em 6 grupos, por semelhança:

(1) Pagamentos (2) Ligamento/desligamento (3) Fale Conosco (4) Minha casa (5) Emergência (6) Perfil (7) Notificações Estrutura:

Essa etapa aborda a arquitetura da informação da interface, ou seja, como as informações estão organizadas. Foi identificado, conforme SPENCER (2011) ((p. 192 A Practical Guide to Information Architecture), que a arquitetura atual da interface é hierárquica estrita e de cima pra baixo. A arborescência do aplicativo é larga e rasa, bastando poucos cliques para chegar ao ponto mais distante da interface, mas havendo um excesso de funções que podem confundir ou dificultar o uso por parte do usuário.

Com a identificação da arquitetura antiga e conforme a reorganização (de funções e conteúdos) proposta no escopo, a equipe desenvolveu uma nova arquitetura de informação, ainda estrita e de cima para baixo, mas com uma arborescência mais curta e profunda. Além disso, outra alteração na arquitetura foi a adição da tab bar (barra de abas), na zona de “rodapé” do aplicativo, para permitir a navegação rápida do usuário pelas principais funções do aplicativo. Também, foi retirado o menu sanduíche, já que, com base no teste de usabilidade, os usuários não identificavam imediatamente as informações que ele continha.

>No menu superior fixo: O título da sessão Acesso direto ao “perfil”, no qual pode ser feita a alteração de dados cadastrais, das unidades consumidoras e da “família”. >Na tab bar: Acesso direto à home; Acesso às notificações (nova função); Acesso às emergências (para informar falta de luz [na rua ou em casa], denunciar crime [gateamento, furto de fio ou relógio] ou relatar falta de segurança [cabeamento exposto, etc]). >Na home: no lugar das 13 funções, agora são 4; (1) Pagamentos (acesso à fatura/2ª via, débitos, histórico e mudança de vencimento da conta); (2) Ligamento/desligamento (para pedir ligamento ou desligamento de unidade consumidora) (3) Fale Conosco (atendimento ao cliente [SAC], ouvidoria, FAQ e Infos sobre o APP) (4) Minha casa (reposicionamento e novas funções - para controle SMART e autoleitura)

Dessa forma, as funções do aplicativo agrupadas em 6 grupos foram organizadas na arquitetura da seguinte forma:

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

7

Esqueleto:

A equipe traduziu a arquitetura da informação em wireframes, definindo uma nova malha de diagramação, proporção e localização dos componentes da interface (funções e conteúdos). Os wireframes desenvolvidos já apresentam a nova tab bar e a reestruturação do menu fixo superior do aplicativo, além de o acesso às principais funções do aplicativo ter sido centralizada na home em 4 botões de acesso.

Superfície:

Na etapa final de superfície, foi utilizada uma paleta de cores para o aplicativo com base no Manual de Marca da Copel. Para os ícones, a equipe usou o conjunto de Material Design, do Sistema Android. A fonte definida para o material foi a Avenir Next Pro, por ser uma família com vários pesos e boa leitura.

2.2 Análise Descritiva do Aplicativo com base em Garrett >2.2.1 Estratégia:

Estratégia (Necessidades do usuário x objetivos do produto) Identificação do Website: App da Copel Gênero do aplicativo: consulta e prestação de serviços; Objetivo(s) do aplicativo: Auxiliar o cliente da Copel a utilizar os serviços oferecidos pela instituição; Pagar contas/consultas de débitos, solucionar problemas, assistência técnica e informacional, comunicar falta de luz/iluminação urbana; Otimizar o atendimento e aproximar a empresa da rotina do usuário (por se tratar de um smartphone); Público alvo: Indivíduos atendidos pela Copel (majoritariamente no Paraná), com ensino médio completo e mais de 18 anos, que são titulares da unidade energética e que se utilizam de smartphones na rotina. > 2.2.2 Escopo: (especificações funcionais x requisitos do sistema) Ferramenta que o usuário pode realizar no aplicativo: Menu sanduíche: Alteração de dados; Alteração de lembrete; Alteração de senha; Sobre; Dados do cliente; Adição de cliente; Informações da unidade 8

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

Tela inicial: Cadastro/login; Pedir fatura digital; Consultar fatura; Débitos/pagamentos; Histórico; Alterar vencimento da fatura; Religação da unidade; Desligamento de unidade; Informar falta de luz na unidade; Auto-leitura; Iluminação pública; Simulação de consumo (HIPERLINK) Ouvidoria (HIPERLINK) Débito automático; Locais de atendimento; Ajuda/suporte ao usuário sobre o aplicativo: ausente | Não tem walkthrough Possibilidade de customização: Presente para alteração de informação (nome da casa).

Ausente em customização da interface.

Adaptatividade: Presença: ausente.

Estágio: ausente; Forma: ausente; Gestão de erros: Status: presente*; Tipo: MISTO. Predominantemente de advertência. Correção pelo usuário. >2.2.3 Estrutura (arquitetura da informação x design de interação) Modelo conceitual: mais próximo de metáfora e convenção.

Metáfora: informar falta de luz (balão de fala); consulta (lupa); informar auto-leitura (lupa); locais de atendimento (bullet de local); ouvidoria (ouvido); Convenção: menu sanduíche para perfil. Senha (cadeado); Nível de arborescência: (largo e raso) Largura: possui uma série de ramificações (funções); Profundidade: raso (poucos cliques até a conclusão da ação/ponto mais distante da interface); Níveis hierárquicos por página: Menu sanduíche (hierarquia: nome > unidade energética > funções) Home: não possui hierarquia de funções definida; Arquitetura da informação: Tipo: hierárquica estrita (de cima pra baixo) (p. 192 A Practical Guide to Information Architecture) com arborescência larga e rasa.

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

9

Estilo de diálogo predominante: Tipo: por menu e por manipulação direta. Também ocorre por preenchimento de formulário (inserir e-mail, CEP, unidade consumidora, etc). >2.2.4 Esqueleto (navegação x interface x design da informação) Níveis de navegação: global / local / contextual / suplementar / avanço e recuo linear / retronavegação) Rolagem: Status: Presente apenas na tela inicial e menu.

Orientação ortogonal: Horizontal no menu. E nos itens é vertical. Área: Rolagem total, exceto por cabeçalho fixo.

Janelas: Uso de janelas: ausente.

Sobreposição: parcial (menu arrasta); Malha de diagramação: Status: elementos não respeitam possível malha.

Variação: Não há.

Quantidade de malhas: Malha única Desenhar as malhas de diagramação: Apresentação das áreas clicáveis: Status: mista (ícone acompanhado de texto); botão; Indicadores de localização: Status: Título no cabeçalho.

Feedback: Status: presente*; Tipo: apenas de andamento, mas não informa o progresso da ação. Não há feedback de conclusão da ação.

Feedback ao acionar área clicável: ausente; Elementos esquemáticos utilizados: Tipos: caixa, linhas, barras.

Ferramenta(s) de auxílio à navegação: Status: ausente.

Quantidade e especificação das áreas funcionais em cada malha de diagramação*

10

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

>2.2.5 Superfície (aparência) Elementos tipográficos utilizados: Carcterísticas: 1 família tipográfica (sem serifa). Similar à roboto. Sem variação de peso. Variação de tamanho entre títulos, texto corrido e menu.

Manutenção da identidade visual do app: Status: presente* Recurso(s): Cor de menu e ícones, Paleta de cores:

Utiliza um Laranja próximo ao institucional da Copel, combinado com o cinza principalmente.

Nos ícones, as cores presentes variam do azul, amarelo, verde, laranja, roxo e vermelho.

Reforço não textual à localização: Status: presente em poucas telas.

Tipo: mudança de título no cabeçalho e o fundo (localização).

Apresentação dos auxílios à identificação das áreas clicáveis: Status: ausente.

Sinalização de área clicável já visitada: Status: ausente.

Interatividade de objeto: Tipo: Linear independente.

Recursos audiovisuais utilizados: Tipo: Imagem (estática), ícones e texto.

Características das imagens utilizadas: Tipo: Vetoriais >2.2.6 Pós-interação: Avaliação pelo usuário: não possui, ocorre pela Google Store ou pela Apple Store.

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

11

2.3 Pesquisa de similares Durante a execução do trabalho, não foi realizada uma análise de similares profunda. Contudo, elencaram-se algumas das maiores empresas de distribuição de energia elétrica no país, para verificar se elas tinham algum tipo de aplicativo disponível para download na apple store ou na play store.

As empresas listadas foram: Copel, Energisa, Celesc, Coelce, Cemar, Caiuá, Celpe, Cplf e Enersul.

Com base em suas avaliações na apple store, os aplicativos podem ser rankeados da seguinte forma:

Na sequência os aplicativos foram testados brevemente, a fim de elencar quais funções eles faziam e como. Percebeu-se que todos eles tinham uma coisa em comum, todos serviam para pedir a segunda via da conta de luz, sendo esta a principal função.

Além disso, uma prática interessante do aplicativo da CPFL, é um breve tutorial que surge na tela, durante o primeiro uso, sendo uma ideia interessante para implementar no redesign.

12

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

2.4 Heurísticas utilizadas Com base na análise feita utilizando o esquema proposto por Garret, diversos problemas foram detectados, problemas relacionados a heurísticas.

Nesse contexto, selecionaram-se 2 autores que descrevem heurísticas com potencial de solucionar alguns desses problemas e otimizar o aplicativo. Abaixo, segue uma tabela com esses autores e as heurísticas escolhidas: Fleming (1998): - Proporcionar feedback; - Aparecer em contexto (orientação local e global); - Utilizar rótulos claros e inteligíveis para os links;

Cato (2001): - Informações diretamente relacionadas devem aparecer na mesma tela e não em telas diferentes conectadas por links; - Torne as relações entre as informações (estrutura do sistema) claras; - O usuário deve sempre saber onde se encontra e como prosseguir; - O significado do rótulo dos links deve ser claro, funcionar como uma sinalização; - Posicione botões de ação próximos aos itens a que se relacionam; - Se optar por disponibilizar ajuda, torne óbvio como acessá-la, responda as prováveis questões do usuário e forneça mais informação do que está disponível na interface.

2.5 Planejamento O modelo de desenvolvimento do aplicativo não foi comum ao resto da sala. Definiu-se um cronograma adequado a metodologia das ‘’JAMS’’ como Hackatons, Global Game Jam e Service Jam. Durante a maior parte do tempo disponível, recolheu-se informações sobre o problema, desde questões da atualidade como roubo de cabos e relógios de sistemas elétricos, até a pesquisa de outros aplicativos relacionados a energia elétrica.

Depois da análise baseada em Garret, estruturou-se o protocolo de validação de usabilidade e uma vez que os dados foram recolhidos e compilados, o redesign foi desenvolvido conjuntamente, em uma reunião de imersão.

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

13

Desenvolvimento

3

3.1 Aplicação da Metodologia O capítulo anterior aborda toda a parte de análises e heurísticas que servirá tanto para definir os requisitos, quanto para elaborar o protocolo de usabilidade, levantar mais informações e diagnosticar possíveis problemas na interface do aplicativo. Assim, antes de utilizar-se do esquema de Garret para projetar o redesign do aplicativo de fato, a seguinte parte do desenvolvimento consiste na última etapa informacional do projeto, que em conjunto com as outras questões elencadas, norteará o projeto. Nesta etapa um diagnóstico de problemas será feito, e na sequência o resto com usuários.

3.2 Diagnóstico de problemas encontrados O capítulo anterior aborda toda a parte de análises e heurísticas que servirá tanto para definir os requisitos, quanto para elaborar o protocolo de usabilidade, levantar mais informações e diagnosticar possíveis problemas na interface do aplicativo. Assim, antes de utilizar-se do esquema de Garret para projetar o redesign do aplicativo de fato, a seguinte parte do desenvolvimento consiste na última etapa informacional do projeto, que em conjunto com as outras questões elencadas, norteará o projeto. Nesta etapa um diagnóstico de problemas será feito, e na sequência o resto com usuários.

Tela de Carregamento não indica status nem é responsiva;

14

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

Pop Up de cadastro é confuso;

Cadastro Depende do Muitas funções numa pré-cadastro feito no mesma página, ideal site da Copel seria +- 7

Texto confuso, passa a ideia errada

Ícone não remete a função de redefinir lembrete de SENHA

Ícone parece clicável mas na realidade não faz nada.

Funções apenas Informaticas ou Hiperlink para o site da Copel

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

15

Para quase todas as funções aparece esse balão de solicitação problematico

Aparentemente só tem como tirar a fatura digital em pdf por e-mail 16

Mas no Histórico é possível.

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

3.3 Teste de usabilidade e entrevista com os usuários O primeiro passo, foi definir o público-alvo para os testes de usabilidade. O aplicativo da copel é destinado para pessoas bastante diversas, desde jovens até adultos, contanto que sejam os responsáveis pelas contas de luz de suas casas e façam uso de smartphones. Inicialmente o teste seria feito com universitários, por ser um público mais próximo da pesquisa.

teste demos os dados de uma conta existente para avaliar o cadastro.

Para todas essas atividades, o objetivo era mensurar a eficiência e a eficácia da interface. Portanto, estipulou-se um tempo ideal para a execução de cada tarefa, além de verificar se o usuário conseguiu completar a mesma.

Na prática, alteramos este público para adultos com ensino superior completo, uma vez que encontrar universitários que pagassem suas contas de luz estava sendo complicado. A maioria dos abordados ou vivia com os pais, ou em pensões, nesse sentido, não tinha a preocupação com a gestão de luz em suas residências.

No teste, a ideia era observar expressões faciais, comentários e expressões corporais que o usuário fazia, com o objetivo de entender o nível de engajamento e motivação do mesmo, com o aplicativo. A próxima etapa, consistia na avaliação de elementos específicos do aplicativo. Cores, ícones e satisfação deveriam ser mensuradas a partir de um escala de 1 a 5. No final um espaço era aberto ao usuário para ele fazer Para o teste, uma série de documentos foram organi- comentários ou deixar sugestões. zados: Roteiro Além das observações no protocolo, todas as atividaProtocolo de Entrevista des foram filmadas, por celular e câmera digital. Por Termo de Consentimento isso, os participantes deveriam preencher um termo de consentimento, para garantir a sua integridade e A primeira coisa feita, foi escolher quais tarefas permitir que os testes fossem utilizados para a execuseriam avaliadas, ou seja quais eram as funções ção deste projeto. mais importantes e essenciais do aplicativo. Assim, decidiu-se testar a visualização da fatura digital, a O modelo e os resultados do protocolo elaborado, consulta do histórico de contas, o cadastro, o logassim como os termos de consentimento estão em -out e a procura por unidades de atendimentos mais anexo nas últimas páginas deste documento. próximas.

Uma das limitações do aplicativo, é que para fazer o cadastro, é necessário ter uma conta feita já no site da copel, então para facilitar e agilizar a validação, no

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

17

3.4 Discussão de resultados Dando sequência aos testes, os dados foram compilados e chegou-se aos seguintes resultados. Nos gráficos abaixo, o círculo laranja interno corresponde a eficácia que a interface apresentou na atividade, ou seja, se os usuários conseguiram, ou não conseguiram realizá-la. O círculo externo, corresponde a Eficiência, ou seja, ao tempo em que a atividade foi executada.

18

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

Com relação ao cadastro, os resultados são satisfatórios, apenas um participante não conseguiu, pois recusou o pop-up de cadastro que aparece na tela, e depois teve dificuldade em encontrar essa função dentro do menu sanduíche.

O primeiro resultado alarmante é o de que a função principal do aplicativo, não cumpre muito bem sua função. Apenas um participante conseguiu o pdf da fatura anterior, todos clicaram no ícone de fatura digital, mas como diagnosticado anteriormente, esse ícone só direciona a fatura para o e-mail cadastrado, aparentemente não sendo possível ter acesso a ela diretamente pelo aplicativo. A maior preocupação é a eficiência desta função, nenhum usuário conseguiu achar a fatura no tempo estipulado. Muito disso se deve ao design do menu principal, A quantidade elevada de ícones de ação, que coloca praticamente todas as funções numa tela só, deixava o usuário procurando por um tempo até achar o ícone que acreditava ser da função procurada. Além disso, durante o teste foi possível observar que alguns usuários clicaram na marca da copel, no canto superior direito, e no escrito copel da tela inicial. A pior parte é que no android este ícone quando pressionado, esboça um feedback de reação, o fundo dele fica levemente escuro. Possivelmente ele iria servir para algo, mas no desenvolvimento do aplicativo acabou sendo deixado de lado.

Sobre o histórico, a sua funcionalidade é intuitiva, o problema que afetou o desempenho dos participantes nessa etapa, foi que o servidor não funcionou, assim não foi possível ter acesso às faturas antigas. Um problema similar ocorreu com as unidades de atendimento, o servidor não carregava, as vezes nem mesmo o mapa do país, muito menos as unidades, afetando tanto a eficácia quanto a eficiência.

A dúvida que surge nesse item também, diz respeito a proximidade, o aplicativo não faz o cálculo aparente das unidades mais próximas, você o usuário acaba tendo que definir isso, olhando no mapa e apostando na sorte.

Por fim, o Log-Out é uma das questões mais confusas do aplicativo, desde sua rotulagem, até seu ícone, pois ‘’cancelar conta’’ pode dar a entender que você vai cancelar a conta da pessoa da copel, no sentido de cancelar os serviços e acabar com a eletricidade da conta, ao invés de fazer um simples.O reflexo disso estão nos resultados, em que apenas um participante efetuou a tarefa no tempo certo, e 2 pessoas não conseguiriam sair da conta.

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

19

A segunda parte do teste, foi a avaliação de atributos gerais como o gráfico acima mostra:

Os resultados desta parte foram curiosos, pois na perspectiva de designer, os primeiros elementos que já traziam incômodo na interface foram todos os ícones e as cores escolhidas. A perspectiva era de que esses elementos também seriam apontados pelo público como um problema, mas no geral receberam um feedback regular, não sendo o maior problema do aplicativo.

A maioria dos usuários recomendaria o aplicativo para outras pessoas, um dos participantes não recomendaria pois achou um tanto confuso, mas todos reconhecem o valor e potencial facilitador do mesmo. Assim conclui-se o teste com usuários, com a percepção de importância do aplicativo, e problemas para serem solucionados na interface.

Sobre as cores, por suas características pouco saturadas, agradaram ao público. Os ícones receberam críticas, no sentido de apenas serem compreendidos por conta da legenda abaixo deles. A função da fatura digital foi menos reconhecida, com uma média de 3, aponta que precisa de melhorias, uma vez que é mais difícil de compreendê-la do que o aplicativo como um todo.

20

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

3.5 Requisitos - Tornar o Menu de Configurações mais intuitivo - Corrigir o ‘’Log-Out’’ - Reorganizar todas as funções, unindo funções similares. Ou seja refazer a arquitetura da informação do aplicativo.

- Facilitar o acesso ao PDF da Fatura Digital - Reduzir número de Ícones na Tela Inicial - Manter cores pouco saturadas - Criar um passo-a-passo, Tutorial para a primeiro acesso - Cadastro Copel direto no aplicativo - Rever nomeclaturas - Otimizar o servidor - Retirar marca que parece interação - Ícones com Legenda - Evidenciar o cadastro já no início da navegação - Incluir tutorial de funcionamento no primeiro uso do aplicativo 3.6 O Processo > revisão de estratégia e escopo O objetivo do novo aplicativo da Copel, é ser mais do que um meio de conseguir a segunda via da fatura de luz. Sua versão final é o aplicativo completo de soluções relacionadas a energia elétrica para seus imóveis, envolvendo gestão, controle, ecologia, inteligência, segurança e economia.

Num processo de brainstorming, as seguintes funções surgiram:

- Central de Notificações

- Denúncia de roubo de fiação de cobre, ou relógio do sistema elétrico;

- Denúncia de Gato de energia elétrica;

- SmartHome, o aplicativo conectado com toda rede elétrica da sua casa, para dar

funções de controle, estatísticas e promover economia de luz.

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

21

Na central de notificações, será possível ver os principais avisos com relação a situação das unidades consumidoras cadastradas, oferecendo lembretes de vencimento de fatura, ou questões gerais como falta de luz em algum bairro.

O funcionamento das denúncias é bastante similar, consiste no preenchimento de um pequeno formulário com dados pertinentes, que vão gerar um boletim de ocorrência automaticamente, além do envio de uma foto para registrar o ocorrido e dar sequência para a resolução do problema.

A SmartHome é uma função um tanto mais utópica, mas já existem tecnologias similares no mercado. Na configuração inicial, o celular seria conectado a uma tomada smart, que enviaria todas as informações de consumo e funcionamento de todos os eletrodomésticos da casa. Além disso, os eletrodomésticos seriam cadastrados por cômodos, assim, seria possível ver quais cômodos gastam mais luz e tomar medidas a respeito.

22

A partir da Inteligência Artificial, a SmartHome faria leitura de que dispositivos estão consumindo mais energia que o normal sugerindo a substituição do mesmo, ou alteração no padrão de uso, para que seja mais econômico e ecológico. Também, seria possível controlar esses dispositivos elétricos, ligando, desligando, ou até mesmo programando um horário para a luz do seu quarto ligar em conjunto com o despertador do residente, fazendo-o acordar.

O foco dessa função é controle e acompanhamento, depois de um mês de ativação, ela seria capaz de fazer previsões precisas de quanto será a conta de luz. Por fim, os outros residentes da casa também poderiam se cadastrar no aplicativo como membros da unidade consumidora para desfrutar do controle da mesma.

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

> Arquitetura da Informação Seguindo Garret, a etapa do momento é a de estrutura, o problema a se resolver é a arborização do aplicativo. Na imagem abaixo, um pequeno esquema foi feito para representar a arquitetura da informação do aplicativo atual.

Nela, já é possível perceber que o aplicativo tem uma profundidade muito rasa, sendo bastante aberto, por ter praticamente todas as suas funções expostas diretamente na tela inicial.

Para otimizar, todas as funções foram reclassificadas de acordo com suas semelhanças, surgindo o novo modelo de arquitetura da informação. A primeira grande mudança é na tela de login, o usuário para utilizar as funções do aplicativo terá de se cadastrar.

Em caso de emergências, ele não precisará fazer o login, para agilizar o processo.

Uma vez que todas as funções foram agrupadas, a nova arquitetura foi estruturada, como a imagem abaixo mostra o antes e depois.

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

23

Por fim, a versão completa da arquitetura da informação, com todas as funcionalidades presentes e agrupadas de maneira lógica, tomou a forma abaixo:

24

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

UFPR | Design Grรกfico - Projeto Web | Aurora & Marcela

25

26

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

> Wireframes A consolidação do esqueleto do aplicativo, se deu pela construção de seus wireframes. Ele foi montado apenas com grids e linhas. O resultado final já deu uma ideia melhor de como a interface ficaria visualmente.

CONTROLE SMART™

MEU PERFIL

UNIDADE DE CONSUMO: CAS A AURORA CRISTINA CPF: 405.089.890-70

UNIDADE: 80230-090

CONTATO: Tel.: (41) 99234-1224 e-mail: auroracvs@gmail.com

NOTIFICAÇÕES

ELETRODOMÉSTICOS

DESLOGAR

CÕMODOS

GERENCIAR UNI. DE CONSUMO

SIMULADOR

GRUPO FAMILIAR

INÍCIO

EMERGÊNCIA

NOTIFICAÇÕES

LIGAMENTO/DESLIGAMENTO

INÍCIO

EMERGÊNCIA

FALE CONOSCO – SAC

LIGAMENTO

DESLIGAMENTO PROTOCOLO EM ANDAMENTO

Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci

NOTIFICAÇÕES

INÍCIO

EMERGÊNCIA

ATENDIMENTOO

UVIDORIA

FAQ

NOTIFICAÇÕES

SOBRE O APP

INÍCIO

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

EMERGÊNCIA

27

> Estilo Na etapa do estilo, 3 elementos principais se desenvolveram: a tipografia, os ícones e as cores.

outras fontes desde que tenham características similares a Univers.

Inicialmente o manual da marca da copel, disponível no site institucional da empresa foi consultado. A tipografia institucional deles é a Univers, porém é permitido fazer o uso de

Avenir Next Pro Medium

Assim foi escolhida a Avenir Next Pro, uma família de fontes sem serifa, contemporâneas, com diversas variações de peso para trabalhar a hierarquia e ter boa visualização em dispositivos eletrônicos

AaBb

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrst uv wxyz 0123456789()[]?!”’.,;<>

AaBb

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuv wx yz 0123456789()[]?!”’.,;<>

Avenir Next Pro Bold

O ícone do aplicativo foi alterado, para uma cor mais sútil. Com relação aos ícones utilizou-se o material design.

ÍCONE:

ÍCONES: MATERIAL DESIGN

28

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

Concluindo, as cores tambĂŠm foram planejadas de acordo com o manual de marca da copel. AlĂŠm do laranja institucional, outros tons de cinza, laranja, verde e azul integraram a paleta de cores pouco saturada.

UFPR | Design GrĂĄfico - Projeto Web | Aurora & Marcela

29

> Telas Por fim, o resultado alcançado segue abaixo: Um layout com menu inferior fixo, para emergências, notificações e tela inicial, de modo a facilitar a navegação. Uma tela inicial simples, com ícones em destaque e cores sugestivas, de modo a agrupar bem todas as funções:

30

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

UFPR | Design Grรกfico - Projeto Web | Aurora & Marcela

31

32

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

4

Conclusão 4.1 Comparação do Layout

Com o intuito de mostrar o impacto do redesign, abaixo seguem algumas comparações das telas em suas versões originais do aplicativo, e seus redesigns.

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

33

4.2 Reflexões

Durante o desenvolvimento do projeto foi interessante perceber como a perspectiva do designer se difere do público. Logicamente, sempre existem coincidências, mas a quantidade de informações e recomendações que otimizam o projeto oriundas dessa integração do público no processo do design, é uma das coisas que define a nossa profissão e que nos torna capazes de gerenciar equipes multidisciplinares e resolva ‘’wicked problems’’ bem como Buchanan (1992) descreve.

O resultado desse projeto, não é o resultado final do redesign do aplicativo, entende-se que o processo do desenvolvimento desse produto, seja iterativo, então, para que ele chegue em sua versão final, não bastaria apenas validar a alternativa criada, mas também seriam necessários mais testes de usabilidade com as outras faixas do público-alvo deste aplicativo, que é bastante abrangente.

Como equipe, ficamos satisfeitas na transformação que proporcionamos no serviço, estamos animadas para dar continuidade ao projeto pelo menos para fins de portfólio. Foi um trabalho mais complexo do que parecia, e extremamente importante para entender todas as etapas que estão por trás ( ou que deveriam estar) do desenvolvimento para web.

34

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

5

Apêndice

UFPR | Design Gráfico - Projeto Web | Aurora & Marcela

35

36

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

UFPR | Design Grรกfico - Projeto Web | Aurora & Marcela

37

38

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

UFPR | Design Grรกfico - Projeto Web | Aurora & Marcela

39

40

Redesin do Aplicativo da COPEL | SOLUÇÕES EM ENERGIA

UFPR | Design Grรกfico - Projeto Web | Aurora & Marcela

41