Egis Brasil / SABESP

Processo de UI Design do aplicativo Android da Egis do Brasil para atuação em conjunto com a SABESP.

Atividades

  • Mapeamento de Fluxo do usuário
  • Wireframe e Protótipos de Alta Fidelidade
  • User Interface Design
  • Criação de Style Guide
arte com três smartphones com o aplicativo da Egis

Sobre o projeto

A Egis Brasil – filial da Groupe Egis, da França – é a 8a maior empresa de Engenharia Consultiva nacional, segundo a Revista OE. Ela atende a diversos segmentos da engenharia mundial e, neste caso em particular que vou apresentar, presta serviços de consultoria para a SABESP em algumas cidades do estado de São Paulo.

O fluxo atual consiste em os engenheiros responsáveis chegarem no local da obra, auxiliarem e avaliarem diversos pontos envolvidos na atividade: sinalização na rua; existência de uso satisfatório de EPIs pelos funcionários; qualidade do material e execução da obra são alguns exemplos. A Egis possui um sistema web para reporte das obras que são feitos pelo celular.

O atual problema

O maior problema no uso deste sistema é que ele não é responsivo, sendo necessário o profissional em campo dar zoom na tela e achar os campos para fazerem suas avaliações.

Outra questão é que a interface do sistema não era intuitiva, demandando de sempre ter um profissional mais experiente em campo para fazer treinamentos com os novos engenheiros que iriam atuar na consultoria de obras.

Em algumas telas do sistema sempre haviam informações repetidas ou que, após o tempo, não faziam mais sentido ter. Além de haver conflitos no atual fluxo de aprovação e liberação das avaliações para a central como, por exemplo, os itens que vão ser avaliados irem como insatisfatórios por padrão.

Caso o profissional passasse despercebido na avaliação de um requisito, isso ocasionava dissonância e taxa de erros na avaliação, caso este requisito fosse satisfatório às normas da empresa.


Mapeando e
definindo a solução

Com essas informações, a Spada Global, que presta soluções tecnológicas para a Egis e meu parceiro em projetos de apps, me contactou para trabalharmos neste projeto.

Junto com os stakeholders (engenheiro responsável por treinamentos, outros engenheiros que fazem o processo de avaliação in-loco e a responsável pelo administrativo), trabalhamos em um mapeamento de como o aplicativo deveria ser. Juntamos os pontos válidos no fluxo existente e propondo e validando novos, afim de tornar todo este processo mais intuitivo e simples, visando diminuir problemas entre o pessoal da central e dos engenheiros que vão a campo.

Houve algumas reuniões neste processo afim de validarmos e, somente após a validação com todos os atores do processo, iriamos dar prosseguimento com o protótipo do aplicativo.

Fluxo de criação e avaliação de uma ordem de serviço (LV) no Miro.

Protótipo de Média Fidelidade do app e Validação com os Stakeholders

Após mapearmos e validarmos o fluxo do reporte das LVs (nome dado às avaliações das obras), fizemos o protótipo em média fidelidade afim de validar os campos, interações e processo de cadastramento.

Ideação do fluxo de login e abertura de LV (acompanhamento da obra).
Ideação do cadastro de LV.
Desenho das telas no Adobe XD, separados por fluxos e atividades.

Apresentação, validação e
protótipo em Alta Fidelidade do design do aplicativo Android

Após apresentarmos e os stakeholders validarem a nossa solução, trabalhamos no UI Design do aplicativo, atribuindo as cores da marca, refinando as interações e textos presentes nas telas.

Como o aplicativo vai ser usado só por celulares com sistema Android, abordamos o uso do Material Design no visual e comportamento das interações, com um feeling real de aplicativo Android.

Assim fizemos a interface seguindo os elementos visuais presentes no Material, focando nos componentes que estarão presentes bem como nos termos e textos que estarão nas telas.

Login e cadastro de LV.
Avaliação de uma LV.
Edição de fotos cadastradas durante as avaliações.

Após isso apresentamos novamente para validarmos o design da interface do aplicativo, principalmente a sinalização dos requisitos que foram avaliados e que possuem fotos e comentários do profissional em campo.

Liberação da LV (envio da ordem de serviço e sua avaliação para a central).
Tarefa de relatar observações sobre a obra.

Com o processo do design do aplicativo aprovado e finalizado, foi disponibilizado o protótipo e sua documentação (usando a configuração de exibição para desenvolvedores do Adobe XD) para os programadores desenvolverem o aplicativo Android.

arte com mockups do aplicativo Android da Egis Brasil.