App Case Estratégia Mockup UI/UX junho 3, 2019

App Agroword (Syngenta)

A proposta do aplicativo Agroword tem como objetivo apresentar os conteúdos da Syngenta de uma nova forma.

  • Design

    UI/UX Design, Art Direction

  • Client

    Syngenta

Agroword é parte de um projeto desenvolvido pela Silo Agência para a Syngenta. Contando com um grande time de colaboradores envolvidos, entre eles Fernanda Andrade e Giovanna Pieroni.

A proposta do aplicativo tem como objetivo apresentar conteúdos do agronegócios de uma forma mais dinâmica, intuitiva, pratica e moderna, com formatos que podem facilitar o dia a dia de seus usuários.

Abaixo, confira algumas informações e processos para a construção desta proposta.

Como parte de um projeto, a proposta do Agroword surgiu como um diferencial. Um aplicativo que contaria com conteúdos em seus mais diversos formatos, como notícias, vídeos e podcasts, além de outros recursos que podem facilitar a vida dos seus usuários.

A construção da identidade visual foi iniciada pela criação da logo e definição da paleta de cores, para só depois começar dar inicio à elaboração da interface e ao mesmo tempo nas estratégias para melhorar a experiencia do usuário.

Para a logo… a criação foi pensada em algo prático e moderno, de fácil reconhecimento.  Um detalhe sutil encontra-se na letra “A” (que também é usada como ícone do app), com suas curvas trazendo a forma de uma folha, remetendo à agricultura. Além disso, as palavras agro e word possuem tons diferentes, contendo também variações alternativas em contornos, possibilitando assim o uso de uma versão negativa.

Quanto a escolha da paleta, as cores variam em tons de verde (musgo e oliva) e amarelo.

Before After

Agora sobre o desenvolvimento do aplicativo.

Ele foi idealizado para ser uma plataforma fácil e intuitiva, ao mesmo tempo com recursos que possam ajudar no dia a dia, como um leitor de código de barras que mostram as bulas dos produtos da Syngenta, um programa de podcast (intitulado Agroinside) e calendário de colheitas.

Seu design é clean. Mas também é prático e moderno. Com uso de blocos em pesos diferentes, é possível criar diferentes espaços com importâncias distintas e deixar uma navegação fluída. Por exemplo, na aba de Início, o campo de visão dos destaques tem blocos maiores para ter uma maior atenção, enquanto os blocos de noticias e vídeos possuem tamanhos reduzidos.

Tela 01.

Aqui a primeira impressão é muito importante.

Após o download, assim que iniciado, a tela de boas vindas aparece no aplicativo. Nela há possibilidade de realizar o login ou fazer o cadastro, caso seja a primeira vez do usuário.
Tela 02.

Uma tela inicial com um pouco de tudo o que importa.

Os destaques são facilmente encontrados na tela inicial, com acesso aos últimos conteúdos, incluindo informações, lembretes, videos e os episódios mais recentes do podcast.
Tela 03.

Não encontrou algo? Uma busca inteligente é bem eficaz.

A aba de Buscar conta com recursos que podem facilitar sua pesquisa, com uma sugestões de palavras mais pesquisadas e um histórico contendo suas ultimas buscas.
Tela 04.

Edite. Personalize. Controle todas as suas informações.

Na aba Perfil encontra-se todas as opções para ajustar as informações pessoais e configurações do app. Entre as funções, também é possível trocar imagem de perfil e acessar o suporte.

Nas próximas telas, é possível ver a simulação de como funcionaria o player do podcast durante a reprodução do áudio, com uma capa, nome do episódio e botões controladores. Ao deslizar para cima, uma lista com os programas que serão reproduzidos na sequencia irá aparecer.

Já em outro protótipo, a tela de escanear mostra a câmera do smartphone aberta, com um leitor centralizado na tela, para que o usuário posso focar o código de barra ou QR do produto Syngenta que deseja conferir a bula.

A aba Mais funciona como um menu para os principais recursos do app, diferente da tela inicial que apresenta os conteúdos mais recentes, aqui ela direciona para a pagina completa. Por exemplo: ao clicar em Vídeo, o app é direcionado para uma aba com todos os materiais publicados.

Em Releases podemos ver como ficaria o efeito após o clique, tendo sua altura e cor alteradas.

Back