zamp-design-ux-amaro-monteiro

System Manager

zamp-login-manager

Zamp Manager

Sistema de backoffice criado para organizar os produtos externos da empresa, como apps e cupons.

Houve uma reformulação para facilitar o acesso aos materiais necessários. Zamp, atual dententora da marca Burger King e do Popeyes no Brasil possui um sistema interno que precisa ser reformulado com base marca da empresa e criação de novas features dentro do Zamp Manager.

FrameWork

Para a criação desse novo sistema, utilizamos o framework Ant Design para facilitar as criações de componentes, o que facilitaria no foco em Ux design para esse projeto. Nosso principal objetivo era facilitar para que o time de princing pudesse ter agilidade e facilidade para o cadastramento de cupons dentro do aplicativo Buger King. Além disso, o projeto precisaria ser multicanais (o time de cupons também alimenta os projetos de Totem e PDV). Além disso, precisamos também pensar em multimarcas, comportando funcionalidades do Burger King e do Popeyes.

ant-design-amaro-monteiro
bk-manager-amaro-ux-design

BK Manager

O Bk Manager, antigo backoffice que seria refaturado, estava com diversos bugs, problemas de usabilidade e funcionalidades que não estavam sendo mais utilizados. Nossa grande oportunidade de estudar a fundo a heurística e melhorias que iriamos trazer para esse novo sistema bkoffice.

Cadastro Antigo de Cupons

Identificamos vários gaps na parte de cupons dentro do BkOficce que precisariam ser reformulados para que ficassem mais claros na hora do cadastro, além disso, já tínhamos em mente que durante a refatoração teríamos  novas features introduzidas no projeto pelos stakeholders. Precisávamos de uma visão modular, organizada e intuitiva o projeto. 

Desde o header até o footer, precisávamos organizar os espaçamentos e trazer leveza no fluxo, como se o sistema tivesse conversando com o novo Zamp Manager.

burger-king-brasil-amaro-monteiro-ux-design
bk-manager-old-system
zamp-login-manager

Começando Pelo Inicio

Visualizamos a primeira oportunidade de cybersegurança, implementamos além de uma Ui nova e moderna, dando destaque a marca, tambem introduzimos, em conjunto com a arquitetura novas regras de login, trazendo muito mais segurança para o sistema e para as pessoas que possuem o acesso. Desativamos a oportunidade de ser um sistema mobile, pois suas principais funcionalidades estão focadas em utilizar um computador disponibilizado pela empresa.

Teste A/B

Como iriamos fazer a refatoração da tecnologia e da Ui utilizada, criamos um teste A/B para estudar o comportamento do usuário através do sistema Hotjar. Com esse estudo em mãos, tivemos um caminho a seguir, trouxemos a facilidade em lembrar a senha e esqueci minha senha, sendo modificada a senha somente pelo e-mail institucional da Zamp. 

Para a Ui foi escolhido a cor azul escuro, seguindo a estrutura dark mode apenas no login, porém, também trazendo uma leveza e espaços de respiro.

zamp-login-manager
Teste AB

Novo Menu Com Ux Motion

Hoje no Bk Manager temos três sistemas integrados:

Cupons – Cadastrar e editar cupons dentro dos canais digitais do Buger King. Ao inserir um cupom novo dentro dos canais, o time de princing estrutura toda uma estratégia de vendas e marketing para a criação de um novo cupom. Esse cupom será criado e estrategicamente posicionado em cada canal.

Delivery – Área visando um novo canal que está sendo desenvolvido no Burger King visando um delivery próprio.

Lojas – Feature nova que será desenvolvida em conjunto com a refatoração. Com essa feature é possivel cadastrar e editar novas lojas da rede Burger King e franquiados. 

O ux motion design foi inserido para capturar a atenção do time para cada sistema e sua finalidade.

Cupons SiteMap

Sitemap contendo cada interação do usuário no sistema, desde que ele fez o login até a criação de um cupom, fazendo a configuração de nome, subtítulo, imagem, canal em que o cupom vai ser utilizado, estado onde aquele cupom será mostrado, número de identificação e posicionamento estratégico do cupom dentro do app.

