← Todos os trabalhos

Coffeeverse

UI design de app · Cafés especiais

Três telas do app Coffeeverse, com página de produto, busca de cafés e login, sobre fundo terracota

Briefing

O café especial é uma bebida complexa, que exige cuidado em cada etapa da produção para chegar a uma boa xícara. Mesmo assim, sua venda está espalhada entre lojas físicas e os canais próprios de cada fazenda ou torrefação, o que limita o poder de escolha de quem compra.

O desafio era criar um produto digital que reunisse em um só lugar as melhores torrefações e fazendas produtoras de café do país, aproximando o consumidor de quem produz.

Solução

Pensamos em um aplicativo que reúne, em uma única vitrine, torrefações e fazendas produtoras parceiras, regionais e nacionais. Para quem não sabe qual café escolher, criamos uma busca por características: o usuário descreve o que mais gosta em uma bebida e o app mostra os cafés que melhor combinam com o seu gosto.

Cada produto apresenta dados de origem, como região, altitude, produtor, variedade e torra, para apoiar uma escolha mais consciente. O envio é feito sob demanda, direto do local de torra, sem o café ficar parado em estoque, porque quanto mais perto da data de torra, mais saboroso ele chega à xícara.

Resultados

O Coffeeverse concentra em um só lugar uma oferta que antes estava espalhada, dando ao consumidor mais poder de escolha. A busca por características aproxima quem está começando no café especial das bebidas que combinam com o seu paladar, e as informações de origem transformam a compra em uma experiência de descoberta.

Para torrefações e fazendas, o app abre um novo canal de venda com envio direto do local de torra.

Mosaico com várias telas do Coffeeverse: carrinho, busca, catálogo e detalhes do café
As seis telas principais do app lado a lado: abertura, login, busca, catálogo, página do produto e carrinho
Duas telas do app sobre fundo verde-petróleo: página de produto e busca de cafés
Especificações

Cores e tipografia

Cores

#A84236RGB 168, 66, 54Cor principal

Vermelho rebaixado, de saturação moderada, no campo dos tons de café torrado, que ocupa as grandes áreas de cor das telas. Escuro o bastante para receber texto creme com leitura confortável, funciona como fundo de conteúdo, e não só como acento.

#FFF8E8RGB 255, 248, 232Base clara

Branco quente no lugar do branco puro: reduz o contraste máximo da tela e a fadiga em leitura prolongada. É a cor de texto sobre as duas cores escuras do sistema, com leitura garantida tanto sobre o terracota quanto sobre o verde-petróleo.

#1E5C5BRGB 30, 92, 91Cor de ação

Matiz praticamente complementar ao terracota. A diferença entre os dois é de matiz e não de valor, já que as luminâncias são muito próximas; por isso ele é reservado aos botões de ação, onde o contraste de matiz isola a ação do resto da tela. Pelo mesmo motivo, nunca é usado como texto sobre o terracota.

Tipografia

Títulos e subtítulos
Unbounded29px e 15px

Sans geométrica de proporções expandidas. A largura acima da média dá massa aos títulos curtos, e o contraste de largura com a Manrope cria hierarquia pela proporção das letras, não só pelo tamanho.

Texto
Manrope12px

Sans de construção geométrica com altura-x alta e aberturas amplas em letras como a, c, e e s. Em 12px, corpo das descrições, preços e dados de origem do café, essas características preservam o reconhecimento das letras na tela do celular, onde a largura da Unbounded prejudicaria a leitura.

Outros trabalhos

Ver todos os trabalhos

Tem um projeto em mente?