PangoScrum é a iniciativa de uma equipe formada por profissionais de 3 diferentes áreas que trabalham juntos em projetos de desenvolvimento de sites e aplicativos.

O time do qual faço parte sentia a necessidade de uma ferramenta específica para o gerenciamento do Scrum. Pesquisamos o mercado e testamos algumas ferramentas. Algumas tentavam substituir o quadro de tarefas, algo que não concordamos. Elas não possuiam uma interface amigável. Eram complexas e poluídas, cheias de funcionalidades que nos faziam perder o foco. Além do fato de que interferiam no modo e no fluxo do nosso scrum. Resolvemos, então, desenvolver o PangoScrum, que já está disponível gratuitamente em versão beta.

Minha função no desenvolvimento do Pango foi a criação de uma identidade visual, wireframing, layout do sistema, produção de HTML e CSS e execução de idéias como desenho de baralho para planning poker, quadro de tarefas e wallpaper. Além do site, onde é possível fazer o cadastro.

Tela de Login

Tela do Sistema – Product Backlog

Criamos um baralho de Planning Poker com o tema Pango.

Uma das características principais do Pango, é a não interferência no processo da metodologia ágil. Pensamos em manter intactos os eventos físicos do Scrum. Reuniões diárias em frente ao quadro de tarefas, planning, review e retrospectiva são indispensáveis.

O Terminal de Autoatendimento BMG foi criado, inicialmente, para execução de simulações de empréstimos consignados em pontos estratégicos de potencial mercado para o produto. Em um segundo momento, o escopo do projeto foi ampliado para a efetivação do empréstimo com a coleta da assinatura do beneficiado através de um dispositivo específico. O projeto do terminal contempla ainda câmera, e impressora térmica.

A criação da interface gráfica do software de autoatendimento, tem como aspecto primordial a preocupação com a usabilidade e o sucesso das operações. Com este objetivo, nos esforçamos para tornar a aplicação o mais intuitiva possível, com uma quantidade limitada de escolhas em cada tela, guiando o usuário ao máximo para o alcançe do seu objetivo. Os elementos de tela, suas dimensões e localizações têm fundamento em pesquisas, estudos e testes aplicados.

Outro aspecto da criação da interface é a aproximação com os padrões visuais da instituição BMG. Foi levado em conta, cores e formas presentes na identidade visual do Banco BMG, direcionando a criação no mesmo sentido.

A aplicação desktop roda em full screen, com resolução de 1024px por 768px. O Cursor oculto facilita o foco na tela inteira ao invés de somente no cursor.

O branco sólido presente no fundo, facilita leitura, evita reflexos de luz ambiente e torna imperceptíveis as manchas de gorduras dos dedos. O uso de fotos como fundo, além de causar confusão na identificação dos elementos de tela, dificultam a leitura dos textos.

O vermelho e o verde auxiliam as ações de retroceder e avançar, respectivamente na operação. As cores também são utilizadas para diferenciar ações (botões com diferentes cores) e áreas que precisam de destaque, como avisos importantes ou telas que tenham novo contexto (caixas com número de telefone, fotos de produtos, animação…). Isso facilita o entendimento gerando motivação para o avanço da operação.

Nos botões onde o label (texto) é dinâmico, o arquivo usado é apenas o fundo, gerado de um arquivo de corel em RGB para um arquivo de extensão SVG ( Scalable Vector Graphics), mais indicado para variações de tamanho. Os demais arquivos são imagens em PNG, onde o texto já faz parte da imagem.

Em geral, para os usuários do terminal, que não são necessariamente familiarizados com o teclado de um computador, a melhor opção é o uso do teclado numérico “telefônico” e alfanumérico ordenado alfabeticamente.

As abas são um recurso usado para disponibilizar um número de opções maior do que cabe em uma tela.

Elementos e técnicas que ajudaram na organização de agrupamentos funcionais na tela:
- Linhas divisórias
- Proximidade, similaridade…
- Espaços em branco
- Quadros
- Formas
- Tamanho e atributos de textos, cores e estilo.

Eu e a equipe envolvida no desenvolvimento do projeto, criamos um documento em PDF no qual é possível visualizar todo o fluxo das operações de simulação e contratação. O objetivo básico deste documento é auxiliar o atendimento dos operadores do call-center e o entendimento dos profissionais do banco envolvidos no projeto.

O Terminal

O gabinete foi desenhado no estilo “kiosk”. Partimos da premissa de que o usuário se relaciona com o equipamente em pé, olhando para frente. As formas sugerem simplicidade e robustez. As cores seguem os padrões do Banco BMG.
A tela e o telefone de contato com o call-center foram posicionados a uma altura média de 136 cm.

A plataforma de apoio das mãos, onde se encontra o dispositivo de assinatura, está a 92,3 cm de altura. O material utilizado foi o aglomerado, MDF, metal, fórmica e adesivo.

Zé Letrônico

Com a intenção de tornar o terminal e a experiência do usuário menos fria e mecânica, criei um personagem simpático. O Zé Letrônico ajudaria na aceitação pelo público e facilitaria a prolongar o contato com o usuário, uma vez que este poderia levar o personagem e montá-lo, como mostra uma das telas de descanço da aplicação abaixo.

Filipeta para montagem, disponível nos terminais.

No início de 2006, o Jornalista Sidney Rezende me procurou para a criação e produção de um site simples, sem muitas pretensões. Na época, o escopo não era o SRZD como é conhecido hoje. Era o site pessoal do jornalista com alguns diferenciais.

Hoje o SRZD é uma referência do jornalismo brasileiro na internet, passando de 17 mil visitas no seu mês de estréia para mais de 2 milhões de leitores mensais em 2009.

Participo das reformulações visuais do portal, assim como na criação de crachás, painéis, animações e headers (cabeçalho) de novas editorias.

A criação da logomarca, ajudou na transição da imagem do site Sidney Rezende para o portal SRZD.

A segunda versão do site já apresentava a “marca” SRZD, com editorias e algumas ferramentas de interatividade. Foi quando parei de usar tabelas no HTML do layout. Alguns elementos ainda eram feitos em flash, como o menu.

A primeira versão do site Sidney Rezende era muito mais focada no jornalista do que na notícia. A home possuía uma animação 3D, com música e vídeo. Era espetacular na época, mas em pouco tempo tornou-se cansativa, o que nos levou da simplificação até a eliminação do Flash.

Trabalhei, também, na criação de algumas propostas de envelopamento da fachada da redação SRZD, que fica na Gávea, zona sul do Rio de Janeiro.

A Refazenda Produções nasceu da grande repercussão que o site de Gilberto Gil alcançou, na ocasião de seu lançamento em 96, criado pelo designer André Vallias a pedido da empresária Flora Gil. Desde então a empresa passou a ser referência criativa na internet brasileira.