Meus Assuntos
Ir para o topo
Compartilhar no Facebook Compartilhar no Twitter Compatilhar em outra redeSocial
UX Design - Perfis de Atuação
APP comida natural
Equipe
Letícia Nascimento Steyer
Orientador(es)
Heli Meurer, Andréa Capra, Luciana Hahn Menezes
30 de Julho de 2018
APP comida natural

Observação

Definição do Tema

nomes amarelos.png

APP de delivery para a empresa Bem Natural.

 nomes amarelos2.png

O tema escolhido foi o desenvolvimento de um aplicativo para auxiliar nas rotinas diárias da empresa “Bem Natural”. A empresa produz saladas e marmitas saudáveis para a região do vale do Rio Pardo, de segunda a sexta. Para uma melhor compreensão do processo da empresa, segue abaixo um mapa dos processos diários realizados, descrevendo de forma simplificada o  atual procedimento entre empresa e cliente.

 nomes amarelos3.png

personas e tal.png

 

Pensando no contato, controle de produção e entrega diária das viandas a seus clientes, priorizando a qualidade, a  individualidade de cada cliente, pontualidade, alimentação balanceada com o acompanhamento de nutricionistas. Foi necessário levantar alguns pontos de interesse de ambas as partes. 

 personas e tal2.png

Cenário

nomes amarelos6.png

É necessário entender o cenário em que o projeto está inserido, para que haja uma maior assertividade no seu desenvolvimento. O Design Thinking Canvas, foi utilizado como ferramenta de auxilio nesta etapa. O cenário foi identificado através de registros feitos a partir dos dados coletados durante a fase de observação (DTC). Para isso, nessa etapa, quatro perguntas foram feitas:

personas e tal3.png

Personas e Mapa de Empatia

nomes amarelos7.pngpersonas e tal4.png

 

 

Depois de analisar brevemente os processos, foi necessário mapear os principais consumidores da empresa. O método de Design Thinking Canvas foi utilizado nesta etapa. Com isso, os principais perfis de usuários  típicos foram levantados. Suas atividades, hábitos e necessidades foram observadas, possibilitando a geração de personagens que, associados ao contexto do projeto, regerão as decisões tomadas durante o processo de criação e projeto do APP.

 

Os três perfis de personas escolhidas foram:

 personas e tal5.pngpersonas e tal9.pngpersonas e tal7.png

 

nomes amarelos8.png

Depois de entender melhor quem são os consumidores e quais suas necessidades, um maior aprofundamento em cada perfil foi necessário. Para isso, um mapa de empatia de cada um dos três perfis foi desenvolvido. Nele podemos mapear o que é visto, escutado, sentido e dito pelo público-alvo que utilizará nosso app, além de entender as dores e oportunidades a serem exploradas em nosso projeto.

 

personas e tal6.png

 

personas e tal10.png

 

personas e tal8.png

Proposta de Valor para o Usuário

nomes amarelos9.png

A etapa de proposta de Valor dentro do DTC consiste em gerar valor para o usuário, o observando diretamente. Na primeira parte do mapa, para esclarecer o perfil do cliente, mapeia-se as tarefas que ele deseja realizar, os resultados ruins relativos às tarefas que ele realiza e resultados que ele deseja alcançar. Para se construir a segunda etapa do mapa de valor, onde pretende-se gerar um valor atrativo para cliente, mapeia-se os serviços e produtos para construção de uma proposta de valor, descreve-se como o produto aliviará as dores do cliente e descreve como o produto criará ganhos para o cliente.

 personas e tal11.png

 

personas e tal12.png

 

personas e tal13.png

Modelo de Negócios

O modelo de negócios foi feito a partir do Business Model Canvas que possibilita uma visão clara e rápida das deficiências e Valores. 

casa4.jpg

Apesar dos diferentes tipos de clientes que consomem as refeições da Bem Natural, a comunicação diária da empresa com os clientes poderá ser feita a partir da mesma ferramenta de comunicação, pois os três públicos relacionam-se bem com tecnologias e atualmente o processo de pedidos é ralizado pelo whatsapp, e é facilmente utilizado por todos os usuários. Com isso, rapidamente os usuários farão a migração para o novo APP, convergindo assim, para uma ferramenta central de diálogo com os clientes para realização dos pedidos, feedbacks, localizações de entrega, preferencias na alimentação, etc.

 

Para obter a satisfação dos principais clientes da Bem Natural, as duas diretrizes principais devem ser a pontualidade na entrega e o cuidado na produção de cada pedido. Para isso, é necessário que um sistema pontual e bem organizado de distribuição entre em vigor juntamente com a implantação do APP. Para completar a plena satisfação dos clientes, um acompanhamento criterioso de um nutricionista deve ser feito em todo o processo diário da produção das refeições, começando pelo desenvolvimento do cardápio semanal, até o fechamento das embalagens com o pedido de cada cliente.

APP comida natural

Análises

Termos Pertinentes ao Projeto

nomes amarelos11.png

 

