Projeto
Nova Feature
Data
Agosto • 2021
UX • UI

Gerenciamento de tanques para frotas

Gerenciamento de tanques para frotas

Atenção!

Por motivos contratuais, a empresa na qual prestei este serviço foi mantida em sigilo.
Nessa apresentação veremos a solução aplicada em uma empresa fictícia.

Sobre o projeto

Trata-se de uma implementação de nova feature para a plataforma de uma empresa com foco em gestão de frotas integradas em BigData, na qual fornece aos motoristas informações relevantes sobre seus veículos, no qual vai desde controle de manutenção, à gastos com combustível. Para esse projeto, fora trabalhado uma solução para que os utilizadores da plataforma possam gerenciar o abastecimento de frotas, oriundo de tanques comprados por eles mesmos.

Sobre o projeto

Trata-se de uma implementação de nova feature para a plataforma de uma empresa com foco em gestão de frotas integradas em BigData, na qual fornece aos motoristas informações relevantes sobre seus veículos, no qual vai desde controle de manutenção, à gastos com combustível. Para esse projeto, fora trabalhado uma solução para que os utilizadores da plataforma possam gerenciar o abastecimento de frotas, oriundo de tanques comprados por eles mesmos.

Sobre o projeto

Trata-se de uma implementação de nova feature para a plataforma de uma empresa com foco em gestão de frotas integradas em BigData, na qual fornece aos motoristas informações relevantes sobre seus veículos, no qual vai desde controle de manutenção, à gastos com combustível. Para esse projeto, fora trabalhado uma solução para que os utilizadores da plataforma possam gerenciar o abastecimento de frotas, oriundo de tanques comprados por eles mesmos.

Problema

Toda a base para a nova feature deveria partir de uma versão legada da plataforma de gestão de frotas, na qual possuia diversas limitações de usabilidade e de design visual.

Problema

Toda a base para a nova feature deveria partir de uma versão legada da plataforma de gestão de frotas, na qual possuia diversas limitações de usabilidade e de design visual.

Problema

Toda a base para a nova feature deveria partir de uma versão legada da plataforma de gestão de frotas, na qual possuia diversas limitações de usabilidade e de design visual.

Objetivo

Com base na versão legada, seria necessário propor uma nova solução, respeitando os padrões visuais da plataforma atual, além de propor uma melhor experiência de uso.

Objetivo

Com base na versão legada, seria necessário propor uma nova solução, respeitando os padrões visuais da plataforma atual, além de propor uma melhor experiência de uso.

Objetivo

Com base na versão legada, seria necessário propor uma nova solução, respeitando os padrões visuais da plataforma atual, além de propor uma melhor experiência de uso.

Plataforma antiga

Inicialmente foi analisada a versão legada da plataforma, afim de entender como funcionava o gerenciamento de tanques.

01

Plataforma antiga

Inicialmente foi analisada a versão legada da plataforma, afim de entender como funcionava o gerenciamento de tanques.

01

Plataforma antiga

Inicialmente foi analisada a versão legada da plataforma, afim de entender como funcionava o gerenciamento de tanques.

01

Compras

Foi informado que o menu Compras está associado ao menu Tanques, no qual o motorista lança as informações relacionadas as compras de litros para determinado tanque. Porém, se nota que não há um controle específico para qual tanque pertence uma determinada compra de litros, logo, se o motorista exportar uma planilha com esses registros, o mesmo não terá de forma visível, qual foi o tanque mais abastecido.

Tanques

No menu Tanques, o motorista nomeia um tanque específico e determina qual sua capacidade de estoque e estoque atual. A saída de litros se dá a partir do menu “Abastecimentos”, no qual o motorista registra se tratou-se de um abastecimento externo (postos parceiros) ou interno (por meio dos tanques) e para qual veículo esse abastecimento foi efetuado (Não trataremos desse menu, pois não foi o foco do projeto). Para a nova feature, foram desconsiderados o item “Bombas” e a função de transferência de litros entre tanques.

Vídeo demonstrativo

Vídeo demonstrativo

O nome da empresa foi ocultado no vídeo
O nome da empresa foi ocultado no vídeo

Solução

Após analisar a plataforma antiga, foram gerados alguns insights iniciais que serviram de norte para os primeiros esboços da solução.

02

Solução

Após analisar a plataforma antiga, foram gerados alguns insights iniciais que serviram de norte para os primeiros esboços da solução.

02

Solução

Após analisar a plataforma antiga, foram gerados alguns insights iniciais que serviram de norte para os primeiros esboços da solução.

02

Insights

Tanques

Os tanques são as principais informações a serem destacadas.

Tanques

A quantidade no estoque deve ser a informação mais evidente.

Tanques

O texto indicador de quantidade de litros deve mudar de cor quando a quantidade de litros estiver próxima do fim ou sem estoque.

Tanques

