Design Thinking documentado

Descrevendo uma abordagem utilizando design thinking e a metodologia double diamond.

null

Design Thinking Documentado

O hub que conecta projetos legais à freelancers das áreas de product design e development BossaBox propõe um desafio inicial para que os candidatos à ingressarem nessa plataforma.

Tratando-se de um trabalho hipotético, o processo documentado aqui pressupõe alguns pontos estratégicos e foca em mostrar como eu organizo minha atividade projetual e minha capacidade de traduzir os conceitos gerados em uma interface que contemple os objetivos propostos.


Very Useful Tools To Remember

Proposta:

Há tantos excelentes produtos SaaS surgindo no mundo, criados a partir de startups incríveis, que é fácil se perder. Precisamos de um repositório colaborativo para a organização dessas ferramentas, com fácil acesso.

Público e Contexto:

Ferramenta para o setor de tecnologia: empreendedores, designers, desenvolvedores e gerentes de produto.

Objetivo Geral: Se tornar o 1º hub de ferramentas SAAS no Brasil.

Para o nosso modelo de negócio, ferramentas SaaS são a resposta para que os melhores produtos digitais sejam criados por equipes remotos. Queremos ser reconhecidos como experts que somos, mas precisamos de um repositório agradável para demonstrar isso.

Alimentar nossa rede com as melhores ferramentas, para melhores projetos.

Para o nosso modelo de negócio, ferramentas SaaS são a resposta para que os melhores produtos digitais sejam criados por equipes remotos. Queremos ser reconhecidos como experts que somos, mas precisamos de um repositório agradável para demonstrar isso.


Problematização: Muita informação!

“Qualquer profissional do meio tecnológico hoje tem dificuldade em encontrar, filtrar e organizar as melhores ferramentas para utilizar em seu trabalho.”

Do's & Dont's

Do's:

  • Fazer uma experiência incrível para os usuários, facilitando ao máximo o processo de encontrar a ferramenta perfeita quando necessário
  • Ter um design lindo, minimalista e alinhado com as tendências no Vale do Silício. Simples, sem ser simplista

Dont's

  • Sem designs "mirabolantes" ou grandes surpresas. O foco é a experiência, descomplicar ao máximo esse processo.
  • Tentar competir com o Product Hunt. Seremos uma ferramenta para o setor de tecnologia: empreendedores, designers, desenvolvedores e gerentes de produto.

Funcionalidades Exigidas

  • Repositório colaborativo para ferramentas SaaS. Crowdsourcing de informações sobre ferramentas. Os que mais contribuírem para a plataforma, ganham pontos na BossaBox e podem trocar por prêmios (subscriptions, cursos, produtos, etc.).
  • Assim como em um Git, são realizados requests para colaborações com ferramentas. Fazemos uma curadoria e postamos as sugestões mais interessantes - editando as infos/imagens utilizadas para um design do nível da nossa plataforma. Adicionamos filtros e outras características que achamos melhor centralizar a decisão.
  • A partir disso, a plataforma opera como um crowdsourcing: Votações, comentários, marcações, etc. ocorrem 100% pela nossa rede.

Entregáveis

Neste projeto vou buscar exemplificar meu processo de pesquisa de referências e conceitos (user research será hipotético / suposto).

Além disso, objetivo entregar interfaces que contemplem o processo de onboarding.


Persona

Pedro Matos - Desenvolvedor - 32 anos, Brasileiro - Casado.

Desenvolvedor profissional, formado em ciências da computação, Pedro trabalha como freelancer em desenvolvimento. Produtividade e agilidade são cruciais em seu dia-a-dia, apesar disso Pedro considera que recebe uma avalanche diária de informação, incluindo novidades interessantes e se beneficiaria de um filtro/repositório para ferramentas que facilitem o seu trabalho. Sua personalidade é "mão na massa" e trabalhar consome mais do seu dia do que o tempo total dedicado para o lazer e estudos.

