30 Fans (Showcase)

Como se motivar trabalhando em um produto digital.


Introdução

Meu ponto chave para este artigo é documentar boa parte do meu processo de construção de um produto digital. Irei mostrar trecho de e-mails com aceitação de proposta da identidade visual, e tudo que aprendi fazendo parte deste projeto. Além de trabalhar como Product Designer, contruí junto com o programador Roberto Viscardo (a.k.a. Betão); e outro programador, Gustavo Rezende que caiu de paraquedas para nos ajudar.

O que é o projeto 30 Fans

A proposta desse projeto é ser um clube de associados para fanáticos por esporte. Qualquer esporte. Desde que tenha um time. Hoje o foco é futebol, você pode se associar a um clube pré-cadastrado, ou sugerir adicionar o seu “time de rua” que joga toda quinta na quadra do seu bairro.

Você paga um valor X para sua foto e nome ficarem na página do time. O conceito inicial era apenas 30 fãs do ano que comprarem a “vaga”. Quando o ano seguinte chegar, a lista ficará disponível novamente. Mas o do ano passado continuará com seu nome e linda foto preenchida. Existem alguns projetos lá fora que funcionaram em um conceito parecido. O Daniel (O cliente gringo), Product Owner, está mudando o conceito de pagamento e benefícios ao longo do tempo, está adaptando o conceito ao longo das semanas. Isso é normal. Mas não vem ao caso agora.

MVP no ar

O Daniel, como qualquer Product Owner, precisava validar a ideia o mais breve possível e tínhamos praticamente 5 semanas para fazer o MVP. Decidi que era o momento ideal para estudar metodologia e tecnologia nova focada em agilidade. Breve falarei detalhadamente sobre o que salvou horas de trabalho.

Por que aceitei o projeto

Desafio. Apenas isso. Não faz mais sentindo se eu olhar um projeto que chega na minha mail inbox e não ver significado em trabalhar.

Cosme, mas mesmo pagando bem deve-se recusar? Preciso entrar no projeto para aprender algo novo, e melhor ainda, se o produto tiver um conceito incrível. Usar em todo projeto a mesma ferramenta, a mesma caneta, o mesmo processo… é tedioso demais. A mesmice me incomoda e sempre evangelizo todos a buscarem novos alternativas, principalmente quando está ligada a organização e produtividade.

Além do lado técnico, eu nunca trabalhei em um projeto em que fosse ter um contato 100% em Inglês de forma presencial. Conversas sobre a validação do produto, direção do conceito, apresentação, mudanças técnicas e defesa de ideias tudo em inglês. Foi essa imersão na língua inglesa que eu buscava este ano. E foi incrível.

O que aprendi de novo?

Aproveitando a oportunidade de ser um projeto novo onde teria carta branca tecnicamente, aprendi a usar Sass como pré-processador CSS, o editor de código open source Brackets (Dica do @ruanmer), o controlador de versão Github, e para gerar protótipos navegáveis sexy o InVision)— Com isso foi fluido validar ideias rapidamente.

Agile Design

Antes de abrir seu editor visual favorito, vamos planejar. Eu sei que é tentador ligar o seu Mac para caçar referências, mas as equipes mais produtivas, com os projetos mais ágeis, planejam e entendem bem o que farão antes de segurar o mouse. Aprendi isso muito bem, dentre outras coisas, em hackathons (vale um outro artigo dedicado).

Se divertindo trabalhando em 3 passos:

Passo 1: Conversa e Sketch

A primeira fase do meu pré-projeto foi uma conversa de 1 hora com o Product Owner gringo para capturar a essência. Podemos chamar de planning.

Depois que eu diluí a ideia, fiz um sketch na hora com o Daniel (O cliente gringo).

Tradução literal: “Às vezes projetar é destruir o produto, então o usuário pode reprojetar junto.” https://twitter.com/markodugonjic/status/474834026910724096

Ele fez umas 2 considerações. Uma das frases ditas foi: isso simplificou bastante.

Chegando em casa fiz uma to-do rápida no Trello para não esquecer de colocar na interface alguma ideia genial e as premissas para a identidade visual. Nessas to-do’s o ideal é fazer junto com o P.O. para não ter ruído de comunicação quando estiver executando. Mas lembre-se: não perca muito tempo em detalhar essa to-do, faça isso em 1 hora. É o suficiente. Confia em mim. Se vai estender disso já não é mais MVP.

Passo 2: Rabiscando a marca no papel

Como só tenho finais de semana para me concentrar full-time em projetos pessoais, tive 5 dias para refletir sobre o conceito do produto. Em um sábado a tarde rabisquei umas marcas horríveis como bom ilustrador que sou (usando conceito de medalha) e então fiz a logo. Acredito que trabalhei umas 3 horas. Para a marca de um MVP, é um tempo agradável.