A ação de “adicionar tanques” deve ser mais intuitiva.

Geral

A seção de compras pode ser complementar a seção de tanques, considerando que o propósito da seção compra é alimentar o estoque de tanques (afim de manter a gestão ativa), seria interessante realizar essas ações em um único “ambiente”.

Userflow

Após insights, dou início ao userflow, afim de entender como os usuários irão percorrer por cada opção presente na solução (desde a criação de tanques à lançamentos de compra de litros).

03

Userflow

Após insights, dou início ao userflow, afim de entender como os usuários irão percorrer por cada opção presente na solução (desde a criação de tanques à lançamentos de compra de litros).

03

Userflow

Após insights, dou início ao userflow, afim de entender como os usuários irão percorrer por cada opção presente na solução (desde a criação de tanques à lançamentos de compra de litros).

03

Wireframes

Uma vez traçados os fluxos no qual os usuários irão percorrer, dou início aos wireframes iniciais da solução. Alguns pontos foram ajustados e aplicados na fase de UI Design, na qual veremos posteriormente.

04

Wireframes

Uma vez traçados os fluxos no qual os usuários irão percorrer, dou início aos wireframes iniciais da solução. Alguns pontos foram ajustados e aplicados na fase de UI Design, na qual veremos posteriormente.

04

Wireframes

Uma vez traçados os fluxos no qual os usuários irão percorrer, dou início aos wireframes iniciais da solução. Alguns pontos foram ajustados e aplicados na fase de UI Design, na qual veremos posteriormente.

04

UI Design

Por fim, após aprovação da base estrutural da solução, é dado início a fase de UI Design, no qual a solução passa a ter uma roupagem mais próxima do que virá a ser quando aplicada na plataforma.

05

UI Design

Por fim, após aprovação da base estrutural da solução, é dado início a fase de UI Design, no qual a solução passa a ter uma roupagem mais próxima do que virá a ser quando aplicada na plataforma.

05

UI Design

Por fim, após aprovação da base estrutural da solução, é dado início a fase de UI Design, no qual a solução passa a ter uma roupagem mais próxima do que virá a ser quando aplicada na plataforma.

05

Primeiro acesso

Ao realizar o primeiro acesso à nova feature, o usuário deverá adicionar um tanque e o histórico de compras de litros para que o gerenciamento se inicie.

Primeiro acesso

Ao realizar o primeiro acesso à nova feature, o usuário deverá adicionar um tanque e o histórico de compras de litros para que o gerenciamento se inicie.

Primeiro acesso

Ao realizar o primeiro acesso à nova feature, o usuário deverá adicionar um tanque e o histórico de compras de litros para que o gerenciamento se inicie.

Adicionando Tanque

Para adicionar um novo tanque, o usuário informa um nome para identificar esse tanque em seus registros, além de sua capacidade máxima de estoque e estoque atual.

Adicionando Tanque

Para adicionar um novo tanque, o usuário informa um nome para identificar esse tanque em seus registros, além de sua capacidade máxima de estoque e estoque atual.

Adicionando Tanque

Para adicionar um novo tanque, o usuário informa um nome para identificar esse tanque em seus registros, além de sua capacidade máxima de estoque e estoque atual.

Registrando uma compra

Para adicionar o registro de uma compra de combustível, o usuário deve informar o número da nota, data da compra, valor pago, quantidade de litros comprados, e por fim, para qual tanque essa compra foi realizada.

Registrando uma compra

Para adicionar o registro de uma compra de combustível, o usuário deve informar o número da nota, data da compra, valor pago, quantidade de litros comprados, e por fim, para qual tanque essa compra foi realizada.

Registrando uma compra

Para adicionar o registro de uma compra de combustível, o usuário deve informar o número da nota, data da compra, valor pago, quantidade de litros comprados, e por fim, para qual tanque essa compra foi realizada.

Status dos tanques

Além de possuir maior destaque em relação aos demais itens da tela, seria necessário trazer ao usuário alguns feedbacks visuais importantes acerca do status de cada tanque adicionado, afim de auxilia-los no gerenciamento.

Status dos tanques

Além de possuir maior destaque em relação aos demais itens da tela, seria necessário trazer ao usuário alguns feedbacks visuais importantes acerca do status de cada tanque adicionado, afim de auxilia-los no gerenciamento.

Status dos tanques

Além de possuir maior destaque em relação aos demais itens da tela, seria necessário trazer ao usuário alguns feedbacks visuais importantes acerca do status de cada tanque adicionado, afim de auxilia-los no gerenciamento.

Padrão

Por padrão, é mostrado o estado atual do estoque e a capacidade máxima.

Próximo de esgotar

Este estado ocorre quando o estoque de um tanque está próximo de esgotar. É acionado um feedback visual de alerta, para que o usuário esteja ciente de que o determinado tanque necessita de um abastecimento.