Explorando o arquétipo do desenvolvedor

Dev ou developer: Um DEV é uma pessoa que sabe como desenvolver software. Eles também são chamados de: Programadores, coders, engenheiros de software, UX, front, back, fullstack, embarcado, mobile e tantos outros.

Um DEV é alguém que estuda ou trabalha com desenvolvimento de software. E software em sua forma mais simples, pode ser descrito como uma série de instruções que alguém escreveu, parecido com uma receita de bolo.

DEVs trabalham em escritórios comuns, startups com escorregadores e piscinas de bolinhas ou até mesmo em qualquer lugar, se trabalharem remotamente.

Exploraremos o onboarding do dev Pedro, seu cadastro e primeiro login na aplicação. As informações já estarão adequadas a esta persona para contextualizar de uma maneira mais realista esse caso específico de uso da ferramenta.


Análises

Análise Conotativa

Significados que dão forma ao produto desenvolvido:

SaaS: SaaS, do inglês Software as a Service, são aplicações que oferecem algum tipo de serviço como armazenamento, troca de informações, colaboratividade e outras diversas possibilidades. Hub: Hub ou concentrador é o processo pelo qual se transmite ou difunde determinada informação, tendo, como principal característica, que a mesma informação está sendo enviada para muitos receptores ao mesmo tempo. Este termo é utilizado em rádio, telecomunicações e em informática.

Crowdsourcing: Crowdsourcing é um modelo de criação ou angariação de recursos através de iniciativas coletivas onde indivíduos com um interesse comum viabilizam, de alguma forma, uma ideia ou projeto.

Análise Denotativa

Significados que dão essência ao produto desenvolvido:

Colaborativo: Todo aplicativo ou ferramenta que proporciona a troca de informações de forma ágil e, principalmente, simultânea, atualizada em tempo real, é um software colaborativo, em sua essência.

Simples e Fácil: Não queremos ferramentas complicadas, queremos soluções que facilitem nosso fluxo de trabalho e melhorem a entrega de nossos resultados. Não queremos mais uma notificação, a não ser que seja muito relevante. Não queremos mais uma aba no navegador. Queremos informação, simples e fácil.

Automação e inteligência: Queremos uma ferramenta que entregue com inteligência. Há um imenso volume de dados sendo gerados. A tecnologia de computação se sofisticou. Não queremos enrolação, queremos valor.


Avaliar e analisar referências

Product Hunt

“Descubra sua próxima coisa favorita”

O uso da expressão coisa me dá a idéia de abrangência e liberdade, o que eu vou encontrar e me encantar pode ser qualquer coisa. Não restringe a ferramenta, aplicativo, solução, etc.

Transmitem credibilidade e autoridade através da própria comunidade e marcas associadas ao produto, priorizando a informação deles e não necessariamente um branding específico da Product Hunt.

Padrão cromático neutro, considerei muitos elementos na tela e a única hierarquização deles é através do contraste de tamanho de elementos.

Me parece sem priorização em termos de conteúdo e a busca ou conceito de descoberta parecem não ser explorados de forma clara.

Não é um produto que eu utilizo, portanto no começo me senti um pouco perdido.

Navegando compreendi que o bloco upcoming mostra ideias no seu pré-lançamento e os usuários da plataforma que se inscreveram nelas. Os blocos today, yesterday listam ferramentas novas, sua avaliação total, comentários e categorias.

Outras funcionalidades me parecem forçadas e deslocadas como rádio e newsletter.

Num aspecto geral, é bem focado em comunidade e funcionalidades paralelas à busca reforçam isso como empregos, comunidade fechada, rádio e um produto exclusivo deles (Ship).

STARTUPSTASH

“Um diretório selecionado com ferramentas e recursos para você construir uma startup”

A sensação que eu tenho é de algo focado na sua funcionalidade principal: busca e descoberta.

O vocabulário utilizado dá a intenção de seriedade e empreendedorismo. O laranja traz a ideia de novidade e criatividade.