Com o objetivo de aumentar consideravelmente o vocabulário quanto ao projeto que vem sendo desenvolvido, a etapa de “termos pertinentes ao projeto”, busca uma ampliação a respeito dos termos mais utilizados dentro deste contexto. Para isso, foi necessário buscar as principais palavras e termos utilizados até agora e quais os sentidos que podem significar conotativamente e denotativamente para o usuário, possibilitando assim um melhor entendimento de como o usuário se relaciona e sente as expressões que mais tem sido empregadas durante a produção do APP. Para que essa análise fosse bastante significativa e útil para as próximas etapas, três tipos de classes de palavras foram separadas, observadas e classificadas.

 

nomes amarelos12.pngTermos Pertinentes ao Projeto.png

 

 

 

nomes amarelos13.pngTermos Pertinentes ao Projeto2.png

 

 

nomes amarelos14.pngTermos Pertinentes ao Projeto3.png

Similares e Referências

nomes amarelos15.png

Na etapa de observação e análise de similares e referências, é necessário observar cuidadosamente todas as características de cada APP com cuidado. Posteriormente, cada erro e acerto pode ser evitado e acrescentado na etapa de criação do APP que está sendo produzido. A ideia é aprender com os erros e acertos do outros. É necessário observar com olhares críticos cada detalhe estético e funcional, além de uma boa análise de uso pensando como um usuário potencial se comportaria na interface observada.

Para a análise se tornar o mais completa possível, uma pesquisa prévia de produtos parecidos foi feita, para que apenas os potenciais concorrentes fossem analisados. Após essa seleção, cada APP foi baixado e utilizado cuidadosamente. Uma lista de itens a serem observados foi elencada e utilizada como base. Elementos como tipografia, cores, ícones e logotipo foram catalogadas e registradas em formato de tabela comparativa e descritiva para se ter uma melhor compreensão dos erros e acertos cometidos por cada APP.

 

nomes amarelos16.png

Três aplicativos foram selecionados como similares para a análise. O critério de seleção foi a proximidade de funções potencialmente utilizáveis para o futuro projeto. Devido ao grande número de aplicativos potencialmente similares e com funções relevantes, foram separados três que apresentaram produtos similares ao vendido pela empresa Bem Natural, descobrindo assim os mais relevantes entre todos para a análise.

 similares referências.pngsimilares referências2.pngsimilares referências3.png

 

nomes amarelos17.png

Dentre os aplicativos que poderiam ser utilizados como referências, foram selecionados três, com diferentes pontos de relevância a serem observados e possivelmente utilizados na fase posterior de criação do APP da marca Bem Natural. O iFood foi selecionado por ser hoje, um dos mais utilizados no Brasil para delivery, tornando-se assim, uma referência potencial na área de seleção e pedidos de refeições e lanches. O aplicativo do Mc Donald’s, apesar de não ser um aplicativo de delivery, possuí uma funcionalidade potencialmente explorável pela Bem Natural. Em todos os lanches e bebidas disponíveis no APP há uma tabela nutricional de fácil entendimento e atraente, que facilita aos interessados a consulta. Também, entre os três aplicativos referência, não poderia faltar o WhatsApp. Atualmente, ele é utilizado no sistema de pedidos da Bem Natural. Tanto o envio de cardápio, quanto o registro do pedido é feito exclusivamente através dele e tem uma boa aceitação por todos os atuais utilizadores.

 

similares referências4.pngsimilares referências5.pngsimilares referências6.png

Análise Funcional e de Uso

nomes amarelos21.png

Na etapa de análise funcional e de uso, foi necessário utilizar todos os aplicativos selecionados na fase anterior para testes. Dentro dos testes feitos, está o de entender as principais tarefas realizadas pelo aplicativo, possibilitando observar itens úteis que cada um deles oferece e quantas etapas são necessárias, pare realizar determinada tarefa. Para isso, após a etapa de utilização, todas as funções observadas foram registradas, e uma delas, foi selecionada para mapeamento. Nesse mapeamento, todo o fluxo de telas foi copiado e observado cuidadosamente, com o objetivo de identificar problemas de usabilidade.

 telas do app menores.png

É possível observar, que apesar de atrativo, as informações são muito pequenas em quase todo o APP. Isso acaba causando desconforto, ou falha de entendimento do usuário durante a utilização.

Em poucos cliques o resultado desejado foi alcançado, mas, existe pouco acesso as demais funcionalidades ao longo das páginas.

Um cadastro é necessário para ter acesso a todas as informações do APP e, entre elas, está a localização, causando problemas na análise feita e bloqueando o acesso a diversas funcionalidades.

De modo geral é agradável e marcante!

telas do app menores2.png

Layout nada agradável. Muitas cores e pouco planejamento estético das telas. Nenhuma indicação, de como ir para o próximo passo do pedido. O aplicativo perde muito com a falta de opção na hora de adicionar ingredientes extra. Menu pouco útil e com falta de funcionalidades importantes.

 

telas do app menores3.png

 

