Free Press

„Wo sollen wir heute Abend essen?“

Wir hatten die beneidenswerte Gelegenheit, mit dem Team der University of North Carolina’s Dining Services zusammenzuarbeiten, um eine moderne Website für die Essensausgabe zu gestalten, damit die Studenten endlich wissen, was wann und wo serviert wird. In Zusammenarbeit mit Aramark und der IT-Abteilung der UNC haben wir eine Website entwickelt, die nicht nur von einer, sondern von zwei maßgeschneiderten Webanwendungen unterstützt wird. Jetzt können Studenten, Dozenten und Mitarbeiter alle Mensen auf dem Campus durchsuchen und auf einen Blick sehen, welche Essensstationen geöffnet sind. Dann ist es nur noch ein Klick (oder ein Tippen!) bis zum Menü und den Zutaten der einzelnen Gerichte. Ganz einfach!

Es handelte sich um ein großes, komplexes Projekt, das praktische Manager, ein originelles Design, eine ausgeklügelte Front-End-Codierung und eine beeindruckende Back-End-Programmierung erforderte, die alle gut zusammenarbeiteten, um erfolgreich zu sein. Kurz gesagt, ein ideales Projekt für New Media Campaigns. Wir haben schon viele kundenspezifische Apps und Websites für Hochschulen und Universitäten entwickelt – darunter auch einige für die UNC, wie z. B. Energy Services, Geology Department und den Entrepreneurship Minor – dieses Projekt war also genau das Richtige für uns.

Alle Plötzlich sind wir wieder hungrige Studenten

Das Projektteam hatte bei diesem Projekt Glück: Wir alle erinnerten uns deutlich an den Schmerz, wenn wir aus dem Unterricht kamen, zur Mensa gingen und diese geschlossen war. Oder noch schlimmer, wir bezahlten für eine Mahlzeit, um dann festzustellen, dass es keine Optionen für bestimmte Ernährungseinschränkungen gab. Wir kannten also das Problem, das UNC Dining lösen wollte, sehr gut. Die Lösung bestand aus drei Teilen: der Website, einer benutzerdefinierten & Stunden-Webanwendung für das Menü und einer zweiten benutzerdefinierten App für die Live-Menübildschirme.

Die Website musste für ein jüngeres Publikum super modern aussehen, einfach zu pflegen und schnell zu laden sein. Sie wurde mit HiFi erstellt, dem rasend schnellen und unendlich konfigurierbaren Content Management System. Für das Menü & Stunden App, haben wir schnell festgestellt, dass der Hauptzweck war, diese drei Fragen für UNC Chapel Hill’s Studenten, Mitarbeiter und Fakultät zu beantworten:

• Was ist jetzt offen (oder später)?
• Was steht auf der Speisekarte?
• Kann ich die Zutaten sehen?

Schließlich wollten wir die Benutzererfahrung bis zum Ende durchgehen, was bedeutete, dass wir die tatsächliche Speisekarte vor Ort einbinden mussten. Die Mensen der UNC verfügen über große LCD-Bildschirme, auf denen das aktuelle Menü angezeigt wird. Unsere Lösung bestand darin, diese Bildschirme auf private Webseiten mit benutzerdefinierter Anzeige zu verweisen, so dass die Administratoren den Inhalt für jede Station so einfach aktualisieren können, als wäre es eine Website. Wir haben es wirklich einfach gemacht, und jeder Bildschirm passt zum Stil der einzelnen Station, der Mensa und der größeren UNC Dining-Marke. Die App für den Menübildschirm wurde in der Programmiersprache Scala entwickelt und funktioniert hervorragend.

Durch die Verknüpfung aller drei Komponenten konnten wir dem UNC Dining Services-Team die Lösung bieten, die es brauchte, um die Frage „Was gibt es zum Abendessen?“ zu beantworten. Das Ergebnis: eine superschnelle, einfach zu bedienende, leicht verständliche Website, die einfach funktioniert. Haben wir schon erwähnt, dass sie responsiv ist?

Teil 1: Die Website

Inhaltsverwaltung

Unsere erste Priorität war die Überprüfung des vorhandenen Inhalts der alten Website. Was soll bleiben, was soll verschwinden, und was kann verbessert werden? Die ursprüngliche Informationsarchitektur war nicht gut durchdacht, und es gab eine Reihe von verschiedenen Inhalten, die der Kunde verwalten musste. Zu den Inhaltsvorlagen der Website gehörten:

• Einfache Informationsseiten wie „Über uns“, „Nährwertangaben“ oder „Catering“
• Informationsfeed mit mehreren Elementen wie „News Blog“ oder „Veranstaltungskalender“
• Spezialitätenseiten wie „Essenspläne“
• Interaktive Formulare, wie Kontakt
• Und natürlich das Menü & Stunden-App

