Juntas e a Repaginação de todas as telas dos nossos sistemas.

Temos 3 sistemas Web em funcionamentos e todos utilizam o mesmo banco de dados possibilitando a integração entre eles.
Cada sistema foi desenvolvido em momentos diferentes e com layouts diferentes. Preciso reformular todo o Frontend permintido que todos os usuarios utilizem um unico sistema onde tera um controle de permissões para exibir ou não telas e ferramentas diferentes.

************
************
************



Buscamos:
Designer UI/UX Figma para Sistema Web Inovador
Sobre Nós: Há 30 anos no mercado gráfico, a **************** carrega um DNA inquieto de
inovação, sempre conectada em soluções que transformam a jornada de nossos clientes,
colaboradores e fornecedores. Especialistas nos segmentos promocional, editorial, embalagens
e convites para formatura, abraçamos a diversidade com o slogan “Uma Alpha para cada
universo”. Localizada em Bandeirantes-PR, nossa equipe de mais de 100 colaboradores
compartilha o compromisso de criar conexões humanizadas, tornando cada projeto único e
memorável.

Responsabilidades Principais:
● Desenvolver a arquitetura da informação, fluxos de usuário, wireframes,
protótipos interativos e o design visual final de todas as telas do sistema
utilizando Figma.
● Aplicar consistentemente a paleta de cores e a identidade visual da nossa marca
em todas as interfaces.
● Criar designs responsivos e adaptáveis que proporcionem uma excelente
experiência do usuário em diferentes dispositivos e resoluções (se aplicável).
● Garantir que as interfaces sejam intuitivas, acessíveis e sigam as melhores
práticas de UX e UI.
● Colaborar ativamente com os programadores para garantir a viabilidade técnica
dos designs e facilitar a implementação fiel das interfaces.
● Desenvolver e manter uma biblioteca de componentes (Design System) no Figma
para garantir consistência e eficiência no design e desenvolvimento.
● Iterar sobre os designs com base em feedback da equipe e, futuramente, de
testes com usuários.
Requisitos e Qualificações:
● Experiência comprovada como Designer UI/UX, com um portfólio robusto que
demonstre projetos de interfaces para sistemas web ou aplicações complexas.
● Domínio avançado da ferramenta Figma (componentes, auto layout, variantes,
prototipagem, bibliotecas).
● Profundo conhecimento dos princípios de design de interface (UI), experiência do
usuário (UX), usabilidade e arquitetura da informação.
● Habilidade para interpretar requisitos, realizar pesquisas de usuário (desejável) e
traduzir conceitos em soluções de design eficazes.
● Experiência em trabalhar com paletas de cores definidas, guias de estilo e em
garantir a consistência visual da marca.
● Capacidade de criar interfaces modulares e adaptáveis às necessidades
específicas de cada módulo do sistema.
● Excelentes habilidades de comunicação e colaboração para trabalhar de forma
eficaz com desenvolvedores, gerentes de produto e outros stakeholders.
● Compreensão básica de tecnologias front-end (HTML, CSS, JavaScript) para
facilitar a comunicação e o alinhamento com a equipe de desenvolvimento.
● Proatividade, atenção aos detalhes e paixão por criar soluções centradas no
usuário.
Entregáveis Esperados:
● Arquivos Figma completos, organizados e prontos para o handoff aos
desenvolvedores, contendo todas as telas, componentes, estilos e
especificações.
● Protótipos interativos navegáveis.
● Guia de estilos e biblioteca de componentes (Design System) no Figma.
● Exportação de assets gráficos necessários para o desenvolvimento.
Diferenciais:
● Experiência com metodologias ágeis (Scrum, Kanban).
● Experiência na condução de testes de usabilidade.
Definições Necessárias
Para que o designer possa iniciar o trabalho de forma alinhada e eficiente, é essencial
que você prepare e forneça as seguintes informações:
Briefing Completo do Sistema:
Objetivo geral e escopo do sistema:
○ Armazenar dados e expõe informações administrativas de forma estruturada e
acessível.
○ Permitir a interação entre usuários de diversos setores administrativos e a conexão
direta com clientes.
○ Agilizar a troca de informações e processos internos.
○ Valorizar o tempo dos usuários e clientes, oferecendo respostas e interações mais
rápidas e precisas.
○ Público-alvo: O sistema é direcionado a funcionários e clientes, com foco
especial em estudantes universitários, profissionais de publicidade e
marketing, em geral com idade entre 25 e 60 anos. Esse público busca
agilidade, confiabilidade e uma experiência de uso moderna, que valorize seu
tempo e simplifique processos.
Fluxos de usuário principais:
1 Acesso e Autenticação
○ Usuários (funcionários e clientes) acessam o sistema pela tela de login, inserindo suas
credenciais.
○ Após a autenticação, são redirecionados ao dashboard, onde visualizam indicadores e
notificações importantes.
2 Ambiente Exclusivo para o Cliente
○ Os clientes têm acesso a um ambiente próprio e seguro, onde podem:
Suporte de dúvidas: abrir tickets ou conversar em tempo real para esclarecer
questões.
○ Solicitação de orçamento: enviar solicitações personalizadas de orçamento para seus
projetos.
○ Acompanhamento de pedidos: acompanhar em tempo real o andamento do pedido e o
status de cada etapa.
○ Aprovação de layouts: acessar o layout temático, sugerir edições e aprovar o layout
final com o diagramador.
○ Ficha financeira: consultar valores, datas de vencimento e outros dados financeiros.
○ Emissão de boleto: gerar boletos de forma prática e segura.
○ Histórico de pedidos: revisar todos os pedidos anteriores, garantindo controle e
organização.
3 Gestão de Dados e Projetos (para Funcionários)
○ Funcionários acessam módulos administrativos para cadastrar, editar e excluir dados
de pedidos, clientes e projetos.
○ Eles utilizam ferramentas para checar a engenharia do produto, criando provas físicas
e garantindo a qualidade.
4 Interação e Suporte em Tempo Real
○ Clientes interagem com o suporte para resolver dúvidas ou obter orientações rápidas.
○ Funcionários recebem essas solicitações e as atendem de forma ágil e humanizada.
5 Notificações e Alertas
○ Durante toda a jornada, o sistema exibe notificações em tempo real sobre mensagens
novas, alterações em pedidos, aprovação de layouts e outros avisos importantes.
○ Usuários podem gerenciar essas notificações para manter o foco no que é essencial.
6 Relatórios e Análises (para Funcionários)
○ Usuários internos geram relatórios customizados para embasar decisões estratégicas
e monitorar o andamento de projetos.
○ Esses relatórios podem ser exportados em formatos como PDF ou Excel.
Requisitos funcionais:
1 Tela de Login/Autenticação
● Campos para usuário e senha.
● Recuperação de senha.
● Mensagens de erro (usuário/senha inválidos).
● Redirecionamento para área principal após login.
2 Dashboard / Visão Geral
● Exibição de indicadores principais (KPIs).
● Acesso rápido aos principais módulos (atalhos ou botões).
● Notificações recentes ou atualizações importantes.
3 Módulo de Gestão Administrativa
● Cadastro, edição e exclusão de dados administrativos.
● Busca e filtragem por diferentes critérios.
● Visualização detalhada de registros (ex.: perfil do cliente, status do pedido).
● Geração de relatórios/exportação de dados.
● Controle de permissões (quem pode ver ou editar cada item).
4 Módulo de Suporte Interativo
● Interface para chat em tempo real com o cliente.
● Histórico de conversas e interações.
● Criação e acompanhamento de tickets de suporte.
● Notificações de novas mensagens ou atualizações.
● Upload de arquivos ou anexos durante a interação.
5 Tela de Cadastro de Usuários/Clientes
● Formulários para adicionar novos usuários/clientes.
● Edição de dados existentes.
● Associação de usuários a setores ou grupos.
6 Tela de Configurações/Preferências
● Gerenciamento de permissões de usuários.
● Personalização de preferências do sistema (ex.: idioma, tema).
● Integração com outros sistemas (ex.: API, importação de dados).
7 Tela de Relatórios
● Geração de relatórios customizados.
● Opção de exportar em diferentes formatos (PDF, Excel).
● Filtros para selecionar período, setor ou tipo de relatório.
8 Tela de Alertas e Notificações
● Listagem de notificações por prioridade.
● Visualização de detalhes e status de cada notificação.
○
1. Identidade Visual e Guia de Estilo:
○ Logotipo: Em formatos vetoriais (SVG, AI, EPS).
○ Paleta de cores: Especificação exata das suas cores primárias, secundárias,
de destaque, neutras e para feedback (sucesso, erro, aviso, informação) –
códigos HEX, RGB, CMYK se aplicável.
○ Tipografia: Nomes das fontes a serem utilizadas, hierarquia tipográfica
(tamanhos e pesos para títulos, subtítulos, corpo de texto, legendas, etc.).