Informações repetida em excesso em quase todas as telas do APP. Layout agradável e de fácil entendimento. Possuí a opção de adicionar ingredientes extras e botões de decisão bem claros e marcados.

telas do app menores5.png

Apesar do grande número de informações que precisam ser disponibilizadas no aplicativo, ele possui uma boa distribuição desses elementos e uma boa hierarquização dessas informações. O aplicativo também possui, botões de decisão e de indicação da próxima etapa de pedido.

telas do app menores6.png

 

O aplicativo possui poucas funcionalidades realmente úteis para o usuário. Como foi explicado no começo da etapa de análises, a importância da sua análise está focada na tabela nutricional oferecida por ele. O layout é agradável e de fácil navegação. O usuário não tem grandes dificuldades em encontrar o que deseja. Os lanches e bebidas, são ilustrados com fotos muito bem produzidas e atraentes. A tabela nutricional é bem fácil de ser interpretada, além de ser atraente até para quem não possui muito interesse nas informações.

 

telas do app menores7.png

O aplicativo é de fácil utilização e muito intuitivo. Em poucos cliques o usuário encontra tudo o que precisa. O aplicativo também possui notificações todas as vezes que uma mensagem nova chega.

Verificação e Resultados (Infográfico)

 Após o longo período de análises, diversas conclusões relevantes foram percebidas. Para facilitar e compilar todas as informações percebidas durante esse período montou-se um infográfico. Nesse infográfico todas as informações principais foram retomadas de forma simplificada e pratica.

 

infográfico explicativo.png

APP comida natural

Reconstrução

Organizando as Ideias

Para facilitar a construção do aplicativo da empresa bem natural, foi necessário passar pela fase de organização das ideias. Durante toda a etapa anterior, diversos aplicativos foram analisados a fundo, e diversas necessidades foram registradas. Após a compilação de todas as ideias e de uma verificação do que realmente seriam viáveis, aplicável e útil ao aplicativo em questão, montou-se duas listas de itens utilizáveis para o app. A primeira lista, apresenta funcionalidades para o aplicativo usado pelo usuário e a segunda lista, apresenta funcionalidades para a plataforma usada pela empresa.

Para conseguir fazer a divisão das funcionalidades, dois breves infográficos foram montados, com o objetivo de entender os processos do cliente que consome as refeições e da empresa que fornecesse as refeições. Como conclusão de cada lista, foi montado um organograma vinculando todas as ideias e de como poderiam ser organizadas dentro do aplicativo de forma funcional e organizada, prevendo a próxima etapa.

 

funcionamento.pngfuncionamento3.png

funcionamento2.png

 Para ver o organograma completo, acesse o link abaixo. 

https://drive.google.com/open?id=1Bi_F4ZdrVXnLKFe9FW29sPVwjaT6q72v

funcionamento4.png

funcionamento6.pngfuncionamento5.png

Para ver o organograma completo, acesse o link abaixo. 

https://drive.google.com/open?id=1-W9xu05f8MfQrlmhpjoC8Be1iOQ3PlYq

Storytelling

Para compreender melhor o comportamento dos possíveis usuários, foram montados três storytelling. Todos eles, foram baseados no comportamento das personas, definidas na etapa de observação. Cada um dos storytellings feitos para compreender melhor as reações, dificuldades e possíveis surpresas encontradas pelo usuário, durante a utilização. Podendo assim, desenvolver um APP, que cause grande impacto durante a utilização. Uma boa interação do usuário com o aplicativo é fundamental para o sucesso do mesmo. Da mesma forma, problemas de utilização ou desapontamentos da parte do usuário, podem causar o afastamento e fracasso do projeto que está sendo desenvolvido. No storytelling, os sentimentos, expectativas e frustrações do usuário se tornam muito evidentes e sensíveis para quem está projetando o mesmo. 

Storytelling.png

Storytelling2.png

Storytelling3.png

Durante a construção dos storytellings, algumas dificuldades foram percebidas e por isso, algumas estratégias foram modificadas, para que o usuário não se sinta frustrado em nenhum momento da utilização.

Um bom exemplo disso, aconteceu no primeiro storytelling construído. Inicialmente, a secretária precisava comunicar individualmente cada funcionário, sobre a parceria. Além de explicar individualmente, como cada um deveria baixar o APP, fazer o cadastro e comunicar para que ela fizesse a vinculação a conta da empresa. Após perceber o quanto isso seria trabalhoso e quanto tempo seria necessário, a estratégia foi modificada. Uma nova ferramenta de associação de contas através da vinculação de e-mails, foi adicionada. Essa nova ferramenta, possibilita o envio do convite de forma automática, através do aplicativo. Com essa nova funcionalidade, o tempo gasto, passa a ser de poucos minutos e não mais de horas ou até mesmo dias. 

Wireflow com a Descrição da Interação