Eine Herausforderung beim Informationsdesign der neuen Website war der Umgang mit tief verschachtelten Inhalten. Manchmal sind Informationen in einer Gruppe in einer Gruppe in einer Gruppe gruppiert, und das kann die Navigationsmenüs schnell unübersichtlich und schwer zu bedienen machen. Nehmen wir zum Beispiel die App für das Menü und die Öffnungszeiten, bei der wir die Bildschirmoberfläche so gestalten mussten, dass sie fünf aufeinanderfolgende Informationsbits verarbeiten kann: Vom Standort (z. B. „Ram’s Head Dining Hall“) über die Mahlzeit („Mittagessen“) bis hin zur einzelnen Station („Pizza Bar“), zum Gericht („Buffalo Chicken“) und schließlich zur Zutat („Weizenmehl“). Wenn sich das kompliziert anhört, ist es das auch. Aber unser Team hat es elegant gelöst.

Unsere HiFi-Lösung

Unsere Lösung musste es einfach machen, den gesamten Baum der Menü-App zu durchforsten und die Inhaltsseiten an der richtigen Stelle zu aktualisieren und zu erstellen. Und da wir die Website mit HiFi erstellt haben, ist das ganz einfach, da jede dieser Inhaltsvorlagen standardmäßig enthalten ist. News-Blog, Veranstaltungskalender, Kontaktformulare und grundlegende Informationstypen sind alle enthalten. In der Systemsteuerung ist die Navigationshierarchie klar, und jeder der verschiedenen Inhaltstypen lässt sich einfach per Mausklick hinzufügen.

Der Kunde nutzt HiFi, um Menüinformationen zu aktualisieren, anstehende Veranstaltungen zu veröffentlichen, die Mitarbeiterprofile zu aktualisieren und spezielle Leitfäden für Studenten zu erstellen, z. B. zur Planung von Mahlzeiten und zur Vermeidung bestimmter Allergene. Bei UNC Dining geht es nicht nur um die Verpflegung der Studenten, sondern auch um die Ausbildung: Ein Diätassistent koordiniert mit den UNC Campus Health Services, um sicherzustellen, dass die Mahlzeiten gesund sind, und um Studenten mit besonderen Ernährungsbedürfnissen zu beraten. Akademischer Erfolg ist eng mit gesunder Ernährung und einem gesunden Lebensstil verknüpft, daher ist es wichtig, dass die Site-Administratoren die Site nutzen können, um genaue, aktuelle und & praktische Ernährungsinformationen zu veröffentlichen.

Gestaltungsansatz

Das alte Design litt unter den typischen Mängeln, die wir bei Websites sehen, die wir neu gestalten sollen:

• Kein Layout-Raster: Seitenelemente sind willkürlich angeordnet und unterschiedlich groß
• Schwache visuelle Hierarchie: Es ist unklar, wohin das Auge gehen soll, und die Überschriften sind nicht vom Text zu unterscheiden
• Keine offensichtlichen Handlungsaufforderungen: Der Besucher weiß nicht nur nicht, was er lesen soll, er weiß auch nicht, was er tun oder anklicken soll
• Mangelnder Weißraum: Text und Inhaltsboxen brauchen „Luft zum Atmen“, damit das Auge sie im Blickfeld unterscheiden kann
• Düstere Farbpalette: Gedämpfte Blau- und Grautöne dominieren das, was eigentlich ein farbenfrohes, lebhaftes Thema sein sollte (leckeres Essen!)
• Schlampige Typografie: Abgesehen von der Verwendung einfacher Standardschriftarten erschweren die durchschnittliche Zeilenlänge und die Absatzabstände das Lesen

Vor &Nach: Die alte Website nutzte den Platz nicht sehr gut und konzentrierte sich nicht auf die Aufgaben oder Inhalte, die die Besucher am meisten interessieren

Darüber hinaus lud die alte Website sehr langsam und war nicht für mobile Geräte optimiert. Unsere Aufgabe bestand nicht nur darin, all diese Designaspekte zu berücksichtigen, sondern auch darin, dies auf eine Weise zu tun, die dem Hauptpublikum angemessen ist: modern und jugendlich. Das resultierende Designmotiv hat diese Eigenschaften:

• Große, fette Überschriften
• Klare Handlungsaufforderungen
• Einfache, moderne Formen (Quadrate und Rechtecke)
• Keine unnötigen Schattierungen oder Texturen
• Liberaler Weißraum

Darüber hinaus, hat unser Team die Oberfläche so gestaltet, dass sie sich auf dem Bildschirm wohlfühlt, so wie ein Programm oder eine Anwendung auf Ihrem Computer die gesamte Fläche nutzt. Das bedeutet, dass das Design nicht an eine bestimmte Seitenbreite gebunden ist, sondern sowohl bildschirmfüllend ist als auch auf verschiedene Gerätekontexte reagiert: Die neue UNC Dining-Website ist auf einem Breitbild-Desktop-Monitor genauso zu Hause wie auf einem Laptop, einem Tablet oder einem Telefon.