Eu sei que “to be unique” não está bom suficiente. Foi alterado para apenas “be unique” depois.

Após mandar para o gringo recebi esse e-mail, sem rodeios, na manhã de segunda bem cedo:

Man, THANK YOU. It is simply fantastic!
Everyone told me you were talented.
Thnx again!

Entregue valor. Entregue valor. Entregue valor. Quase um mantra. Tatue isso no verso das mãos se possível.

Passo 3: Interface base da home do produto

Segue abaixo o primeiro e-mail apresentando a ele o resultado da primeira versão de interface. Não julgue meu inglês, estou em eterno aprendizado. Minha língua mãe é Português. ;)

I’m feeling so proud of myself as the new redesigned is going. ;)
So… hasn’t been easy to merging whole information. In the “huge header” I’m projecting how a user would be a new fan. However a older fan can access button on header.
“How it works” is not finished yet. If you has a good idea (or the developer, Betão), tell me as soon as possible.
Above we have a “user stories”. You need help me to describe it:
As a curious user I want to know what is 30fans. So I can end my curiosity.
As a confusing user I want to know how it works. So I can register me.
As a interested user I want to be a fan. So I can have my avatar on hall of fame. As a ______ I want to ______. So I can _________.
Help me to create the user stories and shall build together the another features of the home and other pages. The Betão’s help will be good a lot.
I need your help about what I did until now. Please! ;)
Interação principal da página inicial. O “how it works” seria discutido em outra reunião.

E após isso enviei também o link da interface usando o InVision. Diga-se de passagem, é uma ferramenta incrível para o time entender o fluxo navegacional e colaborar na construção.

O objetivo dessas três telas iniciais foram para testar a expectativa do Daniel — vide que diluí completamente o fluxo navegacional que o produto tinha. Eu realmente precisava validar o mais breve possível o que eu estava fazendo, por mais inacabado que possa estar para uma homepage. Daqui em diante se algo está muito fora do escopo, o trabalho será perdido.

Segue a resposta para as telas:

Man, this is radical — completely fantastic!
I will forward to Betão.

Quando um cliente esmaga o botão de like no seu trabalho, ainda mais sendo seu primeiro “trabalho gringo”, é gratificante. Se resume para o Product Designer como: Ok, ele realmente entendeu o conceito.

E por que eu chamo várias vezes de produto? Por que projeto é a palavra mais vaga do mundo que você pode dizer sobre algo que você apresenta às pessoas.

PSD não é browser

Lembra quando disse para fazer a to-do? Nela vai estar o que realmente é importante para entregar valor. Então, pare de encher a sacola de doce se o bolo de maçã está no final da lista. Organize o PSD o suficiente para um ser humano se achar sem usar o search do Photoshop. Não faça do PSD uma documentação. Se quer guiar estilo de interface se esforce em um bom guide no futuro. Agora não é a hora, ok?

A partir de agora ficará um pouco mais técnico. Só passe a leitura à diante se estiver familiarizado, ou quer aprender algo, com front-end development (HTML/CSS/JS) e interface design (Photoshop).

Pré-processador CSS

Não sei como sobrevivi sem isso em alguns projetos. CSS por natureza é complexo para fazer manutenção e às vezes mecânico para codificar, ou seja, rapidamente seu CSS fica um chiqueiro e desmotivante. Organização e velocidade é o que um bom pré-processador pode oferecer.

Criação de variáveis, imports, nesting, mixins e extend. São algumas das funcionalidades mágicas. Cores, margens, textos e hacks — tudo sendo gerenciado em um arquivo separado sem precisar ficar caçando no finder do seu editor de código. Basicamente você cria um dicionário de palavras, e vai susurrando ao longo dos seletores.

O futuro é o CSS incorporar por default essas incríveis funcionalidades. Vamos aguardar.

Um editor de código para Web Designers

Neste projeto optei por usar o Brackets abandonando de vez nosso estimado amigo Sublime. É um editor open source escrito em HTML, CSS e JavaScript. Fundado pela Adobe. Esqueça editores de código com centenas de painéis, ícones e ferramentas (Bye, IDE) que você nunca vai usar (I’m sorry, Visual Studio).

A experiência com ele foi excelente. Leve e roda junto com o Chrome, Firefox, Photoshop, Illustrator e Rdio roubando memória do seu computador. Não trava por nada, eu juro. ;)

Igual ao nosso já conhecido Sublime ele trabalha com as famosas Extensions. Vou citar algumas que eu usei neste projeto:

Auto Brackets: Fechando as chaves, colchetes e parênteses quando você abre, e coloca o ponteiro no lugar certo. Só resta você digitar o valor.