Após entender o comportamento do usuário, listar as ferramentas e funcionalidades necessárias, chegamos a etapa de construção dos wireframes. Nesta etapa, foram desenvolvidos os desenhos básicos da estrutura do aplicativo para se ter ideia da disposição das informações na tela, caminhos feitos pelo usuário, hierarquia das informações, navegabilidade, menus, login e funcionalidades básicas. Além disso, é nessa etapa que muitos problemas de navegabilidade podem ser percebidos e corrigidos antes da construção do layout final, para que não haja apego ao estético e sim as funcionalidades.

O primeiro passo foi refinar o mapa de funcionamento, feito na etapa anterior (organizando as ideias). Para simplificar a construção dos wireflows, aquele mapa foi separando em grupos e categorias e possível sequencia de uso. Esse refinamento resultou em no mapa de telas e funcionalidades a seguir.

funcionamento8.png

 

Após refinar o mapa de telas e funcionalidades a cima, o passo seguinte foi desenhar a base das telas do APP pensando na utilização e sequência.

 funcionamento9.png

1.ABERTURA (SPLASH)

Tela de abertura com o logo da empresa. Essa tela aparecerá durante alguns segundos, enquanto o app inicializa. Apenas fundo e logo.


2.INÍCIO (MENU PRINCIPAL)

A tela inicial do aplicativo mostrará as principais informações para que o usuário possa visualizar tudo que precisa, logo no primeiro momento. Nessa tela constam, cardápio do dia, cardápio da semana, pedidos de pessoas vinculadas, calorias, sugestões/avaliações e carrinho de compras.

3.MENU SECUNDÁRIO

A tela inicial conta com um menu secundário superior com recursos menos utilizados no dia a dia do usuário. Lá, encontra-se o login, cadastro para novos clientes, informações sobre a empresa, configurações da conta e instruções de como pedir as refeições.

 
4. CADASTRO

As informações de cadastro são muito importantes e influenciam na forma como o app irá apresentar partes do layout. Contas empresarias têm alguns recursos diferentes de quem é funcionário ou cliente comum, devido ao gerenciamento necessário de diversos pedidos diários.
 
5.CARDÁPIOS

Os pedidos de refeição foram divididos em três categorias, a refeição, as saladas e os caldos, pela distinção de opções que cada uma exigia. O usuário pode facilmente visualizar o menu de qualquer uma delas apenas movendo a tela para os lados ou selecionando a opção desejada na parte superior da tela.
 
6.FINALIZAÇÃO DE PEDIDO

A tela de finalização do pedido apresenta todas as opções já cadastradas de cartão de crédito e locais de entrega para que o cliente selecione a opção que mais lhe agrada no dia.
 
7.PEDIDOS DA SEMANA

O aplicativo também apresenta a opção de ver de forma panorâmica os pedido da semana que já foram realizados ou estão pendentes. Facilitando o processo de quem prefere pedir de uma só vez o cardápio de segunda a sexta.
 
8.CALORIAS CONSUMIDAS

No final de cada pedido, o app gera as informações nutricionais aproximadas do prato pedido pelo cliente.
 
9.OPINIÕES E SUGESTÕES

Para manter o feedback do cliente, o app apresenta a opção de avaliar os pratos recebidos. Um campo de sugestões e outro de votações para novos pratos também foi adicionado para que o cliente tenha sempre a possibilidade de ajudar na construção diária do cardápio da empresa além de comunicar falhas ou elogios.
 
10.   CARRINHO DE COMPRAS DO DIA

O carrinho de compras é um botão flutuante na base da tela, que pode ser acessado de qualquer página. Nele, estão as principais informações dos pedidos realizados. Para empresas ou para quem tem familiares vinculados todos os pedidos vinculados podem ser consultados.

APP comida natural

Identidade e Diferenciação (APS)

Desenvolvimento da Assinatura Visual

nomes amarelos22.png

 Como já citado anteriormente, o atual projeto que está sendo desenvolvido, é na verdade, um case real de uma empresa localizada na cidade de Venâncio Aires – RS. Atualmente, a antiga MF restaurantes encontra-se em uma fase transição de identidade visual, que vem sendo desenvolvida pelo estúdio criativo Amarelo Magenta. Em paralelo, a empresa vem passando por uma mudança de segmento no ramo da alimentação, passando a comercializar cada vez mais delivery de refeições e cada vez menos atuando no ramo de restaurante, após perceber o novo nicho promissor de mercado que se abria. Essa decisão trouxe a tona a necessidade de ressignificação da marca dentro do mercado gastronômico. Apesar da marca estar atualmente passando por essa mudança visual, não utilizaremos neste trabalho acadêmico o mesmo resultado obtido, aprovado e atualmente utilizado pela empresa, por questões éticas de desenvolvimento acadêmico e imparcialidade no desempenho do projeto. Para que o case se torne mais real, as mesmas exigências e pedidos dos donos da marca serão utilizadas para o desenvolvimento do trabalho em questão. Possibilitando assim um resultado, que da mesma forma, agrade o cliente e se enquadre nos desejos já apresentados por eles na vida real.

nomes amarelos23.png

