UI/UX
Design
SAPO
O SAPO nasceu da necessidade de automatizar e organizar processos operacionais empresariais.
O projeto foi iniciado pelo gestor de operações que desenhou todo o fluxo de venda da empresa que começa no e-commerce B2B gerando uma proposta comercial, e depois um pedido de venda, que por fim, gera uma venda e a passagem de informações para o departamento de serviços.
O trabalho foi pensar em uma ferramenta Web que realiza a automatização deste fluxo e seja intuitiva para os usuários.
Cliente
A empresa SilliS que entre seus projetos trabalha com a venda B2B de produtos de CFTV e Rede, além de serviços atrelados a eles.
Tarefa
Desenvolver o Projeto de interface da Ferramenta que automatiza os processos operacionais com base no fluxo desenvolvido pelo gestor de operações buscando facilitar o entendimento do usuário sobre a mesma .
Para trabalhar no desenvolvimento da ferramenta precisei entender de forma global todos os fluxos de operações da empresa e as dores de cada departamento.
Para isso, realizei uma pesquisa qualitativa com alguns colaboradores de cada departamento para entender melhor suas vivências e necessidades do dia-a-dia.
Em conjunto com o gestor de operações, foi levantado as informações processuais a serem destacadas em cada etapa do fluxo.
Principais desafios
Automatizar documentos
Migrar documentações para uma api dentro de um cloud possibilitando a ferramenta a gerencia-los.
Histórico empresarial
Desenvolver um histórico que possibilite que o usuário da etapa final possa entender todo o trajeto do cliente.
Delimitar informações por departamento
Delimitar as informações por departamento de forma que facilite cada usuário obtelas de forma ágil.
Busca de dados eficaz
O usuário poderá encontrar as informações que precisa com a maior agilidade possível.
Unificar base de clientes
Unificar o cadastro de clientes organizacionais e pessoas vinculadas a esses clientes.
Primeira especificação do projeto
Tipografia
Segoe UI
A Segoe UI é um estilo tipográfico sem serifa que possuí diversos pesos podendo serem empregados por prioridade de conteúdo.
Desta forma, a tipografia destaca conteúdos mais importantes em seu maior peso, e harmoniza dados de menor importância que precisam serem apresentados na interface.
Paleta de Cores da aplicação
Off-White #f7f7f7
O Off-White é a cor de fundo da ferramenta, por destacar diversos conteúdos e ser uma ferramenta de uso contínuo foi escolhido tons neutros como principais para trazer harmonia e leitura nos olhos dos usuários.
Cinza Claro #f5f5f5
O Cinza claro é utilizado em elementos que devem se diferenciar do Off-White, porém, não precisam de muito destaque na ferramenta.
Primárias
Cinza Escuro #494949
O Cinza escuro é utilizado como um elemento Neutro e de boa leitura quando aplicado nas cores anteriores, por isso, ele é utilizado majoritariamente nas tipografias aplicadas na ferramenta e em elementos que necessitam de grande destaque.
Secundárias
Azul #185abc
O Azul é uma cor secundária utilizada para destacar informações padrões da ferramenta que se aplicam a todos os usuários e departamentos. Como relatórios, e a aba de organizações e pessoas.
Azul Claro #16c0e4
O Azul Claro trabalha em conjunto com a cor Azul, destacando informações padrões ferramentas, com o diferencial do seu tom aberto que é mais amigável.
Verde Claro #4dff7b
O verde claro é raramente utilizado na ferramenta, esse tom foi escolhido para trabalhar em gráficos e locais onde o azul e o cinza escuro não podem ser aplicados.
Paleta de Cores dos Departamentos
Para cada departamento foi escolhida uma cor principal a ser trabalhada com foco em usuários que possuam acesso a diversos departamentos e precisam diferencia-los com maior facilidade.
Para isso, as cores foram pensadas para serem bem distintas entre os departamentos e se destacarem em alguns elementos visuais da interface neutra.
Verde Claro #29bf50 Departamento de Propostas
Vermelho #ec4151 Departamento de Vendas
Violeta #9a41ec
Departamento de Pedidos
Laranja #ff9425
Departamento de Serviços
Wireframe de Baixa Fidelidade
Este protótipo foi desenhado em conjunto com o gestor de operações para definir as telas padrões.
Telas
Após a aprovação da pesquisa e das decisões gráficas o próximo passo foi desenvolver as telas.
Esta ferramenta é utilizada somente para uso organizacional, por tanto, foi decidido focar os esforços em dimensões Desktop.
Home / Relatórios
Tela principal
(departamento de propostas)
Tela de Edição
(departamento de pedidos)
Tela principal
(departamento de propostas)
Resultados
3 Minutos
Com a automatização foi possível gerar a documentação detalhada de uma proposta comercial em 3 minutos e guarda-la no cloud da empresa.
Serviços
Com os processos automatizados, de acordo com os usuários do departamento de serviços foi destacado: "histórico do cliente nos auxiliou a entender de forma global todas as providências tomadas, e evitou alguns ruídos na comunicação".
Relatórios
Com os processos automatizados foi possível entender as principais dores e gargalos departamentais.
