INDÚSTRIA:
TECNOLOGIA, INFORMAÇÃO E INTERNET
EMPRESA:
BLOQ.IT
ANO:
2024
FUNÇÃO:
UX/UI DESIGNER
Bloq.it
sobre.
A Bloq.it é uma empresa de tecnologia portuguesa especializada em fornecer soluções avançadas de armários inteligentes. A plataforma integra hardware de ponta com um robusto ecossistema de software para oferecer sistemas de gerenciamento de pacotes personalizáveis, eficientes e seguros. Os armários inteligentes são projetados para aumentar a eficiência da entrega de última milha, simplificar a retirada de pacotes e fornecer soluções de armazenamento seguro para vários setores, incluindo varejo e logística.
Meu papel como UX/UI designer dentro da empresa tinha dois focos principais. O primeiro envolvia projetar novos projetos e recursos para melhorar a experiência do usuário e a funcionalidade do nosso produto. O segundo era criar e manter um sistema de design coeso, garantindo consistência e eficiência em todas as interfaces digitais.
desafio.
A empresa tem crescido rapidamente com clientes relevantes como VintedGo e DHL eCommerce, nos quais era importante ter um software de back-office robusto para oferecer um serviço eficiente. Além disso, a empresa trabalhou em um projeto inovador que consiste em uma rede de armários e, por causa disso, será necessário criar novos recursos para o aplicativo. Para facilitar o desenvolvimento, a biblioteca Element UI foi utilizada. No entanto, era bastante restritiva, permitindo apenas componentes e padrões básicos, o que começou a limitar melhores soluções.
O desafio consistiu em um redesenho do produto legado, sendo necessário trabalhar em novos recursos para ajustar o produto ao projeto da rede e melhorar a aparência e a biblioteca com um número restrito de componentes e padrões. Além disso, o produto apresentava muita inconsistência em sua interface, como componentes, navegação e padrões, e, consequentemente, os usuários tinham dificuldade em acompanhar seu progresso e navegar pelas funcionalidades.
Alguns objetivos primários foram definidos para trabalhar:
Criar novos recursos e melhorar os existentes.
Modernizar a estética e aprimorar a acessibilidade.
Uso das cores da marca no produto e criação de uma marca branca para os clientes.
Continuar usando a atual biblioteca Element UI.
Design de novos padrões e diretrizes.
Criar um sistema de gerenciamento de design.
pesquisa.
Workshops
Para obter uma compreensão profunda das necessidades dos clientes, realizamos workshops com as principais partes interessadas da Bloq.it e da DHL eCommerce. Essas sessões nos permitiram descobrir recursos críticos do produto, otimizar fluxos de trabalho e identificar pontos problemáticos, fornecendo insights valiosos para moldar a solução.
Análise de concorrentes
Analisando os aplicativos de software populares, notou-se como eles usam layouts limpos com foco nas principais ações e considerando a grande quantidade de informações existentes nas páginas, como dados e status. Além disso, a navegação e os padrões são consistentes, ajudando os usuários a completar as tarefas facilmente, com uma hierarquia visual limpa. Além disso, as paletas de cores motivacionais incentivam o envolvimento do usuário.
Desconstruir o design existente
Uma etapa crucial no processo de design foi realizar uma inspeção minuciosa do design atual para entender sua funcionalidade e a justificativa por trás de cada decisão. Ao mapear toda a aplicação, conseguimos identificar questões-chave e descobrir oportunidades para melhorias.
Aqui estavam os principais problemas encontrados na interface:
Muita informação na página sem uma clara hierarquia visual.
Havia fluxos de trabalho complexos onde as tarefas eram difíceis de entender e completar.
Navegação confusa.
Uso de componentes de forma errada e inconsistente também.
Uso de fontes pequenas e layouts apertados.
Cores sem acessibilidade e não relacionadas à marca.
Ícones inconsistentes.
Péssimo uso de espaço em branco.
desenhar nova funcionalidade.
Para aprimorar a aplicação de back-office, foram criadas novas funcionalidades com base no feedback e nas necessidades do cliente. Aqui será mostrada apenas uma delas.
Gerenciamento da rede de usuários
Em um sistema de gerenciamento de armários, diferentes usuários, como administradores e supervisores, requerem níveis variados de acesso ao sistema. No entanto, o sistema atual não permitia uma fácil atribuição de funções, levando a confusões sobre permissões. Além disso, rastrear qual usuário realizou ações específicas é difícil, resultando em potenciais riscos de segurança e problemas de responsabilidade. A funcionalidade de gerenciamento da rede de usuários permitiria que administradores e supervisores gerenciassem eficientemente as funções, permissões e acesso à rede dentro do sistema de gerenciamento de armários de back-office. Esta funcionalidade habilita o gerenciamento do controle de acesso aos armários, hierarquia de usuários e trilhas de auditoria para ações realizadas por cada usuário.
Diagrama de fluxo do usuário
O diagrama de fluxo do usuário foi projetado para ilustrar as etapas que os usuários seguem para concluir tarefas-chave dentro da funcionalidade. Ao mapear essas interações, o diagrama destaca a sequência de ações e pontos de decisão, ajudando a identificar possíveis gargalos.
protótipo de alta fidelidade.
Além disso, foi apresentado um protótipo de alta fidelidade para mostrar os elementos de design final, detalhes visuais e interações do usuário. Ele fornece uma visão clara do produto final, permitindo que as partes interessadas experimentem a aparência e a sensação da interface e testem a funcionalidade principal antes do desenvolvimento.
interface visual.
Nesta fase, o foco foi criar a nova aparência e experiência do aplicativo de back-office. O objetivo era garantir que a interface do usuário não fosse apenas visualmente atraente, mas também funcional, intuitiva e acessível.
Guia de estilo da UI
É essencial estabelecer um guia de estilo da UI coeso, isso servirá como a base para todos os elementos visuais em todo o aplicativo e garantirá consistência no design.
design system.
Uma parte crucial para a entrega de uma interface bem estruturada e escalável é criar uma documentação detalhada para o sistema de design. Isso garante consistência em toda a aplicação à medida que ela evolui, ajuda a integrar novos membros da equipe e apoia os desenvolvedores na implementação correta dos designs. Dessa forma, começou-se a criar a documentação.
Diretrizes do componente
Conteúdo
Governança
Foi criada uma governança do sistema de design para fornecer estrutura para gerenciar mudanças. Esses processos e protocolos foram utilizados para manter e atualizar o sistema de design, mesmo para ajustes pequenos.
resultados.
Os resultados deste projeto foram significativos para melhorar tanto a experiência do usuário quanto a eficiência operacional da aplicação back-office. Ao implementar o novo recurso de gerenciamento de rede de usuários, os administradores ganharam maior controle sobre os papéis e permissões dos usuários, melhorando a segurança e a responsabilidade.
A estética modernizada e o guia de estilo de UI não apenas melhoraram o apelo visual, mas também facilitaram uma experiência de navegação mais suave, permitindo que os usuários concluíssem tarefas de forma mais eficiente. No geral, o projeto abordou os pontos críticos identificados durante a pesquisa, abrindo caminho para fluxos de trabalho mais simplificados e uma plataforma mais intuitiva.