Em um primeiro momento se fez necessário modificar o nome da empresa, que até o momento se chamava MF restaurantes. O nome MF representa as siglas da empresária e dona do negócio. Já o decodificador mostrava o segmento da empresa, que no momento, já não representava o verdadeiro foco após as mudanças.

nomes amarelos24.png

 As exigências da empresa eram que a nova identidade e nome transmitissem a responsabilidade de fornecimento de refeições saudáveis, balanceadas, com produtos de qualidade, sempre frescos e sem perder o toque cuidadoso e individualizado, que cada cliente recebe no atendimento. Dentro da busca por um naming que fosse compatível com as necessidades da empresa, alguns alicerces e caminhos precisaram ser estudados, definidos e bem estabelecidos, para basear a construção da nova identidade.

 A visão interna da marca era bem clara. Fornecer refeições balanceadas e saudáveis, sem parecer uma empresa vegetariana e sim uma marca que produzia comida com sabor, qualidade e conteúdo para todos os públicos, sem perder o diferencial de ser balanceado e natural. Após a observação inicial, ficou evidente que a maior verdade sobre a empresa era que eles atendiam tanto pessoas fitness, que estavam de dieta, quanto pessoas comuns que gostavam das refeições produzidas por eles e principalmente de todo o sistema pratico de entregas e atendimento personalizado.

 Pensando nisso, para a nova identidade representar a empresa, era necessário levar em consideração as questões saudáveis das refeições balanceadas, mas sem esquecer da personalização e individualidade de cada cliente, tanto na produção das refeições, quanto na praticidade e pontualidade das entregas.

 O nome utilizado atualmente em paralelo com as modificações de marca feitas pela empresa, é “Bem Natural Refeições Eficientes”. Portanto, em um primeiro momento, o nome foi analisado para verificar se era necessário que houvesse uma modificação ou permanência do mesmo.

 Para isso, algumas palavras chaves já utilizadas e analisadas nas etapas anteriores foram retomadas juntamente com outras, para serem usadas como norteadoras do significado da empresa.

  • saudável
  • natural
  • qualidade
  • frescor
  • individualidade
  • cuidado

Após analisar os significados e possibilidades do nome, atualmente utilizado pela empresa, optou-se pela permanência do mesmo, pois representa de forma adequada os conceitos da empresa. O naming “Bem Natural” expressa a ideia de refeições balanceadas, saudáveis e de boa qualidade, feitas pela empresa. Além de transmitir o zelo e cuidado diário na preparação e personalização dos pratos para cada cliente.

todos2.png

Natural: Que se refere ou pertence à natureza; Produzido pela natureza ou de acordo com suas leis.

Bem: Aquilo que é bom, agradável; o que causa alegria e felicidade. Posse; aquilo que alguém possui. Adequadamente; de maneira boa e adequada. De modo saudável; que apresenta uma boa saúde. Corretamente; em que há correção, perfeição, qualidade. Confortavelmente; de modo confortável, cômodo.

nomes amarelos25.png

A Bem Natural tem como objetivo fornecer alimentação balanceada e saudável de forma rápida e prática para seus clientes. O aplicativo vem para facilitar ainda mais essa rapidez e facilidade, de em poucos cliques, poder ter em suas mãos, saúde, sabor e pontualidade na hora de suas refeições. Apesar de todas as questões saudáveis da marca, um dos principais diferenciais é a agilidade e rapidez no serviço que tanto encantam os clientes que consomem as refeições. Essas são características muito presentes em centros urbanos e que não podem ser deixadas de lado, tendo em vista que a maioria de seus clientes estão em meio a uma rotina frenética de trabalho quando pedem as refeições.

nomes amarelos26.png

todos3.png

todos4.png

todos5.png

todos6.png

 nomes amarelos27.png

Pensando em todos os pontos a cima, exploramos diversos possíveis caminhos a serem seguidos através de rascunhos. Esse período de descobertas e testes facilita a visualização e materialização de ideias, que até então, não haviam sido testadas, apenas idealizadas, sendo possível através desses testes ver quais podem ser levadas a diante e quais devem ser abandonas.

teste de tipografia para logotipo:

Para representar o cuidado e personalização que a empresa tem com cada cliente, optou-se pelo uso de uma fonte que possuísse traços de escrita manual. A principal questão a ser traduzida é o feito um por um, o feito a mão, cuidadosamente personalizado. Dentro de diversos testes, uma tipografia especifica se destacou devido a aparência dinâmica das formas. A sensação de quem olha em um primeiro momento é que a fonte foi escrita com muita agilidade, sendo esse mais um dos itens que representa a marca.

todos7.png

testes de composições de logotipo e símbolo:

Para que todo os caminhos possíveis fossem explorados, optou-se pela realização de testes de um possível símbolo para a marca que representasse o saudável de forma sútil. Folhas e legumes foram testados como possíveis símbolos que remetessem a alimentação saudável.

testes8-12.png