Links sind offensichtlich und leicht antippbar. Die Rubriken und Texte haben eine klare, gut definierte Hierarchie. Die einzelnen Nachrichten und Artikel sind auch bei längerer Betrachtung angenehm zu lesen. Das Design erstreckt sich über die gesamte Breite des Bildschirms, den Sie zum Betrachten verwenden. Es verwendet dieselben (Carolina-)Blau- und Grautöne der ursprünglichen Farbpalette, stellt sie aber in ein ausgewogenes Verhältnis zu großen, hochauflösenden, farbigen Fotos. Die Navigation ist gut organisiert, interaktiv und wird nur dann eingeblendet, wenn Sie es wünschen. Subtile Animationen vermitteln ein Gefühl von Reaktionsfähigkeit und Laune. Die Gesamtwirkung besteht darin, den Schwerpunkt auf die Reichhaltigkeit des Inhalts zu legen.

Driven by Action

New Media Campaigns verfolgt eine Philosophie, die sich „Action Driven Design“ nennt. Das bedeutet, dass wir an jedes Webprojekt herangehen, indem wir die typische Frage „Wie soll es aussehen?“ in „Was soll es tun?“ umkehren. Das zwingt uns dazu, sorgfältig darüber nachzudenken, welche Aktionen die Besucher der Website durchführen wollen. Oft ist es so einfach, sich auf die ein bis drei wichtigsten Ziele der Website festzulegen. Im Fall von UNC Dining war das glasklar:

1. Was ist geöffnet und was gibt es zu essen?
2. Was ist in diesen Tagen los?
3. Was deckt mein Essensplan ab?

Wenn Sie von dort aus rückwärts arbeiten, werden Sie sehen, dass alle drei Aktionen die wichtigsten visuellen Elemente auf der Homepage sind und woran die meisten Besucher interessiert sind. Aber darüber hinaus gibt es eine Fülle von Informationen über die Website: Einzelheiten über Speisepläne, Catering und sogar das Engagement der UNC Dining für Nachhaltigkeit, die alle über ein interaktives Menü leicht zugänglich sind. Klicken oder tippen Sie auf die Seite, um den gesamten Inhalt auf einen Blick zu sehen.

Social Media

Die UNC Dining nimmt ihre Kommunikationskanäle ernst. Es wird nicht nur regelmäßig auf Twitter, Facebook und Instragram gepostet, sondern auch die Kommunikation auf allen drei Plattformen koordiniert. Das bedeutet, dass die Follower unabhängig von ihrem bevorzugten Medium ein konsistentes redaktionelles Erlebnis erhalten.

Auf der Startseite haben wir einen Live-Feed von allen drei Plattformen eingefügt. Die neuesten Facebook- und Twitter-Updates werden als Text und die Instagram-Updates als große, hochwertige Fotos eingefügt. Dies ist eine großartige Möglichkeit, sowohl die Bemühungen des Medienteams zu unterstützen als auch frische, originelle und attraktive Inhalte für die Homepage bereitzustellen.

Handgefertigter Code

Wie bei allen NMC-Webprojekten schreiben wir den Code von Hand. Dadurch wird sichergestellt, dass er schlank und prägnant ist (kein unnötiger Markup, der die Seite unnötig aufbläht) und die Seite für die Indizierung durch Suchmaschinen optimiert. Das bedeutet auch, dass wir den Code im Voraus komprimieren und zwischenspeichern können, um die Rendering-Zeit der Seite drastisch zu verkürzen und alle browserspezifischen Anzeigefehler zu umgehen (der Internet Explorer ist bekanntermaßen problematisch). Und schließlich funktioniert UNC Dining auf Ihrem riesigen Desktop-Monitor genauso gut wie auf Ihrem Laptop, Tablet oder Telefon – sogar das Menü & hours app, das sofort mit genauen Informationen reagiert, wenn Sie es berühren und streichen.

Teil 2: Menü & Stunden Webanwendung

UNC Dining bietet eine Webanwendung, die eine Frage beantworten soll: „Ich bin hungrig. Was gibt es auf dem Campus zu essen?“ Wir haben mit Ruby on Rails eine maßgeschneiderte Software entwickelt, die eine Handvoll Dinge sofort und automatisch erledigt:

• Abfrage der aktuellen Uhrzeit
• Abgleich der Uhrzeit mit einer Datenbank aller Esslokale auf dem gesamten UNC-Campus
• Rückgabe einer Liste dessen, was gerade geöffnet ist
• Anzeige einer aktuellen,
• Jeder Menüpunkt enthält vollständige Nährwertangaben &Allergeninformationen auf einen Blick

