Minhas primeiras semanas na Taqtile

Diário de bordo de uma taqtiler incipiente.


Apresentação

Esse post contará um pouco do que aconteceu durante as minhas duas primeiras semanas em contato com o projeto Onboard. Este projeto tinha por objetivo me inserir em todas as etapas do processo de UX bem como nas ferramentas usadas pela Taqtile. Abaixo o relato se atém ao processo de criação de um aplicativo android, desde a concepção do conceito com base nesses processos de UX e decisões e design até a elaboração de mockups no software Sketch.

Desafio

O desafio foi criar um conceito embasado em pesquisas da própria marca, usuários e stakeholders e, ao final, apresentar cinco telas para um aplicativo android de uma cafeteria norte americana chamada Blue Bottle Coffee.

Entendendo o cliente e o usuário

Nesta etapa foi imprescindível tomar conhecimento acerca do cliente e do usuário entendendo assim suas necessidades para posteriormente propor ideias, funcionalidades e soluções. Abaixo detalhes desse processo.

Já no primeiro dia de trabalho, com o briefing em mãos, comecei a pesquisar sobre a Blue Bottle e descobri que há pessoas no mundo que superestimam todo o universo do café. Entusiasta do café e músico, o criador da Cafeteria, James Freeman, anexou à marca o seguinte lema:

“We are still united by the simple purpose of getting great
coffee to everyone who asks for it.”

A Blue Bottle Coffee vai de encontro à empresas como Starbucks pois eleva o café a um patamar supremo, a um estilo de vida apreciado por todos que o estimam. Eles mantêm sua própria plantação de café e seus grãos são selecionados criteriosamente de acordo com tipo e nível de maturação, pois o sabor do café se altera não só pelo tempo em que o grão é colhido, mas também pelo tipo de processamento e preparo. E a Blue Bottle se preocupa com isso. Todos os grãos de cafés existentes no site são vendidos após 48 horas do processamento, pois a partir desse período o café perde algumas propriedades. Além disso, como já mencionei, eles se preocupam tanto com o processo de preparação que deixaram em seu site no menu uma sessão chamada “Learn” onde estão disponíveis diversos tutoriais de modo de preparação (Brewing Guides).

Dada a etapa de pesquisa sobre o cliente concluída passei a me concentrar no usuário e entender seus anseios e frustrações através do mapa de empatia, disponibilizado no briefing.

Mapa de empatia

No decorrer da pesquisa, algumas ideias/funcionalidades surgiram objetivando suprir as necessidades do usuário.

Primeiras ideias

Nesta etapa de brainstorming uma série de funcionalidades foram levantadas visando atender as necessidade da minha persona, o Matt. Além disso, eu precisava ter em mente quais eram os objetivos do cliente e do usuário.

De acordo com as necessidades do Matt, e já tendo em mente o que facilitaria a sua vida, pensei em algumas possíveis funcionalidades para o app. As principais delas foram:

  • Vídeos que mostre step-by-step como se prepara café conforme as técnicas de brewing mostradas no site(DYI);
  • Convites ou notificações para a próxima reunião de discussão sobre o café;
  • Comunicação com a câmera permitindo que o usuário, ao tirar a foto da embalagem (ou código de barras, ou qualquer outro símbolo), tenha contato com informações específicas sobre aquela safra de café (ou do grão de café, processamento etc);
  • Estoque de café. Talvez o app fizesse uma conta básica com alguns inputs do usuário para prever a quantidade de café no estoque versus necessidade do Matt!

Após esse período de pesquisa sobre o cliente e o usuário defini o objetivo de ambos:

O grande desafio nesse momento foi decidir qual peso dar ao app, se a informação ou ao ato da compra. E, após a decisão, conjugá-los mediante decisões de design. Dado o perfil da persona, cliente e algumas pesquisas optei por priorizar a informação ao invés da compra.

Gostaria de ter tido mais tempo para me aprofundar nas pesquisas sobre o produto em questão, mas como o projeto foi de caráter experimental, esta etapa inicial teve de ser concluída em dois dias.

A próxima etapa foi a de definição de conceito para o app.

Conceito e referências

Esta etapa foi impulsionada pela busca por uma frase que definisse o aplicativo em sua essência. Além disso precisei buscar referências gráficas de apps cuja proposta fosse similar ao da Blue Bottle.

Uma das preocupações nessa etapa foi a de o aplicativo virar uma obra digna do Dr. Frankenstein. Por isso o conceito do app precisou ser definido antes do processo de criação do fluxo de navegação.

O conceito, na verdade, é a essência do app, sua tagline e o que se pode traduzir em uma única frase. Por exemplo, o conceito do aplicativo 99Taxis é “Taxi in 5 minutes”, da Disney “to make people happy” e assim por diante.

No caso da Blue Bottle, pensei em vários conceitos, mas o que mais conversou com o propósito da marca e do aplicativo foi:

Blue Bottle, know your coffee”.

A frase reflete justamente o anseio do usuário que é o de conhecer, efetivamente o produto, desde a fase de cultivo até o preparo.

Para consolidar ainda mais as informações, as funcionalidades do app foram submetidas ao processo should/must/nice:

Processo de definição de funcionalidades

Must: funcionalidades essenciais. A ausência delas faria o Matt fechar e desinstalar o aplicativo.

Should: funcionalidades medianas ou o que a maioria dos apps do mesmo segmento tem.