A beterraba foi testada com maior atenção pois possui cores fortes e contrastantes que poderiam ser exploradas com maior atenção, resultando em uma boa composição visual. Além das questões estéticas, a beterrabada é conhecida pelo sabor inconfundível e terroso, fazendo profunda ligação com o natural e saboroso que a empresa tenta representar. Para levar esses testes a fundo, a geometrização das formas foi feita, caso esse fosse o caminho a ser seguido.

testes8-122.png

testes8-123.png

Após a geração dos possíveis símbolos, alguns testes junto ao lettering foram feitos para ver se realmente o resultado seria adequado.

testes8-124.png

testes8-125.png

 

Refinamento do lettering:

Como citado anteriormente, a tipografia escolhida para o logotipo é um fonte Brush com traços de escrita rápida e de formas muito orgânicas. Para que essa fonte pudesse ser utilizada como logotipo foi preciso fazer ajustes. 

Logotipo com a tipografia base.

todos8.png

Em um segundo momento foi necessário fazer a vetorização das formas para que a fonte passasse pelo processo de geometrização.

todos9.png

Em um terceiro momento a fonte passou pela fase de geometrização, para que apensar da organicidade das formas, haja mais harmonia e coerência.

Uma das malhas de refinamento:

identi3.png

Resultado das malhas de refinamento:

todos11.png

Após passar pela geometrização das formas, o lettering precisou passar pelo refinamento óptico antes de ser finalizado.

todos12.png

Processo completo lado a lado.

todos13.png

Ao final de todo o processo optou-se pela utilização apenas do letttering como logotipo. O resultado é uma tipografia com traços bem humanos de escrita com movimento fluido, formas orgânicas e características bem naturais.

 

 distancia 16.png

 

Após todos os testes realizados optou-se pela utilização do lettering sozinho, pois os símbolos testados remetiam muito a uma refeição apenas saudável e não atendiam as necessidades dos demais públicos consumidores envolvidos.

Escolha Tipográfica

nomes amarelos30.png

A tipografia Open Sans foi escolhida por ser uma fonte sem serifa com uma aparência neutra e amigável. Foi projetada por Steve Matteson para possuir tensão vertical e formas abertas, resultando em características excelentes de legibilidade em suas letras. Além de tudo isso foi um fonte encomendada pelo Google para possuir legibilidade em interfaces de impressão, web e móveis.

"Seu design é semelhante ao de Droid Sans da Matteson , criado como a primeira fonte de interface do usuário para telefones Android , mas com caracteres mais amplos e a inclusão de variantes em itálico."

Portando a Open Sans será usada para títulos e textos em geral.

todos18.png

Pontualmente em títulos de maior importância a tipografia Yeah Papa será utilizada. Por ser uma fonte manuscrita e possuir traços divertidos, a fonte trará leveza e humor as telas do APP.

tipografia yeap.png

Escolha do Padrão Cromático

nomes amarelos28.png

Para fazer a definição das cores, foi levado em consideração a necessidade de expressar o frescor e a vibralidade dos pratos e sabores produzidos para cada estações. Devido a essa necessidade, optou-se por usar cores quentes e complexas. Para paltar e referenciar o uso das cores buscou-se como referencia uma antiga ilustração feita para o site madebyfieldwork.

telas 14-a15.png

testes com as cores e o logotipo

cores testes3.png              telas 14-a152.png

Definição Imagética

nomes amarelos29.png

Os ícones selecionados para compor o aplicativo, são todos complementos visuais que, além de tornarem as informações mais claras e intuitivas, dão um tom mais lúdico em meio a tantas informações necessárias dentro da seleção de alimentos e demais áreas do app. Os ícones foram usados todos em outline e possuem cantos arredondados, dando mais leveza as composições de cores fortes. 

icones.png

Desenho das telas da interface

TESTE 1

Para que houvesse harmonia no layout durante o desenvolvimento das telas, foi necessário desenvolver uma malha para ser utilizada como grid no processo de criação. Cada tela desenvolvida possui a mesma largura, porém, o comprimento de cada uma é diferente e independente um do outro. Pensando no processo de montagem, decidiu-se usar uma margem de 15px para as margens direita, esquerda e inferior. A margem superior foi definida como 50 px para que pudesse comportar o menu/ cabeçalho do aplicativo de forma fixa.

Para o corpo das telas optou-se por uma malha de 6 colunas a partir das margens, com gutter de 12px para que houvesse arejamento e maior leveza no layout entre os elementos dispostos em cada tela. A malha vertical das telas respeita da mesma forma que a horizontal as margens pré definidas, e de forma constante, se adequando a cada comprimento distinto de cada tela. Essa malha possui linhas de 35px de altura e intervalos de 12 px entre cada linha.

todos os grids.png

Logo após a definição do grid, tipografia, ícones, conteúdo, cores e demais informações necessárias, o layout começou a ser desenvolvido e aplicado aos  Wireflows  desenvolvidos na etapa anterior, para que houvesse o teste real se tais funcionalidades ficariam harmônicas da forma como haviam sido propostas. Nessa etapa, diversas falhas foram percebidas e muitos itens foram readequados, retirados e modificados para que houvesse um melhor aproveitamento do aplicativo. A baixo podemos ver o layout aplicado a todas as telas.

