Desafio
Desenhar um web sistema para consolidar as operaçõesda VIVA, uma empresa de Photo Concierge que opera dentro de resorts.
Creating a Web System from scratch to unify the operations from VIVA, a Photo Concierge company that works inside resort hotels.
Meu papel
Designer de Produto (UI/UX Designer)
Plataformas
Web para Computadores Desktop; Web para Tablets
Ano & duração
2020, 2 meses
Cliente
VIVA, uma empresa de Photo Concierge, presente em hotéis e resorts brasileiros, à época do trabalho, em Natal e Maceió, com unidades em seis resorts.
A empresa oferece o registro dos momentos escolhidos pelo cliente de forma ágil, amigável e profissional e vende recordações na forma de fotos em álbuns e souvenirs.
VIVA, a Photo Concierge company that is set in Brazilian Hotels and Resorts and, by the time of this job, in the cities of Natal and Maceió, with units in six Resorts.
The company offers photoshoot for moments chosen by the client, in a fast, friendly and professional way. They sell these as mementoes, photo albums, and other pieces of memorabilia.
Identidade de marca Viva, Agência Mariz
Etapa de descoberta
O problema
O fluxo de trabalho da VIVA é bem estruturado, mas se beneficiaria bastante de um sistema centralizado para suas equipes de serviço e de produção. O registro e processamento de suas atividades estão espalhados por diferentes aplicativos e documentos, tornando difícil para a gestão acompanhar e auditar todo o processo. Por isso, eles foram até a empresa de software onde eu trabalhava para obterem um sistema personalizado, o qual fui encarregado de projetar.
O processo de trabalho da VIVA
A fim de conseguir uma compreensão completa do fluxo de trabalho da VIVA, eu e o Product Owner tivemos conversas com os diretores da VIVA e alguns de seus funcionários. Eles gentilmente nos cederam seus manuais de treinamento internos, contendo alguns fluxos importantes para estudarmos.
Processos de loja da Viva’s e Manual Descritivo, Viva 2020
Processos de produção da Viva’s para um álbum de fotos, Viva 2020
Fluxo de trabalho da Viva, Interdev 2020
Transformando o processo em um web sistema
Antes das telas, mapeamos os fluxos!
Tivemos que adaptar esses vários fluxogramas em um Blueprint de Serviço abrangente que pudesse mostrar cada um dos atores e ações da VIVA. Também tivemos discussões online com a equipe da VIVA para garantir que estávamos fazendo tudo certo.
Fluxo de Tarefas (Taskflow)
Fiz um fluxo de tarefas linear, baseado na minha compreensão do processo de produção da VIVA. Em cada passo, anotei qual funcionário da VIVA executava a tarefa e quais informações eram agregadas (data, hora, e brief do ensaio).
Fluxo de Tarefas dos processos da Viva, Ígor Jales 2020
Planta do Serviço (Service Blueprint)
Eu precisava observar com mais clareza o fluxo de trabalho, então, separando em faixas horizontais a atividade de cada funcionário, desenhei uma versão adaptada da Planta do Serviço. O fluxograma segue uma sequência cronológica, com o tempo fora de escala. Este foi o exercício definitivo para começar a determinar os elementos de interação.
User Flow do Sistema Viva para quatro diferentes perfis de usuários, Ígor Jales 2020
E foi assim que conseguimos identificar os papeis dos usuários que seriam diferentes no sistema. Também usei alguns desses símbolos a seguir para marcar os papéis dos usuários nos diagramas e me ajudar a não me perder:
Etapa de design
Dando forma ao sistema
Sketches & Wireframes
Fichas de controle
Dessa anotação dos dados que eram inseridos, eu pude determinar formas melhores de separar os dados e criar duas fichas interligadas, que seriam tratadas pelos usuários como objetos diferentes, que chamamos de Ordem de Serviço (OS) e Ordem de Produção (OP).
Embora sejam do mesmo pedido, o propósito de separar essas fichas é mostrar dados diferentes que serviriam a usuários/agentes diferentes no processo.
Listei 18 status totais, e discuti com o Product Owner quais seriam relevantes manter. Ao final sobraram 12, sendo 5 de Ordem de Serviço e 7 de Ordem de Produção.
Os cinco Status de uma Ordem Serviço.
Os sete status de uma Ordem de Produção.
Ficha de Ordem de Serviço
No cabeçalho da ficha constam o número de protocolo, o botão acionável de confirmar e seguir para o próximo status e outras informações relevantes para os operadores.
Abaixo, as abas Agendamento, Brief e Fotos funcionam para todos os usuários.
Ficha de Ordem de Produção
O cabeçalho se repete, o protocolo permanece o mesmo.
Abaixo, as abas Dados do pedido mostram informações relevantes para a montagem do produto. Na aba de Pré Produção, o editor confere os arquivos a serem impressos.
Teste do Protótipo e Apresentação
Idealmente, o sistema deveria ter sido testado com alguns cenários de uso simulados. Mostramos o protótipo para os usuários antes de sua interface visual estar completa, já que eles eram os únicos e reais usuários e estávemos com um prazo apertado.
O sistema completo, mostrado no arquivo original. As setas azuis são os links que funcionam quando se muda para o modo protótipo navegável.
Seções comuns, padrão de sistema
Login
Com estados de validação e recuperação de senha.
Clients
Listagem de clientes, cada um com uma ficha de informações. Vinculados às OS.
Settings
Ajustes dos os níveis de acesso de usuário, dentre outras opções a definir. Disponível só para Admins.
Dashboard
Tela inicial para Admins, mas a última a ser feita. Com estatísticas, indicadores e vistas rápidas.
Módulos e funcionalidades adicionais
Financeiro
Módulo previsto na confecção do sistema. Inclui fluxo de caixa, dentre outras opções.
Relatórios Financeiros
Feature dentro do Módulo Financeiro que também estava no escopo. Pode gerar gráficos de diferentes formas como indicadores de perfomance.
Design Visual
Tipografia
Como substituta próxima para a tipografia Uni Sans no logo, I escolhi Ubuntu para o texto. Pareei com alguns pesos da Roboto, em algumas partes que precisavam de maior legibilidade ou mais nuances visuais.
Estudo de paleta de cores
A VIVA já tinha um branding com esquema de cores bem proeminente, visto nos seus canais e materiais de divulgação, que eram motivo de orgulho. Infelizmente, traduzir tudo isso para o sistema não era uma prioridade. O tempo disponível foi utilizado para um MVP.
Estudo inicial
Identifiquei tons usáveis que não agrediam os olhos em longos períodos, or evocavam ação quando necessário, dentro dos cenários propostos. O objetivo era equilibrar esses aspectos mantendo a marca VIVA presente, usando uma faixa pequena, mas distinta de cores, tomando cuidado para não torná-las redundantes, comparando a tonalidade e luminância quando próximas, lado-a-lado.
Assim garantiria que nem designers nem desenvolvedores no futuro lidassem com cores redundantes e decisões confusas.
Uso de cores
Utilizei como guia os botões mais comumente usados em todos os outros sistemas e os traduzi para a paleta da VIVA.
Para botões direcionando a um passo à frente em direção a cometar uma tarefa, optamos pelo marrom escuro. Esses indicariam ao usuário a importância de serem clicados, mas seriam designados para ações não definitivas, aquelas nas quais os usuários podem voltar atrás e mudar suas decisões.
Enquanto que, para ações definitivas, como completar ou enviar uma requisição, haveria um botão com laranja gradiente, igual à cor principal da VIVA.
Principais preocupações
Laranja pode ser facilmente confundido com vermelho, tradicionalmente associado com erros e ações destrutivas. Isso levantou preocupação com potencial confusão dos usuários.
Por conta do prazo apertado, voltamos atrás e seguiram a recomendação de abandonar botões laranjas, em favor dos marrons. Os ícones auxiliares, como as flechas apontando para a direita (→) indicariam a existência de passos seguintes, e check marks à esquerda indicariam as ações conclusivas, definitivas.
Nota em retrospectiva (2021):
Encontrei uma solução dois anos depois, que teria liberado o uso do botão laranja sem ambiguidade: adotando roxo em vez de vermelho, como a cor ‘negativa’ do sistema.
Roxo, assim como vermelho, é comumente percebido como sinal de perigo no corpo humano, permitindo aos usuários rapidademente associarem a um contexto negativo com o mínimo de exposição a esse padrão no sistema.
Telas finais
Resultados
A equipe da VIVA se mostrou extremamente satisfeita e otimista com o design do sistema. Os futuros usuários se mostraram satisfeitos com as funcionalidades, embora bastante ansiosos para as implementações e incorporações dessas e de outras novas funcionalidades.
Aprendizados
- Em um projeto de pequena escala como este, o processo pode se tornar mais artesanal, com um contato dinâmico com os usuários e feedback constante.
- Projetar para uma boa experiência do usuário pode requerer tempo adequado para iterar e testar ideias. Mas temos de trabalhar com os recursos e o cronograma disponíveis.
- Pode ser desafiador apresentar novos métodos de design para desenvolvedores experientes que já tem seus próprios fluxos de trabalho. Decidi que meu próximo passo seria trabalhar em uma empresa que tivesse espaço e recursos para trabalhar assim — e deu certo, pois com este case fui aceito na NTT DATA!
- Quando a cor primária de um sistema for muito próxima ao vermelho, tente usar roxo para alertas negativos.
Obrigado pela visita!
© Copyright 2024. Ígor Jales - UI/UX Designer
