Free Press

« Où devrions-nous manger ce soir ? ? »

Nous avons eu l’occasion enviable de travailler avec l’équipe des services de restauration de l’Université de Caroline du Nord pour réimaginer un site web moderne des lieux de restauration afin que, enfin, les étudiants sachent ce qui est servi, quand et où. En partenariat avec Aramark et le département des services informatiques de l’UNC, nous avons créé un site Web alimenté par non pas une mais deux applications Web personnalisées. Désormais, les étudiants, le corps enseignant et le personnel peuvent parcourir tous les réfectoires du campus et voir en un clin d’œil quelles sont les stations de restauration ouvertes. Il suffit ensuite d’un clic (ou d’un tap !) pour accéder au menu et aux ingrédients de chaque article. C’est simple !

Il s’agissait d’un projet complexe et de grande envergure qui a nécessité des gestionnaires expérimentés, une conception originale, un codage frontal astucieux et une programmation dorsale impressionnante, tous travaillant bien ensemble pour le mener à bien. En bref, un projet idéal pour les campagnes de nouveaux médias. Nous avons réalisé pas mal d’applications et de sites Web personnalisés pour des collèges et des universités — y compris un certain nombre pour l’UNC, comme les services énergétiques, le département de géologie et la mineure en entrepreneuriat — donc celui-ci était bien dans notre timonerie.

Tout à coup, nous sommes à nouveau des étudiants affamés

L’équipe de projet a eu de la chance sur ce point : nous nous souvenons tous distinctement de la douleur de sortir de la classe, de marcher vers un réfectoire et de le trouver fermé. Ou pire, payer un repas pour se rendre compte qu’il n’y avait pas d’options disponibles pour des restrictions alimentaires spécifiques. Nous connaissions donc bien le problème que UNC Dining voulait résoudre. La solution s’est présentée en trois parties : le site web, une application web personnalisée pour les menus &heures, et une seconde application personnalisée pour les écrans de menu en direct.

Le site web devait avoir un look super moderne pour un public plus jeune et être facile à maintenir et rapide à charger. Il est construit à l’aide de HiFi, le système de gestion de contenu ultrarapide et configurable à l’infini. Pour l’application menu &heures, nous avons rapidement déterminé que son objectif principal était de répondre à ces trois questions pour les étudiants, le personnel et la faculté de l’UNC Chapel Hill :

• Qu’est-ce qui est ouvert maintenant (ou plus tard) ?
• Qu’y a-t-il au menu ?
• Puis-je voir les ingrédients ?

Enfin, nous voulions voir l’expérience de l’utilisateur jusqu’au bout, ce qui signifiait lier le menu réel sur place. Les réfectoires de l’UNC sont équipés de grands écrans LCD qui affichent le menu actuel. Notre solution a consisté à diriger ces écrans vers des pages Web privées avec un affichage personnalisé, de sorte que les administrateurs du site puissent mettre à jour le contenu de chaque poste aussi facilement que s’il s’agissait d’un site Web. Nous avons fait en sorte que cela soit très simple à réaliser et chaque écran correspond au style de la station individuelle, du réfectoire et de la marque UNC Dining. L’application d’écran de menu est construite dans le langage de programmation Scala et fonctionne comme un charme.

En liant ces trois composants, nous avons pu donner à l’équipe des services de restauration de l’UNC la solution dont elle avait besoin pour répondre à la question « Qu’est-ce qu’il y a pour dîner ? » Le résultat : un site Web super rapide, simple à utiliser et à comprendre, qui fonctionne tout simplement. Avons-nous mentionné qu’il est réactif ?

Partie 1 : Le site Web

Gestion du contenu

Notre première priorité était d’auditer le contenu existant de l’ancien site. Qu’est-ce qui va rester, qu’est-ce qui va disparaître, et qu’est-ce qui peut être amélioré ? L’architecture d’information d’origine n’était pas bien conçue et il y avait un certain nombre de types de contenus différents que le client devait gérer. Les modèles de contenu du site comprenaient :

• Des pages d’information simples, comme À propos de nous, Faits nutritionnels ou Traiteur
• Un fil d’information avec plusieurs éléments, comme Blogue d’actualités ou Calendrier des événements
• Des pages spécialisées, comme Plans de repas
• Des formulaires interactifs, comme Contact Us
• Et bien sûr, le menu &heures app

