É uma ferramenta fundamental para investigar e julgar infrações e o não cumprimento das obrigações por parte dos servidores.
Eu fazia parte da equipe de desenvolvimento de software da Secretaria de Planejamento e Gestão e liderei o design do Sipad de janeiro a abril de 2015, atuando em conjunto com o gerente de projetos, a analista de requisitos e dois desenvolvedores.
Minhas tarefas
- Entrevistas com usuários
- Levantamento de requisitos do usuário em parceria com a analista de requisitos
- Design de interação e interface (fluxos, wireframes e protótipos estáticos)
- Desenvolvimento front-end (protótipos navegáveis e código html, css e javascript)
Problema
A área de Inquérito adminstrativo disciplinar, detentora do Sipad, percebeu que após uma reestruturação, a ferramenta tinha se tornado seu maior “gargalo”. Por isso, precisava com urgência de uma nova versão para sua ferramenta que havia sido desenvolvida já há alguns anos.
O sistema antigo era baseado em tabelas. Basicamente, a interação com as informações em certas tabelas atualizava informações em outras tabelas. E pra dificultar ainda mais, às vezes as tabelas atualizadas estavam rolagem abaixo, às vezes rolagem acima. O resultado? Estresse, confusão e erros. Fora os bugs.
Desafio
Era preciso reduzir a sobrecarga que a ferramenta colocava nos usuários e lhes permitir que eles se dedicassem a realizar seus trabalhos em vez de perder tempo lidando com uma ferramenta que muitas vezes atrapalhava mais do que ajudava. Precisávamos desenhar e desenvolver um novo sistema, que fosse mais rápido e funcional, que exibisse as informações de maneira clara e fornecesse feedbacks e pistas visuais fáceis de entender.
Alguns fatores eram pontos de atenção e apresentavam um certo risco ou grau de detração para o desenvolvimento deste projeto:
- O governo não tem recursos para aquisição de ferramentas (photoshop, axure e afins)
- Estávamos pela primeira vez trabalhando com metodologia ágil num ambiente em que imperava o método cascata.
- O prazo era pelo menos 30% mais curto do que o se costumava trabalhar na equipe.
No entanto outros fatores compensavam o cenário desfavorável:
- O cliente era a área de negócio e também o usuário e se encontrava a 2 andares acima, facilitando muito o contato e reduzindo o número de steakholders.
- O cliente estava muito aberto, foi compreensivo e atuou em parceria durante todo o projeto.
- A equipe já trabalhava junta há algum tempo, o que facilita a comunicação e o processo como um todo.
- Eu era o designer e também o desenvolvedor front-end, o que me permitia projetar já conhecendo as minúcias da implementação.
Pesquisa
Na reunião de kick-off já pudemos acompanhar de perto como era o dia-a-dia dos usuários, o que acabou se tornando uma entrevista em profundidade e nos forneceu as informações suficientes para um mapa de empatia.
As principais reclamações relatadas foram:
- Usabilidade extremamente complexa, desagradável e ineficiente
- Muitos steps para executar tarefas simples
- Falta de feedback e indicativos do que fazer a seguir
- Lentidão no tempo de resposta
- Bugs
- Falta de edição de informação em lotes
Com o mapa de empatia em mãos sentei com a equipe para definirmos um canvas de proposta de valor. Assim todo mundo teria a exata noção do porquê era necessário desenvolver aquelas soluções.
Desenvolvimento
Nesse ponto eram evidentes as dores dos usuários e a equipe concordou em conceber o Sipad de acordo com algumas premissas:
- Reduzir steps sempre que possível
- Fornecer informações complementares sem tirar o usuário do fluxo da tarefa
- Facilitar a inserção e edição de dados
Com isso definimos os seguintes KPI’s para o produto:
- Tempo médio para realização de tarefas
- Nível de satisfação dos usuários
- Taxa de reclamações
- Tempo médio de resposta a requisições
- Taxa de bugs
Segui para o desenho de fluxos de navegação. A idéia era demonstrar como seria a navegação e a exibição das informações dos processo e após algumas alternativas e conversas com o restante da equipe chegamos a um consenso que foi imediatamente validado com usuários. Após alguns ajustes tínhamos o fluxo definido.
Wireframes
Dei início, a concepção da interface com alguns “rabiscoframes”, e quando senti que estava amadurecendo a ideia, parti para uma ferramenta com o propósito de ter um resultado mais limpo e manipulável.
Conceito Visual
Para o sucesso do novo Sipad a interface tinha que transmitir tudo aquilo que a versão anterior não fazia. Por isso, devia ser amigável, leve, clara e ao mesmo tempo moderna e confiável. Comecei definindo uma paleta de cores alinhada com esses conceitos e com as cores da identidade visual da casa, a Secretaria de Planejamento e Gestão do Governo.
Paleta de Cores
Tipografia
Após alguns testes, a defini como fonte a Titillium Web, por combinar formas geométricas com elementos humanistas evocando modernidade e leveza. Além de ser gratuita e oferecer uma família bastante completa da qual selecionei 3 pesos.
Protótipos
Comecei usando um template de styleguide baseado no bootstrap. Assim pude definir o visual dos componentes separadamente ao mesmo tempo em que podia ver como se comportavam em conjunto numa única tela. Ao atingir o look & feel desejado segui com o desenho das interfaces.
Usando o Invision, montei um protótipo hi-fi onde pude executar alguns testes com usuários. Os principais insights foram:
- A tentativa de simplificar a taxonomia foi rejeitada em alguns casos por mais que parecesse fazer sentido pra nós. Provavelmente porque aquele era uma amostra de usuários muito pequeno, ultra específico e que vivia imerso naquele universo de tarefas, processos e jargões.
- A apresentação das mensagens de feedback causaram impacto gerando reações positivas.
- A ordenação dos processos na lista poderia ser feita não apenas pela data de alteração, mas pela data de instauração do processo.
- A definição dos prazos precisava de um campo de observação.
Interações
Para acabar com a sensação de não saber o que está acontecendo foi fundamental desenvolver um sistema de interações e feedbacks que saltassem aos olhos e não deixassem o usuário com essas dúvidas, por isso tomei o cuidado de escrever mensagens claras, usar cores brilhantes e animações dinâmicas combinadas com símbolos universalmente conhecidos.
Além disso, sempre que necessário lançamos mão do scroll automático, já que o usuário tinha que lidar com muitas listas com grande quantidade de itens.
Resultados
Os resultados foram extremamente satisfatórios. No que tange a experiência, os usuários reportaram os seguintes ganhos:
- Considerável redução no tempo médio para realização de tarefas
- Extrema simplicidade para conclusão das tarefas
- Facilidade de entendimento da interface
- Interface esteticamente agradável e bem organizada
- Velocidade de resposta à requisições satisfatória
Conclusão
Esse projeto foi desafiador e também por isso inspirador. Estar tão perto do usuário/cliente permite agilizar o processo de maneiras impensáveis e fornece insights muito valiosos sobre o design de interação e leva à soluções que normalmente nem seriam cogitadas.
E você o que você acha? Precisa discutir algum ponto ou só trocar uma ideia? Entre em contato 