TODAS ESQUEMA.png

A baixo seguem as telas do aplicativo.

 telas para app.png 

        abertura do app

 

 menu incic.png  menu sec.pngcadasrto.png

    home- menu principal             Menu secundário             cadastro do cliente PF/PJ               

 refeição.png salada.png caldo.png

         menu de refeições                menu de saladas                 menu de caldos

 finalizar pedido.png carrinho de compras.png calorias.png

        tela de confirmação           carrinho de compras         informações nutricionais

 

 

 

TESTE 2

Após todos os testes a cima, foi observado que o resultado não estava de acordo com o esperado. Portanto foi necessário passar o projeto por um refinamento e modificações para torna-lo mais adequado.

Para obter um melhor espaçamento o grid foi modificado. Foram usadas 12colunas, com um espaçamento de 5px entre cada uma. Na altura foram usadas listras de 25px sem espaçamento dentre elas.

grid2.png         grid.png

O posicionamento das páginas dentro da sequencia de páginas permaneceu o mesmo, porém todas as páginas sofreram algum tipo de modificação de cor, espaçamento, tipografia e layout.

telas novas 1.png

 

telas2.png        telas8.png           

 

 

 

telas7.png          telas13.png          telas9.png

 

telas10.png              telas11.png          telas12.png 

 

 

telas14.png              telas4.png

Protótipo Interativo

Após a construção do layout das telas, foi necessário fazer testes para verificar possíveis falhas ou funcionalidades que não estivessem adequadas, além de verificar se o layout definido estava funcionando de forma adequada para a tela, sem que houvessem problemas. Para que esse teste de usabilidade fosse possível, foi necessário utilizar uma ferramenta online de "mockup de app"  para fazer o teste. Após a organizar as telas e vinculação dos botões, logo no começo do teste, algumas falhas foram percebidas e foi necessário remodelar algumas funcionalidade e layout do app. Um bom exemplo disso é o esquecimento de um botão de voltar que é indispensável para qualquer app e havia sido esquecido. Após as devidas modificações o mockup foi salvo e anexado ao trabalho. 

 TESTE 1

Link para o protótipo interativo APP Bem Natural

 qrcode antigo 1.png

 

TESTE 2

 Link para o protótipo interativo APP Bem Natural

qr code 2.png

 

Diferenciação

Para compreender melhor como o projeto seria visto pelo público final e entender um pouco melhor se sua estética atingiu o objetivo pela qual havia sido criada, foi necessário desenvolver a etapa de diferenciação. Um teste visual foi executado com pessoas aleatórias, para compreender visualmente quais as características predominantes do app. O resultado esperado, eram indicativas de um aplicativo com interface simples e divertida. As características selecionadas para a análise foram, tecnológico X divertido e simples X complexo. Nesta etapa, duas ou três telas do app foram mostradas para algumas pessoas. Logo em seguida o gráfico era mostrado, para que a pessoa escolhesse o local onde melhor se enquadrava o APP. O resultado final foi simples e divertido. 

teste.png

Considerações Finais

Os processos, o aplicativo, os resultados e a aprendizagem

 

O processo de desenvolvimento de todas as observações, análises, reconstruções, desenvolvimento de identidade e diferenciação, foram completamente desenvolvidos dentro do ambiente do PEA. As diversas orientações oferecidas, juntamente com materiais complementares, referências e sugestões por parte dos professores, fez com que o desenvolvimento de cada etapa fosse espontâneo, animador, dinâmico e de extrema aprendizagem. Durante todas as etapas houve um acréscimo de conhecimento significativo devido a todos os materiais e leituras feitas espontaneamente dentro do ambiente do PEA. A cada etapa concluída o feedback constante por parte do professor fomentou uma necessidade de melhorar o trabalho de forma ímpar. Saber que  cada etapa desse método é evolutiva e todos podem alcançar o patamar máximo no desenvolvimento do projeto faz com que o estudante queira explorar todas as suas possibilidades até chegar ao seu melhor resultado. 

O método de desenvolvimento utilizado pelo PEA nesta disciplina não foi apenas fundamental para a mesma, mas também para o desenvolvimento como um todo das habilidades requeridas pela profissão de designer. O explorar e melhorar é sempre bem vindo quando o assunto são projetos. Outra característica importante que beneficiou muito a execução do projeto foi o acesso ao acervo de trabalhos já feitos no PEA e ao mesmo tempo ter acesso aos trabalhos dos colegas em tempo real de execução. Dessa forma, muitas dúvidas que possuímos são sanadas apenas verificando as estrategias e decisões tomadas pelos colegas de turma que estão em destaque no ranking.

 O aplicativo desenvolvido teve como objetivo sanar um problema real de uma empresa real de Delivery. Apesar do case ser totalmente real, algumas adaptações foram necessárias. O resultado final do aplicativo foi bastante satisfatório e adequado as necessidades reais da empresa. Todo o processo de pesquisa inicial foi fundamental para entender melhor quem era realmente o público consumidor das refeições e o que poderia ser acrescentado para tornar o aplicativo mais atraente para eles. Analisar outros aplicativos semelhantes abriu um leque enorme de possibilidades e  funções indispensáveis para serem adicionadas ao projeto. A reconstrução e geração inicial das telas fez com que muitas falhas viessem à tona e fossem reparadas antes do projeto efetivo das telas. 