Un défi dans la partie conception de l’information du nouveau site était de savoir comment gérer le contenu profondément imbriqué. Parfois, les informations sont regroupées dans un groupe dans un groupe dans un groupe et cela peut rendre les menus de navigation encombrés et difficiles à utiliser, rapidement. Prenons l’exemple du menu et de l’application des heures d’ouverture, où nous avons dû concevoir l’interface de l’écran pour gérer cinq éléments d’information successivement granulaires : Du lieu (disons, « Ram’s Head Dining Hall ») au repas (« Lunch ») en passant par la station individuelle (« Pizza Bar »), le plat (« Buffalo Chicken ») et enfin l’ingrédient (« Wheat flour »). Si cela semble compliqué, c’est le cas. Mais notre équipe l’a résolu de manière élégante.

Notre solution HiFi

Notre solution devait permettre de forer facilement tout le long de l’arborescence de l’app de menu ainsi que de mettre à jour et de créer des pages conentes au bon endroit. Et parce que nous avons construit le site web en utilisant HiFi, c’est facile, puisque chacun de ces modèles de contenu est inclus par défaut. Le blog d’actualités, le calendrier des événements, les formulaires de contact et les types d’informations de base sont tous inclus. Depuis le panneau de contrôle, la hiérarchie de navigation est claire et chacun des différents types de contenu est simple à ajouter en cliquant sur un bouton.

Le client utilise HiFi pour mettre à jour les informations sur les menus, afficher les événements à venir, mettre à jour les profils du personnel et préparer des guides spéciaux pour les étudiants, comme la façon de planifier les repas et d’éviter certains allergènes. UNC Dining sert autant de nourriture aux étudiants que d’éducation : un diététicien est employé pour coordonner avec les services de santé du campus de l’UNC pour s’assurer que les repas sont sains et pour conseiller les étudiants ayant des besoins diététiques spéciaux. La réussite scolaire est étroitement liée à une bonne nutrition et à un mode de vie sain, il est donc important que les administrateurs du site puissent utiliser le site pour publier des informations précises, opportunes et &pratiques sur la nutrition.

Approche de conception

L’ancienne conception souffrait des défauts typiques que nous voyons dans les sites Web qui nous sont confiés pour une refonte :

• Pas de grille de mise en page : les éléments de la page sont disposés et dimensionnés de façon désordonnée
• Mauvaise hiérarchie visuelle : on ne sait pas où l’œil est censé aller et les titres ne se distinguent pas du corps du texte
• Pas d’appels à l’action évidents : non seulement le visiteur ne sait pas ce qu’il doit lire, mais il ne sait pas non plus ce qu’il doit faire ou cliquer
• Manque d’espace blanc : le texte et les boîtes de contenu ont besoin d’un  » espace de respiration  » pour que l’œil puisse les distinguer dans le champ de vision
• Palette de couleurs fades : des bleus et des gris tamisés dominent ce qui devrait autrement être un sujet coloré et vibrant (de la nourriture délicieuse !)
• La typographie bâclée : au-delà de l’utilisation de polices de caractères simples et par défaut, la longueur moyenne des lignes et l’espacement des paragraphes rendent la lecture difficile

Avant &Après : L’ancien site n’utilisait pas très bien l’espace ou ne se concentrait pas sur les tâches ou le contenu qui intéressent le plus les visiteurs

En plus de tout cela, l’ancien site se chargeait très lentement et n’était pas optimisé pour les appareils mobiles. Notre tâche consistait non seulement à répondre à chacune de ces considérations de conception, mais aussi à le faire d’une manière appropriée au public principal : moderne et jeune. Le motif de conception qui en résulte présente ces caractéristiques :

• Des titres larges et gras
• Des appels à l’action clairs
• Des formes simples et modernes (carrés et rectangles)
• Pas d’ombres ou de textures inutiles
• Des espaces blancs libéraux

