Jornada
Análise do projeto
Problemas definidos
UX/UI Design
Entrega de projeto
Jornada
Análise do projeto
Problemas definidos
UX/UIDesign
Entrega de projeto
Objetivo do projeto
Este projeto tem como objetivo principal otimizar a administração de distribuidoras e negócios feitos por B2B.
O projeto conta com três tipos de acesso para os usuários, sendo eles: visão do cliente ao acessar o e-commerce, dashboard administrativo para os distribuidores e um dashboard para os administradores, permitindo que os responsáveis pelo projeto gerenciem o e-commerce e as distribuidoras.
Objetivo do projeto
Este projeto tem como objetivo principal otimizar a administração de distribuidoras e negócios feitos por B2B.
O projeto conta com três tipos de acesso para os usuários, sendo eles: visão do cliente ao acessar o e-commerce, dashboard administrativo para os distribuidores e um dashboard para os administradores, permitindo que os responsáveis pelo projeto gerenciem o e-commerce e as distribuidoras.
Userflow
Para iniciar o projeto, foi necessário criar um user flow devido à grande quantidade de telas e aos diferentes acessos que os usuários teriam. Essa definição da jornada do usuário foi fundamental para o projeto, pois, dessa forma, nossa equipe pode se organizar e definir prioridades.
Userflow
Para iniciar o projeto, foi necessário criar um user flow devido à grande quantidade de telas e aos diferentes acessos que os usuários teriam. Essa definição da jornada do usuário foi fundamental para o projeto, pois, dessa forma, nossa equipe pôde se organizar e definir prioridades.
Style guide
Cores
A paleta de cores foi feita com base na cor roxa como primária para representar modernidade e os tons de azul e rosa para fazer parte das cores secundárias que representariam confiança e seriedade.
Roxo
#4953C2
Ciano
#41A7C2
Azul
#55689F
Rosa
#BB4DD6
Sora
Light
Regular
Medium
Semibold
Bold
Tipografia
A fonte Sora foi escolhida por sua facilidade de leitura e por ser adequada a um e-commerce. Juntamente com o dashboard administrativo, essa tipografia ajudou a criar uma identidade visual que transmite confiança.
Style guide
Cores
Roxo
#4953C2
Ciano
#41A7C2
Azul
#55689F
Rosa
#BB4DD6
A paleta de cores foi feita com base na cor roxa como primária para representar modernidade e os tons de azul escuro e claro para fazer parte das cores secundárias que representariam confiança e seriedade.
Tipografia
Sora
Light
Regular
Medium
Semibold
Bold
A fonte Sora foi escolhida por sua facilidade de leitura e por ser adequada a um e-commerce. Juntamente com o dashboard administrativo, essa tipografia ajudou a criar uma identidade visual que transmite confiança.
Wireframe
Após definir o style guide, comecei a trabalhar nos wireframes de média fidelidade. Essa etapa do projeto foi importante, pois, em colaboração com os desenvolvedores que assumiriam o projeto posteriormente, conseguimos excluir e aprimorar as ideias que tínhamos.
Wireframe
Após definir o style guide, comecei a trabalhar nos wireframes de média fidelidade. Essa etapa do projeto foi importante, pois, em colaboração com os desenvolvedores que assumiriam o projeto posteriormente, conseguimos excluir e aprimorar as ideias que tínhamos.
Alta fidelidade
Após concluir a etapa de wireframe, documentei alguns itens do Design System para serem utilizados na interface, a fim de evitar retrabalho durante o projeto. Com isso, comecei a trabalhar na alta fidelidade do projeto e a focar em erros que poderiam ter passado despercebidos na etapa de wireframe.
Visão e-commerce
O primeiro acesso a ser trabalhado foi o e-commerce. Foi crucial começar por essa parte, pois ela seria fundamental para entendermos quais informações deveriam ser incluídas no dashboard de administração das distribuidoras. A seguir, mostrarei algumas telas importantes dessa etapa:
Alta fidelidade
Após concluir a etapa de wireframe, documentei alguns itens do Design System para serem utilizados na interface, a fim de evitar retrabalho durante o projeto. Com isso, comecei a trabalhar na alta fidelidade do projeto e a focar em erros que poderiam ter passado despercebidos na etapa de wireframe.
Visão distribuidora
Ao concluir as telas do e-commerce, comecei a desenvolver a parte do dashboard dos distribuidores. Focalizei em aprimorar as telas já criadas no wireframe e em melhorar a apresentação das informações importantes, para que os distribuidores não ficassem confusos. As interfaces desenvolvidas são simples, justamente para evitar qualquer dificuldade de entendimento por parte dos distribuidores. A seguir, mostrarei algumas telas importantes dessa etapa:
Tela inicial
A tela do dashboard dos distribuidores foi criada com o objetivo de exibir as informações mais importantes, garantindo que elas estivessem de fácil acesso, para que o distribuidor pudesse localizá-las facilmente.
Patrocinados
A tela de patrocinados foi inspirada nas telas do Google Ads, permitindo a visualização e o gerenciamento de produtos patrocinados. Foi fundamental para o projeto desenvolver uma funcionalidade de gerenciamento de patrocinados, garantindo que os distribuidores tivessem total controle sobre seus produtos.
Compra coletiva
A tela de compra coletiva tem como objetivo principal exibir a quantidade de pessoas participando da oferta, permitindo que os distribuidores avaliem o desempenho da compra coletiva em relação às empresas.
Relatórios e Análises
Para que o distribuidor tenha uma melhor visualização do comparativo entre compra normal e compra coletiva, das vendas e do retorno sobre investimento, foi criada uma página de relatórios e análises exclusiva para essa finalidade.
Visão distribuidora
Ao concluir as telas do e-commerce, comecei a desenvolver a parte do dashboard dos distribuidores. Focalizei em aprimorar as telas já criadas no wireframe e em melhorar a apresentação das informações importantes, para que os distribuidores não ficassem confusos. As interfaces desenvolvidas são simples, justamente para evitar qualquer dificuldade de entendimento por parte dos distribuidores. A seguir, mostrarei algumas telas importantes dessa etapa:
Tela inicial
A tela do dashboard dos distribuidores foi criada com o objetivo de exibir as informações mais importantes, garantindo que elas estivessem de fácil acesso, para que o distribuidor pudesse localizá-las facilmente.
Patrocinados
A tela de patrocinados foi inspirada nas telas do Google Ads, permitindo a visualização e o gerenciamento de produtos patrocinados. Foi fundamental para o projeto desenvolver uma funcionalidade de gerenciamento de patrocinados, garantindo que os distribuidores tivessem total controle sobre seus produtos.
Compra coletiva
A tela de compra coletiva tem como objetivo principal exibir a quantidade de pessoas participando da oferta, permitindo que os distribuidores avaliem o desempenho da compra coletiva em relação às empresas.
Relatórios e Análises
Para que o distribuidor tenha uma melhor visualização do comparativo entre compra normal e compra coletiva, das vendas e do retorno sobre investimento, foi criada uma página de relatórios e análises exclusiva para essa finalidade.
Visão administradores
O acesso dos administradores foi desenvolvido especialmente para que os responsáveis pelo projeto pudessem controlar a segurança da plataforma, além de gerenciar informações sobre as distribuidoras e as empresas usuárias do e-commerce. A seguir, mostrarei algumas telas importantes da última etapa do projeto:
Tela de início
Como padrão em todas as telas deste projeto, a página do dashboard exibe, logo no início, as informações importantes que os administradores não devem demorar a encontrar.
Gestão de usuários - Empresas
Como o objetivo desse acesso é a administração das empresas e distribuidoras, a melhor opção de visualização para essa função foi uma tabela de dashboard padrão, exibindo as informações importantes para os responsáveis pelo projeto.
Visão geral
A tela de visão geral tem como objetivo mostrar o desempenho das distribuidoras no e-commerce, destacando quais estão obtendo mais lucro com as promoções e quais estão ativas nas promoções abertas periodicamente pela administração.
Gerenciamento
Essa tela tem como foco a visualização de gráficos sobre o histórico de ofertas, a performance dos produtos, as vendas e os comparativos de compras.
Visão administradores
O acesso dos administradores foi desenvolvido especialmente para que os responsáveis pelo projeto pudessem controlar a segurança da plataforma, além de gerenciar informações sobre as distribuidoras e as empresas usuárias do e-commerce. A seguir, mostrarei algumas telas importantes da última etapa do projeto:
Tela de início
Para que o distribuidor tenha uma melhor visualização do comparativo entre compra normal e compra coletiva, das vendas e do retorno sobre investimento, foi criada uma página de relatórios e análises exclusiva para essa finalidade.
Gestão de usuários - Empresas
Como o objetivo desse acesso é a administração das empresas e distribuidoras, a melhor opção de visualização para essa função foi uma tabela de dashboard padrão, exibindo as informações importantes para os responsáveis pelo projeto.
Visão geral
A tela de visão geral tem como objetivo mostrar o desempenho das distribuidoras no e-commerce, destacando quais estão obtendo mais lucro com as promoções e quais estão ativas nas promoções abertas periodicamente pela administração.
Gerenciamento
Essa tela tem como foco a visualização de gráficos sobre o histórico de ofertas, a performance dos produtos, as vendas e os comparativos de compras.
Resoluções
Este projeto contribuiu para a organização da administração da empresa responsável pelo projeto. A modernização do e-commerce ajudou a fechar mais negócios B2B e, além disso, os dashboards para distribuidora e administração facilitaram o processo de documentação de produtos, clientes, compras e relatórios.
Resoluções
Este projeto contribuiu para a organização da administração da empresa responsável pelo projeto. A modernização do e-commerce ajudou a fechar mais negócios B2B e, além disso, os dashboards para distribuidora e administração facilitaram o processo de documentação de produtos, clientes, compras e relatórios.
Quer saber mais?
Entre em contato comigo para falar sobre design, gatos ou cinema
Converse comigo
E-commerce e sistema de dashboard de distribuidora
Período: Junho de 2024 até Agosto de 2024.
Função: UX/UI Designer.
E-commerce e sistema de dashboard de distribuidora
Período: Junho de 2024 até Agosto de 2024.
Função: UX/UI Designer.
Tela de início
A tela inicial do e-commerce tem como objetivo exibir as principais promoções e a compra coletiva, que é muito importante para os distribuidores. Também é possível acessar as principais distribuidoras no submenu (inspirado na Amazon).
Perfil
A tela de perfil permite visualizar e editar as informações básicas da empresa. Também é possível que as empresas vejam os pontos acumulados por compras em uma distribuidora.
Tela de distribuidores
A empresa pode visualizar a página de uma distribuidora específica. Nessa página, são exibidos os produtos, preços, além das informações sobre local e horário de atendimento.
Compra coletiva
A tela de compra coletiva foi desenvolvida com o objetivo de exibir informações sobre a quantidade de empresas participantes, para que, assim, a empresa possa ponderar sobre sua decisão de participar ou não da compra coletiva.
Tela de carrinho
A tela de carrinho é dividida entre as distribuidoras com as quais a empresa está realizando a compra. Essa estrutura foi pensada dessa forma, pois, geralmente, em negócios B2B, as compras envolvem uma grande quantidade de itens, o que reduz a probabilidade de o usuário se confundir.
Visão e-commerce
O primeiro acesso a ser trabalhado foi o e-commerce. Foi crucial começar por essa parte, pois ela seria fundamental para entendermos quais informações deveriam ser incluídas no dashboard de administração das distribuidoras. A seguir, mostrarei algumas telas importantes dessa etapa:
Tela de início
A tela inicial do e-commerce tem como objetivo exibir as principais promoções e a compra coletiva, que é muito importante para os distribuidores. Também é possível acessar as principais distribuidoras no submenu (inspirado na Amazon).
Compra coletiva
A tela de compra coletiva foi desenvolvida com o objetivo de exibir informações sobre a quantidade de empresas participantes, para que, assim, a empresa possa ponderar sobre sua decisão de participar ou não da compra coletiva.
Tela de carrinho
A tela de carrinho é dividida entre as distribuidoras com as quais a empresa está realizando a compra. Essa estrutura foi pensada dessa forma, pois, geralmente, em negócios B2B, as compras envolvem uma grande quantidade de itens, o que reduz a probabilidade de o usuário se confundir.
Perfil
A tela de perfil permite visualizar e editar as informações básicas da empresa. Também é possível que as empresas vejam os pontos acumulados por compras em uma distribuidora.
Tela de distribuidores
A tela de perfil permite visualizar e editar as informações básicas da empresa. Também é possível que as empresas vejam os pontos acumulados por compras em uma distribuidora.