Esgotado

Este estado ocorre quando o estoque de um tanque está esgotado. Também é acionado um feedback visual, dessa vez com um propósito de alerta diferente ao anterior, para que o usuário esteja ciente de que o determinado tanque esgotou.

Abastecido agora

Este estado ocorre quando um tanque é abastecido. Outro feedback visual é acionado, informando ao usuário sobre o sucesso da determinada ação. Além de informações por padrão, é informado a quantidade de litros adicionados.

Filtros

É possível visualizar apenas determinadas compras, filtrando-as por períodos, por um tanque específico, ou determinando por faixa de preços e quantidade de litros.

Filtros

É possível visualizar apenas determinadas compras, filtrando-as por períodos, por um tanque específico, ou determinando por faixa de preços e quantidade de litros.

Filtros

É possível visualizar apenas determinadas compras, filtrando-as por períodos, por um tanque específico, ou determinando por faixa de preços e quantidade de litros.

Histórico

No histórico, é possível realizar edições nos registros, ou também, a exclusão se necessário (seja exclusão individual ou em massa), além de aumentar o limite de visualização por página.

Histórico

No histórico, é possível realizar edições nos registros, ou também, a exclusão se necessário (seja exclusão individual ou em massa), além de aumentar o limite de visualização por página.

Histórico

No histórico, é possível realizar edições nos registros, ou também, a exclusão se necessário (seja exclusão individual ou em massa), além de aumentar o limite de visualização por página.

Relação de informações e tabela de dados

Para essa solução, foi trazido uma relação total de todas as informações relevantes do histórico, possibilitando ao usuário uma visão panorâmica de todo o seu investimento com tanques. Caso o usuário necessite ter uma relação de apenas um determinado período, preço, quantidade de litros, ou tanque abastecido, a relação se adequa aos filtros estipulados pelo usuário (como visto anteriormente), possibilitando o download da tabela de dados apenas com as informações estipuladas.

Relação de informações e tabela de dados

Para essa solução, foi trazido uma relação total de todas as informações relevantes do histórico, possibilitando ao usuário uma visão panorâmica de todo o seu investimento com tanques. Caso o usuário necessite ter uma relação de apenas um determinado período, preço, quantidade de litros, ou tanque abastecido, a relação se adequa aos filtros estipulados pelo usuário (como visto anteriormente), possibilitando o download da tabela de dados apenas com as informações estipuladas.

Relação de informações e tabela de dados

Para essa solução, foi trazido uma relação total de todas as informações relevantes do histórico, possibilitando ao usuário uma visão panorâmica de todo o seu investimento com tanques. Caso o usuário necessite ter uma relação de apenas um determinado período, preço, quantidade de litros, ou tanque abastecido, a relação se adequa aos filtros estipulados pelo usuário (como visto anteriormente), possibilitando o download da tabela de dados apenas com as informações estipuladas.

Editar e deletar tanque

Se necessário, é permitido ao usuário a edição de um tanque, ou a sua exclusão.

Editar e deletar tanque

Se necessário, é permitido ao usuário a edição de um tanque, ou a sua exclusão.

Editar e deletar tanque

Se necessário, é permitido ao usuário a edição de um tanque, ou a sua exclusão.

Go Live

Aprovada a solução, o projeto foi implementado na plataforma da empresa e já está em funcionamento. Podemos conferir o resultado abaixo.

06

Go Live

Aprovada a solução, o projeto foi implementado na plataforma da empresa e já está em funcionamento. Podemos conferir o resultado abaixo.

06

Go Live

Aprovada a solução, o projeto foi implementado na plataforma da empresa e já está em funcionamento. Podemos conferir o resultado abaixo.

06

Vídeo demonstrativo

Vídeo demonstrativo

O logo da empresa foi ocultado no vídeo
O logo da empresa foi ocultado no vídeo

Considerações

Com essa solução, será possível para os usuários da plataforma gerenciarem seus tanques de uma forma mais inteligente, possuindo informações relevantes a cerca de preços e litros totais investidos, além de saber panorâmicamente, qual o estado atual de estoque de todos os tanques registrados na plataforma.

Considerações

Com essa solução, será possível para os usuários da plataforma gerenciarem seus tanques de uma forma mais inteligente, possuindo informações relevantes a cerca de preços e litros totais investidos, além de saber panorâmicamente, qual o estado atual de estoque de todos os tanques registrados na plataforma.

Considerações

Com essa solução, será possível para os usuários da plataforma gerenciarem seus tanques de uma forma mais inteligente, possuindo informações relevantes a cerca de preços e litros totais investidos, além de saber panorâmicamente, qual o estado atual de estoque de todos os tanques registrados na plataforma.

Obrigado :)
Obrigado :)

Início

Sobre mim

Cases

Dúvidas

Veja meu currículo

Entrar em contato

Menu

Menu