Autosave Files on Window Blur: Você está digitando por horas e esqueceu de salvar? Quando você troca de janela ele salva sozinho para você.

Bootstrap 3 Skeleton: Quer testar alguma ideia ou prototipar algo rápido? Ele gera uma página base do Bootstrap. 1 click e nada mais.

Brackets SASS: Converte arquivo Sass (*.sass/*.scss) em .CSS para você. Em tempo real.

DEVimg for Brackets: Com DEVimg você insere imagens randômicas (placeholders) na dimensão que você quiser para validar aquele espaço na interface. Chega de ficar caçando no Google Image.

Emmet: É poético. O The Flash que se cuide. Assim como o Sass, tem uma certa curva de aprendizado. Mas com o tempo você vai ganhar velocidade. Com ele você irá usar abreviações tanto no CSS quanto no HTML para gerar seu código.

Por que você como Interface Designer trabalha com front-end também?

Eu gosto muito de responder essa pergunta. Posso não transparecer enquanto trabalho mas nem sempre codificar é divertido. O que realmente me motiva a estudar/trabalhar com front-end com frequência é que colocar a ideia (layout) funcionando é muito empolgante. É assim que consigo de fato gerar vida a minha interface estática.

Sobre a evolução do produto

Se estiver enxergando alguns elementos desalinhados ou botão esteticamente distante do planejado, deixa ele lá. É uma das coisas que aprendi sobre MVP no livro Guia da Startup: Você precisa sentir vergonha do seu produto quando lançar.

Então preciso fazer de qualquer jeito? Não. Esqueça os efeitos e interações fluidas. Como bom profissional você vai focar na qualidade, mas inclinado na flexibilidade e escalabilidade do seu produto. Assim após o modelo funcional ganhar vida, você fará as iterações necessárias para deixá-lo apaixonante. Eu sei que é difícil. Eu luto contra mim mesmo também.

A essência da evolução está na capacidade de adaptação.
— Algum documentário na Discovery Channel

Problemas do lançamento

Até antes de aplicar efeitos e as interações charmosas tive que resolver uns 2 bugs que só foram percebidos na hora que foi para o servidor oficial (Sempre acontece algo quando vai para a nuvem):

  • Arquivo JavaScript e imagem com “Not Found” (Error 404);
  • Por apenas 1 erro no console JS pode parar de funcionar várias interações essenciais para uma melhor experiência (Não ignore os alertas);
A culpa é do… Para de apontar o culpado de um bug. Chame quem precisar para solucionar. Qualidade do produto é responsabilidade de todo o time. E como diria a Nike: “Just do it”.

Mobile First

Não apliquei Mobile First na construção do produto pois era um produto muito simples. Não fazia sentido naquele momento. De qualquer forma a versão mobile do MVP foi criada em 6,5 horas. O que achei um tempo razoável.

Usando o Chrome Emulation

Para testar os ajustes na construção do site responsivo eu usei o Chrome Emulation. É uma infinidade de dispositivos que possivelmente irão acessar nosso produto web. Por conta dessa complexidade se torna um verdadeiro martírio para criar a versão responsiva. Esta beleza nativa do Chrome veio para ajudar na visualização dos ajustes para a versão mobile.

Com ele você consegue: Ajustar para resolução de muitos dispositivos, inspetor de media query, condições de rede, mudança de user-agent, setar geolocalização, simular orientação (portrait ou landscape) e outras coisas.

Todavia sempre teste no dispositivo nativo pois alguns ajustes sempre aparecerão. Se não possuir um dispositivo móvel da Apple em mãos use o iOS Simulator do Xcode.

Chrome Emulation com iPhone 5 selecionado (Console aberto)

Próximas iterações para desmembramentos futuros

  • Usar SVG nas imagens vetorizadas para criar sprites e não ter problemas com elementos pixelados em tela retina;
  • Organizar e modularizar funcionalidades;
  • Inserir multilingua na interface;
  • Fazer o “How it works”;
  • Ajustar interface em línguas estrangeiras;
  • Criar logo fake para ilustração de time;
  • Criar formulários de contato;
  • Implementar timeline dos últimos spots comprados na homepage.
  • To be continued…

Link para as telas do 30 fans: http://on.be.net/10ZZ1VC

Finalizando, é isso que me motiva a trabalhar com tecnologia. Está em uma evolução constante, em um curto período de tempo, previsto na singularidade tecnológica.

Abrace um projeto, faça algo incrível com ele, faça de seu laboratório criativo, trabalhe com pessoas que nunca trabalhou antes, aprenda algo novo e ejete sua cadeira da zona de conforto.

Obrigado pelo espaço.