Leandro Dantas Calvão User Experience Designer Pesquisador em Inovação, Design e Evolução Tecnológica Portfólio Trabalhos selecionados Atualizado em Setembro de 2014 Conteúdo Apresentação Minha experiência Meu conhecimento Minhas habilidades Design Projetos Rio Fotostoria Qual é a boa? QR Post BitBonus Design de serviços transição escola-trabalho Allegretto Advogados Associados Olocall Eventos Licks Associados Logotipos projetos diversos Pesquisa Livro Do email ao Facebook: uma perspectiva evolucionista sobre os meios de conversação da internet Blog Inovação, Design, Tecnologia e Evolução 1
Apresentação Olá, sou Leandro Dantas Calvão, um User Experience Designer e Designer de Interfaces do Rio de Janeiro. Como User Experience Designer e Designer de Interfaces atuo em projetos de produtos digitais, desde sites e sistemas baseados na web até aplicativos para mobile. Contribuo para os projetos desses produtos desde a estratégia até o desenvolvimento da interface, considerando sempre os usuários nesse processo. Tenho formação e experiência em Arquitetura, que me proporcionou uma visão sistêmica de projetos complexos. Meus estudos seguiram com formação em Webdesign, focada no uso de ferramentas para design e implementação de interfaces para sites e sistemas baseados na web. Após essa mudança na carreira me especializei em Usabilidade e Design de Interfaces, adquirindo conhecimento sobre as diversas etapas para o design de um produto digital envolvendo os usuários. Através do Mestrado em Sistemas de Informação e cursos complementares em Arquitetura da Informação, Gestão do Conhecimento, Gestão de Projetos, Design Thinking e Design para Mobile e com a leitura de diversos livros sobre as áreas relacionadas a projetos para a web considero ter uma formação para uma área tão abrangente como User Experience Design. Na minha carreira atuo há mais de 10 anos em projetos de clientes como profissional freelancer, projetos internos e para clientes de uma cooperativa de tecnologia da informação, como empreendedor e designer em uma startup e como designer em outra startup.a partir desta vivência, atuo desde a definição da estratégia do produto e do negócio, passando pela análise de requisitos, arquitetura da informação, design da interação, design visual e desenvolvimento da interface. Meus pontos fortes são capacidade de análise, geração de ideias, organização da informação, diagramação de layouts e relacionamento com equipe. 2
Minha experiência UX Designer e Designer de Interfaces 2012-2014 Motivação independente Projeto do produto, incluindo design da experiência do usuário e das interfaces Modelagem do negócio Marketing Design de portais para realização de eventos e programa de descontos Design de aplicativos para mobile Webdesigner e UX Designer 1993-2012 Trabalho com equipe multidisciplinar Experiências com projetos para clientes Design de websites corporativos, sistemas de apoio a negócios Ambiente com incentivo à inovação 2010-2012 Pesquisador em Evolução das Tecnologias Prática em pesquisa Análise de domínio Escrita de livro 3
Meu conhecimento 4
Minhas habilidades 5
Design 6
Projeto Rio Fotostoria site 2014 Objetivo: Consolidar e facilitar o imenso conteúdo de fotos disponível sobre o Rio de Janeiro. Este conteúdo está espalhado por diversos sites, aplicações de álbuns de fotos, blogs, fotologs, fóruns e grupos em redes sociais. Fica difícil desta forma conhecer de forma sistemática a história de um local e sua evolução ao longo do tempo. Solução: Site que possibilita conhecer a história de um local através de diversos filtros, como período, localização e tipo de local. O projeto é focado inicialmente no Rio de Janeiro. O projeto é colaborativo e visa a consolidar o conteúdo de fotos sobre o Rio de Janeiro existente na web. A ideia é um projeto colaborativo, que disponibilize ferramentas de inclusão de fotos com indicação e link para a fonte original. A ideia é envolver as pessoas já interessadas em publicar este conteúdo, bem como as instituições, colecionadores e herdeiros de fotógrafos que registraram a história da cidade. O software deve ser livre e sua base utilizada para projetos similares em outras cidades. Funcionalidades Busca (por endereço completo, rua, bairro, palavra-chave) Mapa (utilizar api do Google Maps): para navegação por localidade Timeline: para encontrar fotos em determinado ano Categorias: para navegação por tipo de localidade, como residência, edifício residencial, praça, praia, escola, hotel, etc Bairro: navegação por bairro Lista de resultados: lista de fotos com cada item com nome, descrição, categoria(s), bairro, thumbnail da foto, data, fonte, fotógrafo e palavras-chave Página da foto: foto ampliada, nome, descrição, categoria(s), endereço, bairro, data, fonte, fotógrafo, palavras-chave, comentários Cadastro do colaborador Cadastro da foto 7
Wireframes Home Foto ampliada 8
Projeto detalhado Qual é a boa? aplicativo 2014 Problema: escolha coletiva de uma programação Etapas Imersão: identificação do problema, análise do contexto e do perfil dos usuários e suas necessidades. Persona: criação de perfil representando o público-alvo para criar empatia com os usuários. Cenário: descrição de contexto de uso para criar empatia com os usuários. Ideação e solução: ideias foram geradas em brainstorming, seguido de identificação da melhor ideia para a solução do problema. Mapa de experiência do usuário: a experiência do usuário foi detalhada em um mapa a partir das ideias. Funcionalidades: as funcionalidades foram identificadas e descritas. Diagrama de Arquitetura da Informação e Design de Interação: definição da navegação do usuário e do fluxo de tarefas. Wireframes: layouts das interfaces do aplicativo e sua descrição. Imersão O problema foi identificado após acompanhar diversas combinações de saída em grupos de amigos. As escolhas de cada membro do grupo ficam perdidas no meio da conversa e o aplicativo de mensagens em grupo não é integrado com os guias de programação. Como resultado a tomada de decisões sobre a escolha do programa fica limitada. 9
Para maior imersão no problema foi criada uma persona, representando um perfil de usuário, e um cenário. Persona Marcela, a líder do grupo de amigas Descrição do perfil Marcela tem um grupo de 5 amigas que saem toda sexta-feira à noite. Marcela é a líder do grupo, aquela que tem a iniciativa de sugerir a programação e começar o bate-papo no grupo para combinar as saídas. Motivação Encontrar sempre os melhores programas e novidades para fazer na noite de sexta. Dados demográficos Mulher, publicitária, carioca, solteira, 26 anos Classe média alta Tecnologia Utiliza o Google e portais para consultar programação Utiliza o WhatsApp para combinar encontros com as amigas Recursos Marcela e as amigas combinam as saídas consultando o jornal ou portais da internet e enviando mensagens pelo grupo do WhatsApp. Expectativas Facilitar as decisões do grupo. As amigas costumam trocar muitas mensagens até tomar uma decisão. As opiniões de cada uma ficam perdidas no meio da conversa. 10
Cenário É sexta-feira e Marcela quer sair com as amigas. Abre o jornal e consulta o Guia de Programação do caderno especial de sexta-feira. Busca por seções de shows, cinema, teatro e gastronomia. Marcela fica na dúvida entre 3 opções. Marcela abre o WhatsApp e envia uma mensagem para suas amigas Paula, Adriana, Roberta, Carla e Jaqueline descrevendo as opções de programa. Cada uma consulta mais informações sobre os programas no jornal ou nos sites e enviam mensagens escolhendo o programa preferido ou sugerindo outros, de acordo com seus interesses. Após várias interações e trocas de mensagens tomam uma decisão sobre o programa da noite. 11
Ideação e solução A partir da análise da persona e do cenário de uso foram propostas soluções para o problema em uma sessão de brainstorming. Solução escolhida: aplicativo para celular que integra um sistema de mensagens e enquetes a propaganda de lugares para sair. O programa é integrado à agenda de contatos do usuário. Deve haver um banco de dados de lugares para a sair à noite ou programas diversos. O usuário seleciona os programas e divulga para seus amigos as opções junto a uma mensagem. Os amigos votam na sua opção favorita e há uma decisão sobre onde ir. Após a decisão o programa entra na agenda de cada um. O ganho está no uso de promoções relacionadas aos anúncios. Pagando uma mensalidade o anunciante tem direito a colocar promoções e mais informações sobre programação e a um formulário para reservas. O usuário recebe sugestões de programação de lugares favoritos. O aplicativo pode ter listas de lugares onde o usuário mais vai e pessoas com quem o usuário mais sai. Fornecedores com planos pagos tem acesso a listas dos usuários que mais frequentam a casa. 12
Mapa da Experiência do usuário As ideias foram detalhadas no Mapa de Experiência do Usuário do aplicativo, descrevendo as etapas do usuário para alcançar suas metas. 13
Funcionalidades Guia de programação - o usuário filtra por nome, tipo de programa, data e local. O Guia exibe os resultados com: título do programa, data e horário, local e imagem. Para cada programa o usuário pode realizar ações como: exibir detalhes, selecionar este programa e incluir em agenda ou enquete. Agenda do usuário - os programas escolhidos pelo usuário e aqueles definidos em enquetes com os amigos aparecem em sua agenda em ordem do próximo programa para aquele a ser realizado mais no futuro. Enquete - os programas que o usuário tiver dúvida ele pode selecionar e incluir em uma enquete, que pode ser compartilhada com os amigos. O usuário tem a opção de incluir mais programas na enquete, o que direciona novamente para o Guia de Programação. Ao clicar em Compartilhar aparece a lista de amigos com checkbox ao lado de cada amigo para que possa ser selecionado. A seleção de pelo menos um amigo habilita o botão Convidar para enquete. A enquete compartilhada possibilita o envio de comentários logo abaixo das opções. Cada participante da enquete pode selecionar uma opção de programa. A opção mais votada aparece em primeiro lugar. O usuário que convidou pode a qualquer momento excluir a enquete ou encerrá-la. Com a enquete encerrada cada participante pode incluir o programa mais votado em sua Agenda. Uma enquete salva aparece na lista de enquetes de cada participante. Notificações - Cada enquete ou sugestão de programa enviada por um amigo, sugestões de programas do aplicativo a partir das preferências, mensagem comentada em uma enquete ou alerta de programa agendado aparece na lista de notificações do aplicativo e nas notificações do celular. Lista de amigos - Ao se cadastrar no aplicativo e a qualquer momento o usuário pode importar amigos do Facebook ou da sua agenda do celular e convidar aqueles que ainda não são cadastrados no aplicativo. A lista de amigos exibe em ordem alfabética uma imagem e o nome do amigo. Ao lado de cada amigo há a opção de seleção em checkbox para ações de excluir Preferências - o usuário define filtros para que o aplicativo já sugira programas, como locais, dias da semana, tipo de música, comida, ambiente, público, filme, peça, etc. 14
15
Wireframes A partir da definição da navegação as telas do aplicativo foram definidas em wireframes. 16
17
18
Projeto QR Post site e aplicativo - 2014 Problema: espaço reduzido para apresentação de conteúdo em materiais impressos Solução: aplicação mobile com capacidade de ler um código QR impresso e direcionar diretamente para conteúdo em áudio, vídeo ou texto. O conteúdo também poderá ser lido por outros leitores de QR Code, porém sem apresentação direta. Desenvolvi o planejamento do negócio, incluindo o modelo; planejamento da marca, incluindo design do logotipo, planejamento do produto, incluindo a definição das features; design de interação, definindo o fluxo de tarefas; arquitetura da informação, incluindo definição da navegação, busca, organização das páginas e rótulos; design da interface, incluindo diagramação e edição dos gráficos; design do conteúdo, incluindo redação de todos os textos do sistema; desenvolvimento da interface, codificado em HTML e CSS; design e desenvolvimento da interface do aplicativo para Android, codificado em XML. Site: www.qrpost.com.br 19
Tela do site Painel de controle 20
Tela do site - post 21
Telas do aplicativo - post Escanear código Digitar código Post - conteúdo web Post - conteúdo áudio Post - conteúdo vídeo 22
Projeto BitBonus site e aplicativo - 2014 O projeto partiu da integração de duas ideias distintas: a rede social Emocion, voltada para realização de atividades entre amigos, como organização de eventos e combinação de programas e o sistema de descontos BitBonus, baseado no acúmulo e uso de bônus em compras realizadas em fornecedores associados ao sistema. A rede social foi descartada e somente o sistema de descontos implementado, com previsão de lançamento no segundo semestre de 2014. Realizei a arquitetura da informação, incluindo definição da navegação, busca, organização das páginas e rótulos e o design da interface, incluindo diagramação e edição dos gráficos e desenvolvimento da interface, codificado em HTML e CSS. 23
Telas da rede social Emocion Visão geral, Atividades e Guia de Fornecedores 24
Telas da rede social Emocion detalhe edição de enquete e filtro de busca do Guia 25
Home do Sistema BitBonus 26
Projeto Design de Serviços transição escola-trabalho - 2013 O projeto foi realizado durante o curso online de Design Thinking da Universidade de Stanford em três etapas: Empatia e Definição: foi realizada uma entrevista com um professor-coordenador de uma faculdade para identificar suas necessidades, modelo mental e sentimento a respeito do contexto da transição dos alunos entre a escola e o trabalho. Essas necessidades fora mapeadas em um Mapa de Empatia. A análise de conteúdo da entrevista proporcionou identificar o problema. Ideação: foi realizado um brainstorming com troca de ideias entre um grupo de participantes do curso. As ideias geradas foram agrupadas em grupos representados em um Mapa Mental. Três ideias foram selecionadas a partir de critérios como a mais prática, a mais disruptiva e a favorita. Prototipação e Teste: as três ideias foram integradas no protótipo do serviço, documentados em duas Jornada dos Estudantes, representando o percurso de dois perfis distintos. As duas jornadas foram submetidas para o professor-coordenador entrevistado. 27
Método 28
Mapa de Empatia 29
Mapa Mental 30
Seleção de ideias 31
32
33
Projeto Allegretto Advogados Associados 2013 Site do escritório de advocacia Allegretto Advogados Associados, situado no Rio de Janeiro. O site foi lançado no segundo semestre de 2013. Realizei análise de concorrentes, design da interface, incluindo diagramação e edição dos gráficos e desenvolvimento da interface, codificado em HTML e CSS. Site: www.allegretto.adv.br 34
Projeto Olocall Web Club 2013 Projeto de redesign do site Olocall Eventos. O site passaria a ser uma plataforma para criação de clubes digitais. Cada clube digital pode estar associado a um bairro, segmento de eventos, associação de profissionais ou clube esportivo. A criação de um web club proporciona acesso a funcionalidades como mural, revista, timeline de eventos, fórum, guia de fornecedores associados e sites dos associados. Desenvolvi o planejamento do negócio, incluindo o modelo, planejamento do produto, incluindo a definição das features; design de interação, definindo o fluxo de tarefas; arquitetura da informação, incluindo definição da navegação, busca, organização das páginas e rótulos; design da interface, incluindo diagramação, edição dos gráficos e definição de guia de estilo. O site não foi implementado. 35
36
Timeline de eventos clube de festas infantis Site de evento 37
Revista Guia de fornecedores 38
Projeto Olocall Eventos 2012 / 2013 Projeto de plataforma voltada para organização e oferta de serviços relacionados a eventos como casamentos, festas infantis e aniversários. O organizador dispõe de funcionalidades como agenda de contatos, guia de fornecedores, site do evento e timeline de eventos, pela qual pode registrar diversos eventos com temática comum, como a vida de um casal ou de um filho. O fornecedor tem a sua disposição funcionalidades como site do fornecedor, portfólio, anúncios em guia de fornecedores, promoções e solicitações de pedidos. Desenvolvi o planejamento do negócio, incluindo o modelo; planejamento da marca, incluindo design do logotipo e material promocional, planejamento do produto, incluindo a definição das features; design de interação, definindo o fluxo de tarefas; arquitetura da informação, incluindo definição da navegação, busca, organização das páginas e rótulos; design da interface, incluindo diagramação, edição dos gráficos e definição de guia de estilo; design do conteúdo, incluindo redação de todos os textos do sistema; desenvolvimento da interface, codificado em HTML e CSS. Site: www.olocall.com.br/home 39
Home 40
Site do evento Portfólio Site de fornecedor 41
Projeto Licks Associados 2011 A Licks Contadores é uma sociedade especializada em perícias judiciais e extrajudiciais, assistência técnica e administração judicial. Atuei no projeto como consultor de usabilidade e designer de interfaces. Meu trabalho consistiu na elaboração de três relatórios visando o design de interface de uma nova versão para o site do escritório: Usabilidade e Análise de Concorrentes: foi realizada uma análise da usabilidade da versão anterior do site do escritório e de sites de 6 empresas do mesmo segmento de mercado. Foram analisados aspectos como organização da informação, conteúdo, navegação, identidade visual e diagramação e uma análise. Para cada um desses aspectos foi feita uma tabela comparativa entre a versão anterior do site da empresa e os sites dos concorrentes, identificando pontos fortes a serem incluídos na versão futura e pontos fracos a serem descartados. Levantamento de Conteúdo e Mapa do Site: com base no relatório anterior, foram identificadas as páginas da próxima versão do site e o conteúdo de cada uma, incluindo navegação, rotulagem e organização das seções. O Mapa do Site mostra o relacionamento entre estas páginas. Wireframes das Páginas do Site: para cada página descrita no relatório foi elaborado um wireframe de alta fidelidade, com o layout e o posicionamento dos elementos de navegação e do conteúdo. Site: www.licksassociados.com.br 42
Usabilidade e Análise de Concorrentes 43
44
Wireframe 45
Logotipos Projetos diversos Qual é a boa? Web Radio Soul Black Music QR Post BitBonus 46
Pesquisa 47
Livro Do email ao Facebook: uma perspectiva evolucionista sobre os meios de conversação da internet Este livro discute a evolução dos meios de conversação da internet: email, lista de discussão, fórum de discussão, mensageiro instantâneo, bate-papo, SMS, mensagens em grupo, blog, microblog, videoconferência, videochamada, audiochamada e audioconferência. Partimos da analogia com a evolução dos seres vivos, transpondo e revisitando seus conceitos. É como se os sistemas fossem seres vivos, a cultura fosse o ambiente onde os sistemas vivem, e os usuários fossem os recursos pelos quais competem os sistemas de uma determinada espécie. Os meios e os sistemas de conversação evoluem como qualquer outra tecnologia, sendo a evolução um resultado de inovações e de influências de tecnologias pregressas. Essa perspectiva contrapõe a visão criacionista na qual uma tecnologia surge como uma invenção de um gênio solitário sem levar em consideração as influências em seu projeto. Ao compreender como os meios e sistemas evoluem, é possível entender melhor o estado da arte, perceber tendências, identificar corretamente os meios e analisar a competição entre os sistemas que implementam um mesmo meio. A perspectiva evolucionista é importante para evitar alguns erros conceituais como os que já até nos acostumamos a escutar na mídia: fulano é o pai do email, sendo esta uma afirmação que reflete uma visão criacionista; ou que os sistemas de redes sociais vão acabar com o email, quando de fato sequer competem entre si. Sobre a evolução dos meios de conversação, elaboramos conceitos, leis, modelos e métodos que respondem a questões fundamentais como: quais são os meios de conversação da internet, como evoluem e se diferenciam, por que alguns sistemas que implementam meios de conversação sobrevivem enquanto outros são extintos, como ocorre a competição entre eles pela disputa dos usuários? Para essa discussão, foram considerados os aspectos tecnológicos e culturais que influenciaram a evolução dos meios de conversação ao longo do tempo. 48
O livro encontra-se organizado nos seguintes capítulos: CMC (Conversação Mediada pela Computação). Discutimos as tecnologias de comunicação e a história cultural da humanidade, enfatizando como os meios de conversação da internet estão transformando nossa sociedade contemporânea; Taxonomia: levantamos quais são os meios de conversação da internet, quais os critérios que possibilitam diferenciá-los, e como classificar os serviços de conversação implementados nos sistemas; Evolução: discutimos como os meios de conversação evoluem; Seleção: caracterizamos como ocorre a seleção dos sistemas que implementam meios de conversação, visando explicar o que leva ao sucesso ou fracasso do sistema; Ecossistema: abordamos as interações entre os sistemas e o ambiente, e apresentamos estudos populacionais dos sistemas em termos de popularidade; História: a partir da perspectiva evolucionista apresentada nos capítulos deste livro, (re)contamos a história dos meios de conversação. Acesso ao livro: http://tinyurl.com/kqwprnh 49
Blog Inovação, Design, Tecnologia e Evolução Neste blog eu escrevo sobre os assuntos que mais me interessam pesquisar: inovação, design, tecnologia e evolução, seja esta tecnológica ou cultural. O foco é principalmente em produtos digitais, mas também me interessam inovações em outras áreas, como Arquitetura e Urbanismo, Design de Serviços e de tecnologias em geral. Publicarei análises sobre métodos, inovações e projetos, além de ideias próprias para soluções de problemas diversos. Blog: www.leandrodantascalvao.wordpress.com/ 50