A part cela, notre équipe a conçu l’interface pour qu’elle se sente à l’aise sur un écran, de la même manière qu’un programme ou une application sur votre ordinateur utilise la totalité de l’espace réel. En d’autres termes, plutôt que d’être lié par une largeur de  » page  » arbitraire, le design est à la fois plein écran et réactif à différents contextes de dispositifs : le nouveau site UNC Dining est aussi naturellement à l’aise sur un écran de bureau large que sur un ordinateur portable, une tablette ou un téléphone.

Les liens sont évidents et facilement tapables. Les sections et le texte ont une hiérarchie claire et bien définie. Les différentes nouvelles et articles sont agréables à lire en longueur. Le design s’étend sur toute la largeur de l’écran que vous utilisez pour le consulter. Elle utilise les mêmes bleus et gris (Carolina) que la palette originale, mais les équilibre avec de grandes photographies colorées à haute définition. La navigation est bien organisée, interactive et cachée, sauf lorsque vous le souhaitez. Des animations subtiles donnent un sentiment de réactivité et de fantaisie. L’effet global est de mettre carrément l’accent sur la richesse du contenu.

Driven by Action

New Media Campaigns emploie une philosophie appelée « Action Driven Design ». Cela signifie que nous abordons chaque projet web en inversant la question typique « Comment cela doit-il paraître ? » avec « Que doit-il faire ? ». Cela nous oblige à réfléchir attentivement aux actions que les internautes cherchent à réaliser en arrivant sur le site. Il suffit souvent de se concentrer sur les un à trois objectifs les plus importants du site. Dans le cas de UNC Dining, c’était clair comme de l’eau de roche :

1. Qu’est-ce qui est ouvert et qu’est-ce qu’on peut manger ?
2. Qu’est-ce qui se passe ces jours-ci ?
3. Que couvre mon plan de repas ?

En remontant dans le temps, vous verrez que ces trois actions sont les éléments visuels les plus importants de la page d’accueil et ce qui intéresse la plupart des visiteurs. Mais au-delà, il y a une mine d’informations sur le site : des détails sur les plans de repas, la restauration, et même l’engagement de UNC Dining en matière de durabilité, tous facilement accessibles à partir d’un menu interactif. Cliquez ou tapez pour accéder instantanément à tout le contenu du site en un coup d’œil.

Médias sociaux

UNC Dining prend ses canaux de communication au sérieux. Non seulement il publie fréquemment sur twitter, Facebook et Instragram, mais il coordonne les messages sur les trois plateformes. Cela signifie que les adeptes obtiennent une expérience éditoriale cohérente quel que soit leur support préféré.

Sur la page d’accueil, nous avons tiré un flux en direct des trois. Les dernières mises à jour de Facebook et twitter sont tirées sous forme de texte et les mises à jour d’Instagram sous forme de grandes photos de haute qualité. C’est une excellente façon de renforcer les efforts de l’équipe média et de fournir un contenu frais, original et attrayant sur la page d’accueil. Cela ne fait pas de mal d’avoir des photos de nourriture qui mettent l’eau à la bouche !

Code fait à la main

Comme tous les projets web de NMC, nous écrivons le code à la main. Cela garantit qu’il est maigre et concis (pas de balisage inutile pour augmenter le poids de la page) qui optimisent la page du site pour l’indexation des moteurs de recherche. Cela signifie également que nous pouvons le compresser et le mettre en cache à l’avance pour accélérer considérablement le temps de rendu de la page et contourner les bogues d’affichage propres à chaque navigateur (Internet Explorer est notoirement problématique). Enfin, UNC Dining fonctionne aussi bien sur votre écran de bureau géant que sur votre ordinateur portable, votre tablette ou votre téléphone — même l’application menu & heures, qui répond instantanément avec des informations précises lorsque vous touchez et glissez.

Partie 2 : Application Web du menu &heures

UNC Dining propose une application Web conçue pour répondre à une seule question : « J’ai faim. Qu’y a-t-il à manger sur le campus ? » Nous avons conçu et construit un logiciel personnalisé en utilisant Ruby on Rails qui fait une poignée de choses, instantanément et automatiquement :

• Rechercher l’heure actuelle
• Chercher l’heure dans une base de données de tous les lieux de restauration du campus de l’UNC
• Retourner une liste de ce qui est ouvert en ce moment
• Afficher une liste actuelle, liste actuelle et précise de chaque élément du menu
• Chaque élément du menu comporte des détails nutritionnels complets &des informations sur les allergènes en un coup d’oeil

