“Eita, entrei numa startup!”

Criando um app de mobilidade em Figma

Theogenes Costa (THEO)
THEOcomH
Published in
5 min readDec 28, 2020

--

e colocando em prática um livro inteiro de metodologias de design!

Era 2019, eu estava morando em Botafogo no Rio de Janeiro e já fazia um tempinho que eu vinha colocando minha energia/atenção muito mais em comunicação e interação off-line, mas como bom capricorniano eu queria mais então decidi atualizar currículo, Linkedin e me aventurar!

A Inventos Digitais é uma catalisadora de ideias, negócios e carreiras digitais que ajuda pessoas a inventar um futuro melhor para outras pessoas. Uma das coisas que mais me encantaram por lá de cara foi o processo seletivo: humanizado, dinâmico e em poucos dias eu estava trocando ideia no whatsapp com Miguel, o fundador da Inventos Digitais e autor do livro Inventos Digitais: Produtividade criativa para inventar o futuro (que inclusive ganhei de presente mas também joguei dentro do meu Kindle, rs).

Todos os méritos deste artigo (:

Aqui fui responsável pela construção de processos e experiências digitais, desde a ideação junto aos clientes, passando por branding, práticas de pesquisa até a prototipação em Figma (meu preferido), Marvel e InVision.

No desafio a seguir trarei o processo de desenvolvimento de um app de mobilidade juntamente com a série de metodologias utilizadas pela Inventos Digitais (ah, ler o livro antes fez toda a diferença na hora de agir).

Modelo de Negócios Visual

Business Model Canvas

Beber da fonte do Lean Startup para focar no que realmente importa! A proposta dessa metodologia é mapear/organizar as informações mais relevantes em apenas uma folha e servir de roteiro para contar a história do negócio ou ideia que se quer levar para o mundo. Na Inventos Digitais todo o processo de criação é acompanhado pelos clientes, ou seja, eles fazem parte do jogo e criam junto a equipe de desenvolvimento.

Algumas horas e muitos post-its depois!
E organizadinho em PPT pra apresentar tudo no final do Sprint.

Proto-persona

não é o mesmo que persona!

Protopersonas são uma simplificação da persona tradicional. A principal diferença é que não são resultado de uma pesquisa formal. Resultam de oficinas de brainstorming em que o time usa seu domínio sobre o tema e sua intuição sobre quem vai comprar o novo produto ou serviço e o que vai motivar essa compra.

User profile, proto persona e persona: qual a diferença?

Protopersonas são o ponto de partida para começar a avaliar produtos e criar hipóteses imediatas sobre projetos. Também são úteis para reforçar na nossa consciência a necessidade de incluir o ponto de vista do cliente no planejamento estratégico. Trata-se de uma ferramenta especialmente poderosa quando os criadores das protopersonas vão definir a estratégia dos produtos e serviços.

Convidamos o time a criar personas dando nome, criando um avatar e inserindo informações demográficas, valores e comportamentos, metas e necessidades.
Definimos espectros para classificar os personagens.
E chegamos na proto-persona que nomeamos de Elton.

Proposta de Valor Visual

Value Proposition Canvas

Outra ferramenta também baseada no conceito de Lean Startup, este é o complemento do Business Model Canvas e mostra o possível ponto de vista do cliente usando o produto ou serviço.

Mais algumas horas, mais alguns post-its…
… e tudo organizadinho depois.

Pesquisas fora dos nossos encontros semanais

Benchmark

Enquanto desenvolvemos, também tivemos pessoas na equipe responsáveis pela pesquisa de benchmark. Você pode conferir a planilha que utilizamos para essa parte do processo clicando aqui.

Pesquisa de benchmark também será útil no Brand Sprint.

Brand Sprint

e criação da identidade visual

O principal objetivo aqui é tornar mais concreta a ideia abstrata da “nossa marca”. Depois de fazer o exercício, a equipe cria uma linguagem compartilhada para descrever o que é (ou o que quer ser) a empresa. A partir daí, as decisões de design e comunicação (identidade visual, tom de voz etc.) ficam mais coerentes.

O famoso Golden Circle!
Depois de mais horas de discussão e post-its, tudo organizadinho de novo (rs)
Definição da marca e identidade visual após Domain Name Checker.

Após rabiscos, mapas e wireframes

seguir para o Figma e microinterações!

Figma tem tantos benefícios e facilidades que é impossível não se apaixonar por essa ferramenta: gratuita, online, pode-se embutir uma série de funcionalidades e ainda trabalhar de forma colaborativa com o seu time.

Segue alguns cursos que fiz e super recomendo:

Área de trabalho do Figma,

Após a prototipação em Figma, adicionamos microinterações para deixar o protótipo mais próximo possível do que imaginamos. Você pode conferir o resultado do protótipo de alta fidelidade abaixo ou nesse link em Marvel.

Protótipo de alta fidelidade em Figma (as opções de zoom aparecem ao tocar na imagem).

Considerações finais

Tudo é um eterno aprendizado!

Colocar em prática essas e outras metodologias de design (tão facilmente explicadas no livro de Miguel) foi uma experiência incrivelmente enriquecedora! Em nenhum momento eu senti que tinha um chefe e sim um mentor, um líder atencioso e prestativo disposto a me ouvir de verdade.

Eu já tinha o hábito de sintetizar informações e captar a essência do que é mais relevante e essa capacidade ficou ainda mais aguçada depois dessa experiência. Foi incrivelmente valioso me desafiar em boa companhia.

--

--