“Onde devemos comer esta noite??”
Tivemos a invejável oportunidade de trabalhar com a equipe de Serviços de Jantar da Universidade da Carolina do Norte para reimaginar um site moderno de locais de jantar para que, finalmente, os estudantes saibam o que está sendo servido, quando e onde. Em parceria com a Aramark e o departamento de Serviços de TI da UNC, construímos um web site alimentado não por uma, mas por duas aplicações web personalizadas. Agora, estudantes, professores e funcionários podem navegar por todos os refeitórios do campus e ver quais estações de alimentação estão abertas num relance. Depois está a um clique (ou toque!) de distância do menu e dos ingredientes de cada item. Simples!
Foi um projeto grande e complexo que exigiu gerentes práticos, design original, codificação de front-end e alguma programação back-end impressionante, tudo funcionando bem em conjunto para obter sucesso. Em resumo, um projeto ideal de Campanhas de Novas Mídias. Fizemos algumas aplicações e websites personalizados para faculdades e universidades — incluindo um número para a UNC, tais como Serviços de Energia, Departamento de Geologia, e o Empreendedorismo Menor — por isso este estava bem dentro da nossa casa do leme.
Todos os Súbitos Estudantes com Fome Novamente
A equipa do projecto teve sorte neste: todos nos lembramos distintamente da dor de sair da aula, caminhar para um refeitório, e encontrá-lo fechado. Ou pior, pagar por uma refeição apenas para perceber que não havia opções disponíveis para limitações dietéticas específicas. Por isso conhecíamos bem o problema que a UNC Dining queria resolver. A solução veio em três partes: o web site, um menu personalizado & horas aplicação web, e um segundo aplicativo personalizado para as telas do menu ao vivo.
O web site precisava parecer super moderno para um público mais jovem e ser fácil de manter e rápido de carregar. Ele é construído usando HiFi, o sistema de gerenciamento de conteúdo rápido e infinitamente configurável. Para o menu &aplicação de horas, nós rapidamente determinamos que seu propósito era responder essas três perguntas para os estudantes, pessoal e professores da UNC Chapel Hill:
- O que está aberto agora (ou mais tarde)?
- O que está no menu?
- Posso ver os ingredientes?
Finalmente, queríamos ver a experiência do usuário até o fim, o que significava amarrar no menu real no local. As salas de jantar UNC têm grandes ecrãs LCD que mostram o menu actual. Nossa solução foi apontar essas telas para páginas web privadas com exibição personalizada para que os administradores do site possam atualizar o conteúdo de cada estação tão facilmente como se fosse um web site. Tornámos muito simples de fazer e cada ecrã corresponde ao estilo da estação individual, sala de jantar e da marca maior UNC Dining. O aplicativo do menu é construído na linguagem de programação Scala e funciona como um charme.
Até unir os três componentes, nós fomos capazes de dar à equipe de Serviços de Jantar da UNC a solução que eles precisavam para responder a pergunta, “O que há para o jantar? O resultado: um web site super rápido, simples de usar, fácil de entender e que simplesmente funciona. Mencionamos sua resposta?
Parte 1: O Web Site
Gerenciar conteúdo
Nossa primeira prioridade era auditar o conteúdo existente do antigo site. O que vai ficar, o que vai e o que pode ser melhorado? A arquitetura original da informação não foi bem concebida e havia uma série de diferentes tipos de conteúdo que o cliente precisava gerenciar. Os templates de conteúdo do site incluíam:
- Páginas de informação simples, como Sobre Nós, Factos Nutricionais, ou Catering
- Alimentação de informação com múltiplos itens, como Blog de Notícias ou Calendário de Eventos
- Páginas especiais, como Planos de Refeições
- Formulários interactivos, como Contact Us
- E claro, o menu & horas app
Um desafio na parte de design da informação do novo site foi como lidar com conteúdos profundamente aninhados. Às vezes a informação é agrupada em um grupo em um grupo em um grupo e isso pode tornar os menus de navegação desordenados e difíceis de usar, rapidamente. Por exemplo, pegue o menu e o aplicativo de horas, onde tivemos que projetar a interface da tela para lidar com cinco pedaços sucessivamente granulares de informação: Do Local (Diga, “Ram’s Head Dining Hall”) até à Refeição (“Almoço”), à Estação Individual (“Pizza Bar”), ao Prato (“Buffalo Chicken”) e finalmente ao Ingrediente (“Wheat flour”). Se isso parece complicado, é. Mas nossa equipe resolveu elegantemente.
Nossa solução HiFi
Nossa solução teve que facilitar a perfuração da árvore de aplicativos do menu, bem como atualizar e criar páginas de conteúdo no local certo. E como construímos o site usando o HiFi, é fácil, já que cada um desses templates de conteúdo está incluído por padrão. Blog de notícias, calendário de eventos, formulários de contato e tipos de informações básicas estão todos incluídos. De dentro do painel de controle, a hierarquia de navegação é clara e cada um dos diferentes tipos de conteúdo é simples de adicionar ao clicar de um botão.
O cliente usa o HiFi para atualizar as informações do menu, publicar os próximos eventos, atualizar os perfis dos funcionários e preparar guias especiais para os alunos, tais como como como planejar refeições e como evitar certos alergênios. O UNC Dining é tanto sobre servir comida aos estudantes como sobre educação: um Dietista Registado é empregado para coordenar com os Serviços de Saúde do Campus da UNC para assegurar que as refeições são saudáveis e para aconselhar estudantes com necessidades dietéticas especiais. O sucesso académico está intimamente ligado à boa nutrição e a um estilo de vida saudável, por isso é importante que os administradores do site possam usar o site para publicar informação nutricional precisa, oportuna, & prática.
Abordagem de design
O antigo design sofria das típicas falhas que vemos nos sites que nos procuram para um redesenho:
- Sem grade de layout: os elementos da página são organizados e dimensionados ao acaso
- Hierarquia visual pobre: não está claro para onde o olho deve ir e os cabeçalhos são indistinguíveis do texto corporal
- Sem chamadas óbvias à ação: não só um visitante não sabe o que ler, como também não sabe o que fazer ou clicar
- Falta de espaço em branco: as caixas de texto e conteúdo precisam de “espaço para respirar” para que o olho as possa distinguir no campo de visão
- Paleta de cores drabicas: os azuis e cinzentos subjugados dominam o que de outra forma deveria ser um assunto colorido e vibrante (comida deliciosa!)
- Tipografia descuidada: além do uso de fontes simples e padrão, o comprimento médio das linhas e o espaçamento entre parágrafos dificulta a leitura
Antes de &Depois: O antigo site não usava muito bem o espaço ou se concentrava nas tarefas ou conteúdos que os visitantes mais se interessavam por
Além de tudo isso, o antigo site foi carregado muito lentamente e não foi otimizado para dispositivos móveis. Nossa tarefa não era apenas abordar cada uma dessas considerações de design, mas também fazê-lo de uma forma adequada ao público principal: moderno e jovem. O motivo de design resultante tem estas características:
>
- Título grande e negrito
- Limpar chamadas para acção
- Formas simples e modernas (quadrados e rectângulos)
- Sem sombras ou texturas desnecessárias
- Espaço branco bíblico
Além destes, nossa equipe projetou a interface para se sentir em casa em uma tela, a forma como um programa ou aplicativo em seu computador usa a totalidade do imóvel. Ou seja, em vez de ser limitado por uma largura de “página” arbirtray, o design é tanto de tela cheia quanto responsivo a diferentes contextos de dispositivos: o novo site UNC Dining é tão naturalmente em casa em um monitor widescreen quanto em um laptop, tablet ou telefone.
Links são óbvios e fáceis de tocar. As secções e o texto têm uma hierarquia clara e bem definida. As notícias e os artigos individuais são agradáveis de ler em profundidade. O design abrange toda a largura de qualquer tela que você esteja usando para vê-la. Emprega os mesmos (Carolina) azuis e cinzentos da paleta original, mas equilibra-os com fotografias grandes, de alta definição e coloridas. A navegação é bem organizada, interativa e oculta, exceto quando você a quer. As animações subtis transmitem uma sensação de capacidade de resposta e capricho. O efeito geral é colocar a ênfase diretamente na riqueza do conteúdo.
Driven by Action
New Media Campaigns emprega uma filosofia chamada “Action Driven Design”. Isso significa que abordamos cada projeto web invertendo a pergunta típica, “Como deve ser?” com, “O que deve fazer?”. Isso nos força a pensar cuidadosamente sobre quais ações as pessoas chegam ao site procurando fazer. Muitas vezes é tão fácil como zerar os um a três objectivos mais importantes do site. No caso de UNC Dining, era cristalino:
- O que está aberto e o que há para comer?
- O que se passa nestes dias?
- O que cobre o meu plano de refeições?
Trabalhar de trás para a frente a partir daí, verá que todas as três acções são os elementos visuais mais importantes na página inicial e no que a maioria dos visitantes estão interessados. Mas além disso, há uma grande quantidade de informações no site: detalhes sobre planos de refeições, catering, e até mesmo o compromisso da UNC Dining com a sustentabilidade, tudo facilmente acessível a partir de um menu interativo. Clique ou toque para acesso instantâneo a todo o conteúdo do site em um relance.
Mídia Social
UNC Dining leva a sério seus canais de comunicação. Ele não só posta frequentemente no twitter, Facebook e Instragram, mas coordena o envio de mensagens através das três plataformas. Isso significa que os seguidores têm uma experiência editorial consistente, qualquer que seja o seu meio preferido.
Na página inicial, nós puxamos um feed ao vivo de todas as três. As últimas atualizações do Facebook e do twitter são puxadas como texto e o Instagram atualiza como fotos grandes e de alta qualidade. Esta é uma ótima maneira de reforçar os esforços da equipe de mídia, bem como fornecer conteúdo fresco, original e atraente para a página inicial. Não custa nada ter fotos de comida com água na boca!
Código de criação manual
Como todos os projetos web da NMC, nós escrevemos o código à mão. Isso garante que ele seja enxuto e conciso (sem marcação desnecessária para aumentar o peso da página) o que otimiza a página do site para indexação nos motores de busca. Isso também significa que podemos comprimir e fazer o cache antes do tempo para acelerar o tempo de renderização da página dramaticamente e trabalhar em torno de qualquer bug de exibição específico do navegador (o Internet Explorer é notoriamente problemático). Finalmente, UNC Dining funciona tão bem no seu monitor de desktop gigante quanto no seu laptop, tablet, ou telefone — até mesmo o menu & horas de aplicação, que responde instantaneamente com informações precisas enquanto você toca e desliza.
Parte 2: Menu & Aplicação Web Horas
Aplicativo de JantarUNC apresenta um aplicativo web projetado para responder a uma pergunta: “Eu estou com fome. O que há para comer no campus”? Nós projetamos e construímos um software personalizado usando Ruby on Rails que faz um punhado de coisas, instantânea e automaticamente:
- Pega a hora atual
- Verifica a hora em relação a um banco de dados de todos os locais de alimentação do campus da UNC
- Retorna uma lista do que está aberto agora
- Exibe uma corrente, lista precisa de cada item do menu
- Cada item do menu apresenta detalhes completos de nutrição& informação sobre alergénios num relance
Se oferecesse apenas essa funcionalidade, seria um triunfo. Mas um arrastar rápido do mouse (ou polegar) ao longo da linha do tempo revela as horas e opções em tempo real à medida que você desliza, sem nenhum atraso. Porque talvez você esteja curioso para saber o que estará disponível para o jantar de hoje. E, com o seletor instantâneo de calendário, você pode descobrir o que há para o café da manhã da próxima semana. Você também pode selecionar vários horários de refeição de um menu suspenso dentro do próprio local.
Salvar necessidades dietéticas especiais? Nós também o temos aqui. O aplicativo do menu tem um filtro de alergênio que lista os suspeitos comuns como trigo, leite, peixe e amendoim que você pode usar para excluir da lista quaisquer itens que os contenham. Os itens com esses ingredientes alergênicos são cinzentos e eliminados. O melhor de tudo para quem sofre de alergia, a aplicação lembra-se da sua selecção cada vez que a visita, para que não tenha de continuar a seleccioná-la sempre.
Dados de utilização
Apenas algumas semanas e estamos a assistir à rápida adopção pelos alunos à medida que descobrem a nova aplicação. O uso do aplicativo tem aumentado a cada semana desde o lançamento do novo site e do novo aplicativo. Nós continuaremos a manter um olho atento em como o novo design funciona, que é apenas parte do nosso relacionamento contínuo com a UNC Dining.
Parte 3: Telas de Menu
Para completar toda a nova experiência do usuário, a NMC projetou e implementou menus digitais no local. Estes são alimentados por ecrãs de televisão LCD de alta definição em cada estação em salas de jantar seleccionadas. Trabalhamos em estreita colaboração com o pessoal de TI da UNC para puxar uma transmissão web ao vivo e garantir que tudo se interligasse bem. Nosso objetivo era que as telas fossem tão fáceis de manter quanto o resto do site, mas com uma exibição personalizada para que coisas como cursores de mouse não apareçam para arruinar a ilusão.
Nosso gênio técnico residente, Kris Jordan, tratou da programação personalizada (em Scala) e a integrou ao sistema de gerenciamento de tela existente na UNC. Uma das grandes melhorias desta configuração em relação à anterior foi eliminar uma tonelada de limitações de design com as telas antigas, que tinham que funcionar dentro dos templates inflexíveis permitidos no Scala. Mudamos a configuração básica, no entanto, e em vez de usar os templates do Scala, simplesmente apontamos cada tela para uma URL única e, como resultado, conseguimos aproveitar as flexibilidades dos browsers modernos e realmente nos tornarmos criativos com os designs das telas. Agora, cada tela é configurada em uma URL única, permitindo à UNC utilizar as mais recentes técnicas web e flexibilidade de design nos novos layouts
Apenas NMC
Não há muitas empresas web que consigam realizar um projeto como este. O sucesso do novo web site e aplicação personalizada da UNC Dining é um exemplo perfeito dos pontos fortes únicos que as New Media Campaigns reúnem em cada projeto web.
Além de nossa ampla familiaridade com as necessidades particulares das instituições de ensino superior, este projeto exigiu coordenação prática de nossa equipe de relações com o cliente; estratégia de conteúdo bem estruturada e cuidadosa & arquitetura de informação; design visual arrojado, original e eficaz; HTML responsivo, enxuto e especializado & codificação manual CSS; e programação back-end complexa e personalizada. Tudo entregue dentro do prazo e do orçamento, com tempos de carregamento rápidos e lançados para fazer revisões.
Tivemos o prazer de ter a oportunidade de mostrar as nossas costeletas digitais com o site da UNC Dining e o cliente não podia estar mais entusiasmado. Como a NMC pode entusiasmá-lo? Entre em contato hoje.