Si elle offrait seulement cette fonctionnalité, ce serait un triomphe. Mais un rapide déplacement de la souris (ou du pouce) le long de la ligne de temps révèle les heures et les options changeantes en temps réel au fur et à mesure que vous la faites glisser, sans délai. Vous êtes peut-être curieux de savoir ce qui sera disponible pour le dîner dans la journée. Grâce au sélecteur de calendrier instantané, vous pouvez découvrir ce qu’il y aura au petit-déjeuner la semaine prochaine. Vous pouvez également sélectionner plusieurs heures de repas dans un menu déroulant au sein même de l’emplacement.

Vous avez des besoins alimentaires particuliers ? Là aussi, nous vous couvrons. L’application de menu a un filtre d’allergène énumérant les suspects communs comme le blé, le lait, le poisson et les arachides que vous pouvez utiliser pour exclure de la liste tous les articles qui les contiennent. Les articles contenant ces ingrédients allergènes sont grisés et rayés de la liste. Mieux encore pour les personnes allergiques, l’application se souvient de votre sélection à chaque visite pour que vous n’ayez pas à la sélectionner à chaque fois.

Données d’utilisation

En quelques semaines seulement, nous assistons à une adoption rapide par les étudiants qui découvrent la nouvelle application. L’utilisation de l’application a augmenté chaque semaine depuis le lancement du nouveau site Web et de l’application. Nous continuerons à surveiller de près les performances du nouveau design, ce qui n’est qu’une partie de notre relation continue avec l’UNC Dining.

Partie 3 : Écrans de menu

Pour compléter l’ensemble de la nouvelle expérience utilisateur, NMC a conçu et mis en œuvre des menus numériques sur place. Ceux-ci sont alimentés par des écrans de télévision LCD haute définition à chaque station dans certains réfectoires. Nous avons travaillé en étroite collaboration avec le personnel informatique de l’UNC afin de mettre en place un flux web en direct et de nous assurer que tout fonctionne bien. Notre objectif était que les écrans soient aussi faciles à entretenir que le reste du site Web, mais avec un affichage personnalisé afin que des choses comme les curseurs de souris n’apparaissent pas pour ruiner l’illusion.

Notre génie technique résident, Kris Jordan, s’est occupé de la programmation personnalisée (en Scala) et l’a intégrée au système de gestion des écrans existant de l’UNC. L’une des grandes améliorations de cette configuration par rapport à la précédente que le département avait était de supprimer une tonne de limitations de conception avec les anciens écrans, qui devaient fonctionner dans les modèles inflexibles autorisés dans Scala. Nous avons cependant modifié la configuration de base et, au lieu d’utiliser les modèles de Scala, nous avons simplement dirigé chaque écran vers une URL unique, ce qui nous a permis de tirer parti de la souplesse des navigateurs modernes et de faire preuve de créativité dans la conception des écrans. Désormais, chaque écran est dirigé vers une URL unique, ce qui permet à l’UNC d’utiliser les dernières techniques web et la souplesse de conception des nouvelles mises en page

Seulement NMC

Peu de sociétés web peuvent mener à bien un tel projet. Le succès du nouveau site Web et de l’application personnalisée de UNC Dining est un exemple parfait des forces uniques que New Media Campaigns réunit sur chaque projet Web.

En plus de notre grande familiarité avec les besoins particuliers des établissements d’enseignement supérieur, ce projet a nécessité une coordination pratique de la part de notre équipe compétente de relations avec les clients ; une stratégie de contenu réfléchie et bien structurée &une architecture de l’information ; un design visuel audacieux, original et efficace axé sur l’action ; un codage manuel HTML & CSS expert, réactif et allégé ; et une programmation back-end complexe et personnalisée. Le tout a été livré dans les délais et dans le respect du budget, avec des temps de chargement extrêmement rapides, et lancé avec des critiques élogieuses.

Nous avons été heureux d’avoir l’occasion de montrer nos talents numériques avec le site UNC Dining et le client ne pouvait pas être plus enthousiaste. Comment NMC peut-il vous enthousiasmer ? Prenez contact dès aujourd’hui.