sitemap-amaro-monteiro-zamp-manager-cupons

Store SiteMap

Sitemap detalhado da nova feature desenvolvida em conjunto com a refaturação do sistema Zamp Manager de cadastro de lojas. 

Anteriormente o cadastro de lojas era possível apenas por backend, demorando horas para ser sincronizado em canais como totem ou app. Com essa nova feature estruturamos para que as lojas possam ser cadastradas através de um upload de planilha excel e podendo também ser editadas e customizadas a partir de uma área do Zamp Manager.

sitemap-amaro-monteiro-ux-zamp-manager-bk
lojas-cadastradas-zamp-manager-brasil-bk-plk

Cadastro De Lojas

Em parceria com o time de app do Burger King que estava desenvolvendo uma nova visão e regras de negócios para lojas. Criamos na squad de cupons uma nova feature onde facilitaria o cadastramento e informações relevantes das lojas do Burger King. Facilitando para o usuário informações importantes como se a loja é franqueada ( não aceita cupons ou pontos do Clube Bk) ou se a loja é própria.

mobile-ux-store-lojas-brazil-us-spanish
multimarcas-burger-king-brasil-popeyes-franquias

Nascendo Multimarcas

Uma das principais novidades do Zamp Manager é que ele já nasce como uma feature multimarcas, trazendo nesse primeiro momento as duas grandes marcas na qual a Zamp é detentora, Burger King e Popeyes.

A padronização faz parte de um grande esforço em conjunto com o time de desenvolvimento e negócios para que os produtos sejam cada vez mais modulares.

Dentro do Zamp Manager o time de negócios pode alterar com facilidade as marcas nas quais tem acesso.

burger-king-brasil-design-logo-brand
popeyes-brasil

Filtros Rápidos

Com informações robustas, fizemos a arquitetura de filtros com temas chave para que as informações sejam encontradas com facilidade.

Atualmente é inserido na base de dados do Zamp Manager 1,500 lojas mensais entre franquias e lojas próprias, caso o time de negócios precise encontrar a loja para editar ou excluir alguma informação, eles podem utilizar o filtro rápido ou avançado para encontar com facilidade a loja.

zamp-pop-up-design
zamp manager stores brasil bk
desktop-zamp-manager-brasil-stores-app

Editando Uma Loja

Em nosso discovery identificamos que muitas informações de lojas se perdem até chegar nas mãos de quem cadastra as lojas. Pensando nisso, criamos uma área especifica para edição de cada loja. Em uma estrutura padronizada, a maioria das informações podem ser customizadas nessa tela. Facilitando atualizações rápidas.

figma-amaro-monteiro-ux-design

Tabelas Dinâmicas

Criamos tabelas dinâmicas e com ações facilitadoras para que sejam entendidas assim que as pessoas olhassem. 

Uma das grandes preocupações do time de negócios era o entendimento das tabelas com facilidade, pois acaso haja uma urgência, as tabelas poderiam ser um impeditivo para a rápida correção.

Utilizamos ícones para uma percepção melhor em Ui além de tags chamativas.

Ícones Intuitivos

Aplicamos quatro ícones informativos dentro da tabela para que visualmente facilite na hora de entender quais serviços as lojas atendem.
Segue aqui os quatros elementos que cada loja pode disponibilizar para seus clientes:

C&R

Clique e Retire é utilizado para lojas que aceitam a compra. eo pagamento pelo aplicativo do Burger King.

Clube Bk

Clube Bk é utilizado para lojas que pontuam em nosso clube de benefícios dentro do app.

Cupons

Lojas que aceitam os cupons que estão disponibilizados dentro do app do Burger King.

Delivery

Lojas que possuem o serviço de delivery do Burger King.

  • Trabalho Anterior
  • Próximo Trabalho
amaro-monteiro-ux=design

Amaro Monteiro © 2024. All Rights Reserved.