Querem passar um ar de profissionalismo e foco na solução que eles oferecem.

A hierarquia de informação é bem interessante nesse caso, logo após as essential tools...que são provavelmente marcas destacadas por alguma estratégia comercial, o Startupstash oferece uma categorização na busca de ferramentas por área de atuação.

Outro ponto interessante é a área de coleções de recursos.

Apesar de contar com reviews e compartilhamento, me parece que essa plataforma peca em termos de engajamento na comunidade.

Stackshare

“Discover, compare, learn”

Um exemplo totalmente voltado para a questão comunidade. A lógica é um pouco diferente dos outros produtos analisados.

No Stackshare ao criar um perfil você delimita sua área de descoberta de acordo com os interesses e ferramentas que já utiliza.

O fator descoberta é altamente atrelado a experiências e descrições de uso da própria comunidade a respeito dos stacks de ferramentas utilizados por suas empresas.

Nubank

“Ser Nubank é reinventar sua vida financeira.”

Diferenciado desde o início, o Nubank foi rapidamente de um serviço para uma marca.

Linguagem consistente e um excelente posicionamento de marca são apenas alguns dos aspectos que destacaram a fintech nos últimos anos.

GitHub

GitHub também é 100% focado na sua comunidade e em questões colaborativas é um exemplo a ser seguido.

Seu público de uso é praticamente formato por devs, ou seja, o que está apresentado ali é validado, testado e utilizado diariamente por este público.

Nota-se que o fator visual é simples e beira uma interface de sistema operacional: neutro, objetivo e funcional. Mesmo assim transparece credibilidade e uma identidade própria.

Um hub que respira desenvolvimento e provê tecnologia e ferramentas para facilitar o trabalho deste público.


Conceito inicial

Mesmo sabendo que se trata de um projeto hipotético, senti a falta de uma identidade visual ou algum conceito gráfico que eu pudesse me apoiar.

Ao contrário do processo documentado aqui, a criação do conceito de identidade visual foi superficial, apesar de apresentar um aspecto que será explorado em funcionalidades e questões gráficas do projeto.

Lâmpada

A lâmpada é um dos objetos inventados mais utilizados em nossas vidas.

Além da tecnologia e eletricidade que ela representa, a lâmpada é um símbolo gráfico do ato de ter uma idéia.

A lâmpada tem dois estados, então utilizaremos esta característica ao nosso favor, como o VUTTR se trata de um repositório, o usuário escolherá suas ferramentas favoritas “acendendo” o botão da lâmpada.


Onboarding

Vamos focar no processo de onboarding: o primeiro contato após o sign up, apresentando as principais funcionalidades da ferramenta.

O onboarding, segundo estudos, é crucial para uma baixa taxa de abandono no uso de apps e outras ferramentas SaaS.

Neste projeto vamos projetar o onboarding do VUTTR, apresentando o produto em duas estapas:

  • Na primeira etapa mostraremos a proposta de valor do produto, o que desejamos entregar e qual o nosso compromisso com o usuário.
  • No segundo momento apresentaremos as funcionalidades do aplicativo de maneira guiada e interativa.

Card Sorting

Para organizar a jornada do Pedro de maneira inicial utilizei uma forma de card sorting.

Vamos focar na persona definida para nossa aplicação, o dev Pedro:

Supondo que ele seja um novo usuário da plataforma, e devido aos comentários de outros colegas a respeito do VUTTR ele resolveu se cadastrar em nossa plataforma.

Supondo ainda que o Pedro já tenha uma breve noção da ferramenta e de algumas ferramentas análogas (como as analisadas anteriormente), as expectativas dele em relação ao VUTTR são: Entender rapidamente como se utiliza a ferramenta: cadastro, descoberta e compartilhamento.

Card Sorting

Para organizar a jornada do Pedro de maneira inicial utilizei uma forma de card sorting.

Vamos focar na persona definida para nossa aplicação, o dev Pedro:

Supondo que ele seja um novo usuário da plataforma, e devido aos comentários de outros colegas a respeito do VUTTR ele resolveu se cadastrar em nossa plataforma.

Supondo ainda que o Pedro já tenha uma breve noção da ferramenta e de algumas ferramentas análogas (como as analisadas anteriormente), as expectativas dele em relação ao VUTTR são: Entender rapidamente como se utiliza a ferramenta: cadastro, descoberta e compartilhamento.

Primeiro Contato

No primeiro contato uma experiência agradável é crucial.

Levarei em consideração alguns aspectos que facilitam o ingresso e uso da ferramenta:

Fase 1: Sign up, apresentação e proposta de valor.

Sign Up facilitado, exigindo somente o e-mail. Promessa de entregar uma experiência agradável, mediante informações mais detalhadas do usuário. Nos esboços abaixo, detalhei um pouco esse fluxo:

Avaliação de uma ferramenta: O caráter colaborativo da ferramenta e onde sua funcionalidade de descoberta vai operar é através das avaliações de ferramentas feitas por usuários com perfil similar ao do Pedro.

Organização das ferramentas: Além da descoberta e avaliação, uma das promessas feitas ao Pedro é de que ajudaremos ele em sua produtividade, logo organizar estas ferramentas por categoria ou uso e dar a liberdade ao usuário de compor suas próprias categorias é primordial.

Nos esboços a seguir, uma versão inicial da interação de avaliação proposta. Ainda que carente de melhorias, já dá uma noção do fluxo de uso dessa funcionalidade.

Considerações

Ao evoluir o processo e fazer uma análise mais profunda em relação à jornada do usuário, surgiram insights pós primeiro protótipo de baixa fidelidade que foram complementadas ao longo do refinamento da ideia.

Na etapa de prototipagem, serão levados em consideração detalhes individuais de cada etapa / interação.

Também serão criados desdobramentos não previstos num primeiro momento na geração de alternativas e avaliação da jornada do usuário.

Sobre funcionalidades e desdobramentos:

Como se trata de um projeto hipotético e não tenho muito tempo disponível para me dedicar (time is money), obviamente não vou me aprofundar extensivamente em desdobramentos e possíveis funcionalidades dessa aplicação. Apesar disso, gostaria de levantar questionamentos e outros insights que serviriam tranquilamente para ampliar a discussão sobre features e fluxos do VUTTR.

-Conectar-se: Conectar-se aos seus colegas pode ser feito de diversas maneiras, seja diretamente através do e-mail, buscando pelo nome da pessoa, sugestões feitas pela própria aplicação, sincronização com agenda ou plataforma de e-mail.

-Compartilhar: O compartilhamento das ferramentas e apps descobertos pode ter múltiplos enfoques: o primeiro deles é o mais básico, seria o da socialização e compartilhamento com outros potenciais usuários. Um outro compartilhamento possível seria o de feedback direto, conectando o usuário da ferramenta a um responsável ou à própria equipe de desenvolvimento da aplicação (vide issues do git, por exemplo.).

-Organizar: Organizar suas coleções de apps pode ter uma série de formatos também. Um exemplo interessante seria uma espécie de bundle para começar um projeto. Pegando o link de nossa persona, o dev Pedro, ele poderia estabelecer uma coleção de ferramentas específicas para o início de um projeto de back-end development.

Mais uma vez: Referências.

Antes de dar início à fase de protótipo, vou retomar novamente a pesquisa e estabelecer uma linha estética para ser aplicada.

Como nessa situação creio que o fator estético tenha um peso considerável, igual ou maior que o processo de design apresentado.

UI Design

Após a definição inicial dos átomos e algumas moléculas, comecei a compor os primeiros protótipos de maior fidelidade.

Critérios de desenho:

Visual leve, através de soft ui elements ou neomorphism, como mencionado na pesquisa. Focar primariamente no fluxo e em mostrar o conteúdo de maneira amigável. Aproximação mobile first.