Nice: funcionalidades extras. O Matt ficaria surpreso e feliz se encontrasse tais funcionalidades

Amarrando toda a pesquisa, e com o auxílio do processo acima, tive o seguinte modelo:

Para o Matt, que não pode ficar sem seus variados grãos de café, o Blue Bottle é um app que proporciona uma compra eficiente indicando o nível de estoque do produto bem como o ensino de diversos processos em video como se tivesse um barista nas mãos.

Também comecei a pesquisar nos concorrentes, seus objetivos, pontos fortes e fracos. Os dois selecionados nessa etapa eram extremamente contrastantes: Starbucks Coffee, cujo objetivo era venda e Barista Me, cujo o foco era o conteúdo.

Starbucks coffee e Barista

Pensei também no grande diferencial que o app Blue Bottle poderia ter em relação aos demais analisados:

  • Conhecimento e controle sobre o próprio estoque;
  • A funcionalidade de integrar a câmera com o código de barras.

Fase concluída! Próxima etapa: arquitetura de informação e wireframe.

AI e wireframe

Com o conceito do aplicativo claro e referências iniciais estabelecidas foi preciso organizar o fluxo de navegação do aplicativo em um sitemap (ou mapa mental) para definir a hierarquia de informação. Além disso, desenhei algumas telas do futuro app em folhas de papel A4 (rabiscoframes), antes de começar a abrir o sketch, economizando, dessa forma, tempo.

Nesta etapa, a leitura do livro Patterns de design da editora O’Reilly me ajudou significantemente, além da análise de apps diversos para entender a escolha desses patterns na vida real.

Primeiro organizei as informações em um mapa mental para deixar claro os níveis de hierarquia e posteriormente iniciei a etapa de criação dos “rabiscoframes”:

Site map ou Mapa mental
Rabiscoframes

Após a validação dessa etapa, transferi todas as ideias que estavam no papel para o sketch.

Estudos no sketch e moodboard

Nesta etapa, transferi para o sketch tudo o que estava no papel de forma mais funcional, testando apenas os elementos nativos do material design. O moodboard, que requer conhecimentos mais técnicos da área de design, também foi montado nesta etapa.

A meta desse projeto experimental era que ao final fosse apresentado 5 telas:

Num primeiro momento, após a validação do fluxo de navegação experimentei um pouco o Sketch e construí algumas telas apenas com os elementos nativos do material design:

Depois disso, me concentrei no moodboard que é um uma síntese de elementos gráficos da identidade e conceito da marca traduzidos em alguns painéis onde são adicionados referências visuais, escolha tipográfica e paleta de cor, tudo alinhado com as palavras-chave atribuídas à marca. O moodboard é muito importante pois nos ajuda a manter o foco durante o processo de criação.

Moodboard: palavras-chave, referências visuais e fotográficas.

Além disso pensei na experiência que o aplicativo desejaria transmitir:

O app Blue Bottle deseja que a experiência seja amigável, prazerosa e enriquecedora (delightful) similar a um gole de um bom café.

A próxima etapa foi a de unificar as ideias do moodboard e utilizá-las na interface final.

Interface

Esta é uma das etapas mais visuais de todo o processo. Nela, é necessário transformar o esqueleto da fase anterior em um mockup esteticamente coerente — além de atrativo - ao design da marca.

Nessa etapa, a preocupação maior foi a de manter o aplicativo consistente à identidade da marca.

A tela mais demorada foi a de Profile, onde testei variações da mesma tela.

No momento em que defini um objetivo claro, o processo se desenvolveu com maior fluidez.

Objetivo da tela: informar, de maneira sucinta, rápida e objetiva os cafés que o Matt já experimentou, os que deseja experimentar e os seus favoritos.

Depois dessa parte validada, a próxima, consistia na montagem do guide para o desenvolvedor.

Construção do guide

Esta é uma das partes mais técnicas do processo. Organizar, renomear, agrupar pastas e elementos para deixá-los entendíveis ao desenvolvedor demanda certa cautela.

O objetivo do guide é ajudar os desenvolvedores na “componentização’’ dos elementos, organizando pastas e elementos em grupos garantindo, dessa forma, consistência no design, visto que se tem flexibilidade no ajuste de tamanhos e estilos. Na parte de criação a distribuição de pesos e tamanhos de tipografia, por exemplo, é livre e vai de acordo com o “feeling” do designer sempre respeitando, é claro, a hierarquia visual das informações.

Entretanto, o guide nos inclina a reduzir para manter unidade no design. Por exemplo, antes do guide eu tinha os seguintes sizes: 10pt, 12pt, 14pt, 16pt e 18pt e 20pt. Após o guide, readaptei algumas telas, de modo a não prejudicar o design delas, e fiquei com: 12pt, 14pt, 16pt e 20pt. Consistência e clareza garantidas.

Conclusão

Durante as duas semanas aprendi que quanto mais estruturado estiver o projeto, mais fácil chega-se à uma solução eficiente de design. O grande desafio aqui, sem dúvidas, foi o de conjugar a compra com a informação.

Resultado visual do projeto Onboard.

Em termos de conhecimentos, o aprendizado técnico sobre o software e metodologias de UX foram cruciais na resolução de problemas. Outro aprendizado importante foi acerca do guide: ele deve estar tão consistente quanto o design do aplicativo. Em síntese, senti falta de mais tempo em todas as etapas, mas como o projeto foi de caráter experimental, como já mencionei anteriormente, fiquei satisfeita com o resultado :)