Wenn es nur diese Funktionalität bieten würde, wäre es ein Triumph. Aber ein kurzes Ziehen mit der Maus (oder dem Daumen) entlang der Zeitleiste zeigt die wechselnden Stunden und Optionen in Echtzeit an, während Sie sie verschieben, ohne Verzögerung. Denn vielleicht sind Sie ja neugierig, was es heute zum Abendessen gibt. Und mit der sofortigen Kalenderauswahl können Sie herausfinden, was es nächste Woche zum Frühstück gibt. Sie können auch mehrere Essenszeiten aus einem Dropdown-Menü am Ort selbst auswählen.

Sie haben besondere Ernährungsbedürfnisse? Auch dafür haben wir eine Lösung. Die Menü-App verfügt über einen Allergenfilter, der die üblichen Verdächtigen wie Weizen, Milch, Fisch und Erdnüsse auflistet und mit dem Sie alle Artikel, die diese enthalten, von der Liste ausschließen können. Artikel mit diesen allergenen Zutaten werden ausgegraut und durchgestrichen. Das Beste für Allergiker ist, dass sich die App Ihre Auswahl bei jedem Besuch merkt, so dass Sie sie nicht jedes Mal neu treffen müssen.

Nutzungsdaten

Nach nur wenigen Wochen erleben wir eine rasche Akzeptanz durch die Schüler, die die neue App entdecken. Die Nutzung der Anwendung hat seit dem Start der neuen Website und der App jede einzelne Woche zugenommen. Wir werden auch weiterhin genau beobachten, wie sich das neue Design bewährt, das Teil unserer laufenden Zusammenarbeit mit UNC Dining ist.

Teil 3: Menübildschirme

Um das neue Benutzererlebnis abzurunden, hat NMC digitale Menüs entworfen und vor Ort implementiert. Diese werden über hochauflösende LCD-Fernsehbildschirme an jeder Station in ausgewählten Speisesälen angezeigt. Wir arbeiteten eng mit den IT-Mitarbeitern der UNC zusammen, um einen Live-Web-Feed einzubinden und sicherzustellen, dass alles gut zusammenpasst. Unser Ziel war es, dass die Bildschirme genauso einfach zu pflegen sind wie der Rest der Website, aber mit einer angepassten Anzeige, damit Dinge wie Mauszeiger nicht auftauchen und die Illusion zerstören.

Unser technisches Genie, Kris Jordan, hat die angepasste Programmierung (in Scala) vorgenommen und in das bestehende Bildschirmverwaltungssystem der UNC integriert. Eine der großen Verbesserungen dieser Einrichtung gegenüber der vorherigen, die die Abteilung hatte, bestand darin, dass die alten Bildschirme, die mit den unflexiblen Vorlagen von Scala arbeiten mussten, nicht mehr so viele Design-Einschränkungen aufwiesen. Wir änderten jedoch die Grundkonfiguration, und anstatt die Vorlagen von Scala zu verwenden, wiesen wir jedem Bildschirm einfach eine eindeutige URL zu, wodurch wir die Flexibilität moderner Browser nutzen und bei der Gestaltung der Bildschirme wirklich kreativ werden konnten. Jetzt ist jeder Bildschirm auf eine eindeutige URL ausgerichtet, so dass UNC die neuesten Webtechniken und die Designflexibilität in den neuen Layouts nutzen kann

Nur NMC

Nicht viele Webfirmen können ein Projekt wie dieses durchführen. Der Erfolg der neuen Website und der maßgeschneiderten Anwendung der UNC Dining ist ein perfektes Beispiel für die einzigartigen Stärken, die New Media Campaigns in jedem Webprojekt vereint.

Zusätzlich zu unserer umfassenden Vertrautheit mit den besonderen Bedürfnissen von Hochschulen erforderte dieses Projekt die praktische Koordination durch unser erfahrenes Kundenbetreuungsteam; eine durchdachte, gut strukturierte Inhaltsstrategie & Informationsarchitektur; ein mutiges, originelles und effektives handlungsorientiertes visuelles Design; eine reaktionsschnelle, schlanke, fachmännische HTML & CSS-Handkodierung; und eine komplexe, maßgeschneiderte Back-End-Programmierung. Alles wurde pünktlich und im Rahmen des Budgets geliefert, mit verdammt schnellen Ladezeiten und mit begeisterten Kritiken veröffentlicht.

Wir haben uns gefreut, dass wir mit der UNC Dining-Website unsere digitalen Fähigkeiten unter Beweis stellen konnten, und der Kunde könnte nicht begeisterter sein. Wie kann NMC Sie begeistern? Nehmen Sie noch heute Kontakt auf.