O resultado final foi um aplicativo divertido, prático e completo dentro das necessidades da empresa. Atendendo às demandas de pedidos, verificação da tabela nutricional, agendamento semanal das refeições e pedidos coletivos para a família e empresa. 

O processo de aprendizagem dentro do PEA foi incrível! Acredito que durante toda a minha trajetória acadêmica esse tenha sido a melhor forma de aplicação de metodologia já usada por mim. Como já citei acima, ter acesso a todos os matérias didáticos, aulas, exemplos e trabalhos de colegas e outros acadêmicos, faz com que o trabalho se torne mais prazeroso e acaba gerando maior empenho por parte dos alunos. O PEA é sem dúvida uma ferramenta extraordinária de aplicação de metodologia ao projeto !

APP comida natural

Referências Bibliográficas

Recomendadas e Aceitas

Gerais

  • NEVES, ANDRÉ. Design Thinking Canvas – DTC: aplicando o processo.UFPE.pg8
  • NEVES, ANDRÉ. Design Thinking Canvas – DTC: aplicando o processo.UFPE.pg11-12 ALMEIDA, ALESSANDRO, mapa de empatia: ex: Todas as pessoas que votam para prefeito, goversanor, presidente e outros...,exemplo 01, pg 1-15
  • NEVES, ANDRÉ. Design Thinking Canvas – DTC: aplicando o processo.UFPE.pg22-35 http://colisoes.com.br/2015/09/canvas-da-proposta-de-valor-o-que-e-e-como-usar/
  • ALMEIDA, ALESSANDRO, o que é? Modelo de negócio: Descreve a lógica de criação, entrega e captura de valor por parte de uma organização, pg3-pg31 NAKAGAWA, MARCAELO, Ferramenta: Business Model Canvas (BMC), estratégia e gestão, movimento empreenda, INSPER, pg1-3
  • https://www.dicio.com.br/saudavel/ https://www.dicio.com.br/balanceada/ https://www.dicio.com.br/sobrepeso/ https://www.dicio.com.br/emagrecimento/ https://www.dicio.com.br/calorias/ https://www.dicio.com.br/reeducacao/ https://pt.wikipedia.org/wiki/Alimentação https://pt.wikipedia.org/wiki/Caloria https://pt.wikipedia.org/wiki/Perda_de_peso https://pt.wikipedia.org/wiki/Saúde https://pt.wikipedia.org/wiki/Sobrepeso https://www.dicio.com.br/balanceado/ https://www.dicio.com.br/intervalo/ https://www.dicio.com.br/almoco/ https://www.dicio.com.br/pontualidade/ https://www.dicio.com.br/refeicao/ https://pt.wikipedia.org/wiki/Refeição https://pt.wikipedia.org/wiki/Salada https://www.dicio.com.br/salada/ https://www.dicio.com.br/proteina/ https://www.dicio.com.br/carboidrato/ https://pt.wikipedia.org/wiki/Informação_nutricional
  • https://play.google.com/store/apps/details?id=com.primelan.restauranteapp.santasalada https://play.google.com/store/apps/details?id=br.com.chefmio.natufitsaladeria https://play.google.com/store/apps/details?id=com.tech4.potesaudavel https://play.google.com/store/apps/details?id=com.whatsapp https://play.google.com/store/apps/details?id=br.com.brainweb.ifood https://play.google.com/store/apps/details?id=com.mcdo.mcdonalds http://projetoe.com/metodologia/analise/similares-e-referencias/#sthash.1ligDs3t.dpbs https://docs.google.com/drawings/d/1Ng6lh1Fyu-1LtXQ_ewXR3lRvPElogTDDHZeQqoQLzsA/edit
  • https://play.google.com/store/apps/details?id=com.primelan.restauranteapp.santasalada https://play.google.com/store/apps/details?id=com.tech4.potesaudavel https://play.google.com/store/apps/details?id=br.com.chefmio.natufitsaladeria https://play.google.com/store/apps/details?id=br.com.brainweb.ifood https://play.google.com/store/apps/details?id=com.mcdo.mcdonalds https://play.google.com/store/apps/details?id=com.whatsapp https://docs.google.com/drawings/d/1Ng6lh1Fyu-1LtXQ_ewXR3lRvPElogTDDHZeQqoQLzsA/edit https://drive.google.com/file/d/0B6n9FbJIcP4odldoTWJGNkxxbUk/view
  • https://en.wikipedia.org/wiki/Open_Sans