Free Press

„Gdzie powinniśmy dziś zjeść?”

Mieliśmy godną pozazdroszczenia okazję współpracować z zespołem Usług żywieniowych Uniwersytetu Północnej Karoliny, aby na nowo wyobrazić sobie nowoczesną stronę internetową dotyczącą lokalizacji jadalni, tak aby wreszcie studenci wiedzieli, co jest serwowane, kiedy i gdzie. We współpracy z Aramark i działem Usług Informatycznych UNC, zbudowaliśmy stronę internetową zasilaną przez nie jedną, ale dwie niestandardowe aplikacje internetowe. Teraz studenci, wykładowcy i pracownicy mogą przeglądać wszystkie jadalnie w kampusie i zobaczyć, które stacje są otwarte na pierwszy rzut oka. Następnie wystarczy jedno kliknięcie (lub stuknięcie!), aby zapoznać się z menu i składnikami każdej pozycji. Proste!

To był duży, skomplikowany projekt, który wymagał praktycznego kierownictwa, oryginalnego projektu, zgrabnego kodowania front-end i imponującego programowania back-end, wszystko to działało razem, aby zakończyć się sukcesem. Krótko mówiąc, idealny projekt dla Kampanii Nowych Mediów. Zrobiliśmy sporo niestandardowych aplikacji i stron internetowych dla szkół wyższych i uniwersytetów – w tym kilka dla UNC, takich jak Usługi Energetyczne, Wydział Geologii i Mniejszość Przedsiębiorczości – więc ten projekt był jak najbardziej w naszym stylu.

All the Sudden We’re Hungry Students Again

Zespół projektowy miał szczęście: wszyscy dobrze pamiętamy ból wychodzenia z zajęć, chodzenia do jadalni i znajdowania jej zamkniętej. Albo, co gorsza, płacenie za posiłek tylko po to, aby zdać sobie sprawę, że nie ma dostępnych opcji dla konkretnych ograniczeń dietetycznych. Tak więc dobrze wiedzieliśmy, jaki problem chciał rozwiązać UNC Dining. Rozwiązanie składało się z trzech części: strony internetowej, niestandardowej aplikacji internetowej do obsługi menu oraz drugiej niestandardowej aplikacji do obsługi ekranów menu na żywo.

Strona internetowa musiała wyglądać super nowocześnie dla młodszej publiczności, być łatwa w utrzymaniu i szybko się ładować. Została zbudowana przy użyciu HiFi, szybkiego i nieskończenie konfigurowalnego systemu zarządzania treścią. Dla menu & aplikacji godzin, szybko ustaliliśmy, że jego głównym celem było odpowiedzieć na te trzy pytania dla studentów, pracowników i wykładowców UNC Chapel Hill:

• Co jest otwarte teraz (lub później)?
• Co jest w menu?
• Czy mogę zobaczyć składniki?

Wreszcie, chcieliśmy zobaczyć doświadczenie użytkownika aż do końca, co oznaczało powiązanie z rzeczywistym menu na miejscu. Sale restauracyjne UNC posiadają duże ekrany LCD, na których wyświetlane jest aktualne menu. Naszym rozwiązaniem było skierowanie tych ekranów na prywatne strony internetowe z niestandardowym wyświetlaniem, tak aby administratorzy mogli aktualizować zawartość każdej stacji tak łatwo, jak gdyby była to strona internetowa. Zrobiliśmy to naprawdę proste do zrobienia i każdy ekran pasuje do stylu poszczególnych stacji, jadalni i większej marki UNC Dining. Aplikacja ekranów menu została zbudowana w języku programowania Scala i działa jak urok.

Wiążąc razem wszystkie trzy komponenty, byliśmy w stanie dać zespołowi UNC Dining Services rozwiązanie, którego potrzebowali, aby odpowiedzieć na pytanie: „Co jest na obiad?”. Rezultat: superszybka, prosta w użyciu, łatwa do zrozumienia strona internetowa, która po prostu działa. Czy wspomnieliśmy, że jest responsywna?

Część 1: Witryna internetowa

Zarządzanie treścią

Naszym pierwszym priorytetem był audyt istniejącej zawartości starej witryny. Co zostanie, co zniknie, a co można poprawić? Oryginalna architektura informacji nie była dobrze zaprojektowana i istniało wiele różnych rodzajów treści, którymi klient musiał zarządzać. Szablony treści na stronie zawierały:

• Proste strony informacyjne, jak About Us, Nutrition Facts, czy Catering
• Informacje feed z wieloma elementami, jak News Blog czy Events Calendar
• Strony specjalistyczne, jak Meal Plans
• Interaktywne formularze, jak Contact Us
• I oczywiście, menu & godzin aplikacja

Jednym z wyzwań w części projektowania informacji w nowej witrynie było to, jak obsługiwać głęboko zagnieżdżone treści. Czasami informacje są zgrupowane w grupie w grupie w grupie i to może sprawić, że menu nawigacyjne jest zagracone i trudne w użyciu, szybko. Na przykład, weźmy menu i aplikację godzin, gdzie musieliśmy zaprojektować interfejs ekranu, aby obsłużyć pięć kolejno granularnych bitów informacji: Od lokalizacji (powiedzmy, „Ram’s Head Dining Hall”) w dół do posiłku („Lunch”) do indywidualnej stacji („Pizza Bar”) do dania („Buffalo Chicken”) i wreszcie do składnika („Mąka pszenna”). Jeśli brzmi to skomplikowanie, to tak jest. Ale nasz zespół rozwiązał to elegancko.

Nasze rozwiązanie HiFi

Nasze rozwiązanie musiało sprawić, że łatwo będzie drążyć całą drogę w dół drzewa aplikacji menu, jak również aktualizować i tworzyć strony we właściwym miejscu. A ponieważ zbudowaliśmy stronę internetową przy użyciu HiFi, jest to łatwe, ponieważ każdy z tych szablonów treści jest dołączony domyślnie. Blog informacyjny, kalendarz wydarzeń, formularze kontaktowe i podstawowe typy informacji są wliczone w cenę. Z poziomu panelu kontrolnego, hierarchia nawigacji jest jasna, a każdy z różnych typów treści jest prosty do dodania za pomocą kliknięcia przycisku.

Klient używa HiFi do aktualizacji informacji o menu, publikowania nadchodzących wydarzeń, aktualizacji profili pracowników i przygotowywania specjalnych przewodników dla studentów, takich jak jak planować posiłki i jak unikać niektórych alergenów. UNC Dining jest tak samo o służbie żywności dla studentów, jak to jest edukacja: Registered Dietitian jest zatrudniony do koordynacji z UNC Campus Health Services, aby upewnić się, że posiłki są zdrowe i doradzać studentom ze specjalnymi potrzebami żywieniowymi. Sukces akademicki jest ściśle związany z dobrym odżywianiem i zdrowym stylem życia, więc ważne jest, że administratorzy witryny mogą korzystać z witryny do publikowania dokładnych, terminowych, & praktycznych informacji żywieniowych.

Podejście do projektowania

Stary projekt cierpiał z powodu typowych wad, które widzimy w witrynach internetowych, które przychodzą do nas w celu przeprojektowania:

• Brak siatki układu: elementy strony są chaotycznie rozmieszczone i mają przypadkowe rozmiary
• Niedostateczna hierarchia wizualna: nie jest jasne, gdzie oko ma podążać, a nagłówki są nieodróżnialne od tekstu
• Brak oczywistych wezwań do działania: odwiedzający nie tylko nie wie, co czytać, ale także nie wie, co zrobić lub kliknąć
• Brak białych przestrzeni: tekst i pola treści potrzebują „przestrzeni do oddychania”, aby oko mogło je rozróżnić w polu widzenia
• Nieciekawa paleta kolorów: stonowane błękity i szarości dominują w tym, co powinno być kolorowym, żywym tematem (pyszne jedzenie!)
• Niedbała typografia: poza użyciem zwykłych, domyślnych czcionek, średnia długość linii i odstępy między akapitami utrudniają czytanie

Przed & Po: Stara strona nie wykorzystywała zbyt dobrze przestrzeni ani nie skupiała się na zadaniach lub treściach, którymi odwiedzający są najbardziej zainteresowani

Na domiar złego stara strona ładowała się bardzo wolno i nie była zoptymalizowana pod kątem urządzeń mobilnych. Naszym zadaniem było nie tylko zajęcie się każdym z tych aspektów, ale także zrobienie tego w sposób odpowiedni dla głównej grupy odbiorców: nowoczesnych i młodych. Powstały w ten sposób motyw projektowy ma następujące cechy:

• Duże, pogrubione nagłówki
• Jasne wezwania do działania
• Proste, nowoczesne kształty (kwadraty i prostokąty)
• Bez zbędnego cieniowania i tekstur
• Liberalna biała przestrzeń

Poza tym, nasz zespół zaprojektował interfejs tak, aby czuł się jak w domu na ekranie, tak jak program lub aplikacja na Twoim komputerze wykorzystuje całą przestrzeń. Oznacza to, że zamiast ograniczać się do szerokości strony, projekt jest zarówno pełnoekranowy, jak i responsywny w stosunku do różnych urządzeń: nowa strona UNC Dining jest tak samo naturalna na szerokoekranowym monitorze, jak i na laptopie, tablecie czy telefonie.

Linki są oczywiste i łatwo dostępne. Sekcje i teksty mają jasną, dobrze zdefiniowaną hierarchię. Poszczególne wiadomości i artykuły czyta się przyjemnie i długo. Projekt rozciąga się na całą szerokość ekranu, którego używasz do oglądania. Wykorzystuje te same (Carolina) błękity i szarości z oryginalnej palety, ale równoważy je dużymi, kolorowymi zdjęciami w wysokiej rozdzielczości. Nawigacja jest dobrze zorganizowana, interaktywna i ukryta, z wyjątkiem sytuacji, gdy jest potrzebna. Subtelne animacje dają poczucie responsywności i kapryśności. Ogólny efekt to położenie nacisku na bogactwo treści.

Pędzeni przez akcję

Kampanie Nowych Mediów stosują filozofię zwaną „Action Driven Design”. Oznacza to, że do każdego projektu internetowego podchodzimy odwracając typowe pytanie: „Jak to ma wyglądać?” do „Co to ma robić?”. Zmusza nas to do dokładnego zastanowienia się, jakie czynności ludzie przybywający na stronę chcą wykonać. Często jest to tak proste, jak skupienie się na jednym do trzech najważniejszych celów strony. W przypadku UNC Dining było to bardzo jasne:

1. Co jest otwarte i co można zjeść?
2. Co się dzieje w tych dniach?
3. Co obejmuje mój plan posiłków?

Pracując wstecz, można zauważyć, że wszystkie trzy działania są najważniejszymi elementami wizualnymi na stronie głównej i tym, co interesuje większość odwiedzających. Ale poza tym jest bogactwo informacji witryny: szczegóły na temat planów posiłków, catering, a nawet UNC Dining zobowiązanie do zrównoważonego rozwoju, wszystkie łatwo dostępne z interaktywnego menu. Kliknij lub dotknij, aby uzyskać natychmiastowy dostęp do całej zawartości witryny na pierwszy rzut oka.

Social Media

UNC Dining poważnie traktuje swoje kanały komunikacyjne. Nie tylko często publikuje posty na Twitterze, Facebooku i Instragramie, ale także koordynuje komunikaty na wszystkich trzech platformach. Oznacza to, że zwolennicy otrzymują spójne doświadczenie redakcyjne, niezależnie od preferowanego medium.

Na stronie głównej, mamy wyciągnąć na żywo z wszystkich trzech. Najnowsze aktualizacje z Facebooka i Twittera są wyświetlane jako tekst, a aktualizacje z Instagrama jako duże, wysokiej jakości zdjęcia. Jest to świetny sposób zarówno na wzmocnienie wysiłków zespołu medialnego, jak i na dostarczenie świeżej, oryginalnej i atrakcyjnej treści na stronę główną. Nie zaszkodzi też mieć zapierające dech w piersiach zdjęcia jedzenia!

Ręcznie tworzony kod

Jak w przypadku wszystkich projektów internetowych NMC, kod piszemy ręcznie. Dzięki temu jest on zwięzły i prosty (bez zbędnych znaczników zwiększających wagę strony), co optymalizuje stronę pod kątem indeksacji w wyszukiwarkach. Oznacza to również, że możemy go skompresować i buforować przed czasem, aby znacznie przyspieszyć czas renderowania strony i obejść wszelkie błędy wyświetlania specyficzne dla danej przeglądarki (Internet Explorer jest notorycznie problematyczny). Wreszcie, UNC Dining działa tak samo dobrze na gigantycznym monitorze, jak na laptopie, tablecie lub telefonie – nawet w menu & aplikacji godzin, która reaguje natychmiast z dokładnymi informacjami, jak dotknąć i przesuwać.

Część 2: Aplikacja internetowa Menu &Godziny

UNC Dining posiada aplikację internetową zaprojektowaną, aby odpowiedzieć na jedno pytanie: „Jestem głodny. Co można zjeść na kampusie?”. Zaprojektowaliśmy i zbudowaliśmy niestandardowe oprogramowanie przy użyciu Ruby on Rails, które robi kilka rzeczy, natychmiast i automatycznie:

• Wybiera aktualny czas
• Sprawdza czas względem bazy danych wszystkich miejsc, w których można zjeść w całym kampusie UNC
• Wraca listę tego, co jest teraz otwarte
• Wyświetla aktualną, dokładną listę każdej pozycji w menu
• Każda pozycja menu posiada pełne szczegóły żywieniowe & informacje o alergenach na pierwszy rzut oka

Gdyby tylko oferował tę funkcjonalność sam, byłby to triumf. Ale szybkie przeciągnięcie myszką (lub kciukiem) wzdłuż osi czasu ujawnia zmieniające się godziny i opcje w czasie rzeczywistym, gdy je przesuwasz, bez opóźnień. Bo może jesteś ciekawy, co będzie dostępne na kolację później dzisiaj. Dzięki natychmiastowemu kalendarzowi wyboru możesz dowiedzieć się, co będzie na śniadanie w przyszłym tygodniu. Możesz również wybrać wiele godzin posiłków z rozwijanego menu w samej lokalizacji.

Masz specjalne potrzeby dietetyczne? W tej kwestii również mamy cię na oku. Aplikacja menu posiada filtr alergenów z listą najczęściej występujących alergenów, takich jak pszenica, mleko, ryby i orzeszki ziemne, którego można użyć w celu wykluczenia z listy wszelkich pozycji, które je zawierają. Pozycje z tymi składnikami alergennymi są wyszarzone i wykreślone. Najlepszy ze wszystkich dla alergików, aplikacja pamięta swój wybór za każdym razem odwiedzasz więc nie trzeba zachować wybierając go za każdym razem.

Dane użytkowe

Tylko kilka tygodni w i jesteśmy świadkami szybkiego przyjęcia przez studentów, jak odkryć nową aplikację. Użycie aplikacji wzrosło w każdym tygodniu od uruchomienia nowej strony internetowej i aplikacji. Będziemy nadal uważnie śledzić, jak nowy projekt działa, co jest tylko częścią naszej stałej relacji z UNC Dining.

Część 3: Ekrany menu

Aby dopełnić całe nowe doświadczenie użytkownika, NMC zaprojektowało i wdrożyło cyfrowe menu na miejscu. Są one zasilane przez wysokiej rozdzielczości ekrany telewizyjne LCD na każdej stacji w wybranych jadalniach. Ściśle współpracowaliśmy z personelem IT UNC, aby wprowadzić transmisję internetową na żywo i upewnić się, że wszystko dobrze ze sobą współgra. Naszym celem było, aby ekrany były tak łatwe w utrzymaniu jak reszta strony internetowej, ale z niestandardowym wyświetlaniem, aby takie rzeczy jak kursory myszy nie pojawiały się i nie psuły iluzji.

Nasz geniusz techniczny, Kris Jordan, zajął się niestandardowym programowaniem (w Scali) i zintegrował je z istniejącym systemem zarządzania ekranami UNC. Jednym z największych usprawnień tej konfiguracji w stosunku do poprzedniej, którą posiadał wydział, było pozbycie się mnóstwa ograniczeń projektowych ze starych ekranów, które musiały działać w ramach nieelastycznych szablonów dozwolonych w Scali. Zmieniliśmy jednak podstawową konfigurację i zamiast korzystać z szablonów Scali, po prostu skierowaliśmy każdy ekran na unikalny adres URL, dzięki czemu mogliśmy skorzystać z elastyczności nowoczesnych przeglądarek i naprawdę kreatywnie podejść do projektowania ekranów. Teraz każdy ekran jest ustawiony pod unikalnym adresem URL, co pozwala UNC na wykorzystanie najnowszych technik internetowych i elastyczności projektowania w nowych układach

Tylko NMC

Niewiele firm internetowych może zrealizować taki projekt. Sukces nowej strony internetowej i niestandardowej aplikacji UNC Dining jest doskonałym przykładem unikalnych atutów, które New Media Campaigns łączy w każdym projekcie internetowym.

Oprócz naszej rozległej znajomości szczególnych potrzeb instytucji szkolnictwa wyższego, ten projekt wymagał praktycznej koordynacji ze strony naszego wykwalifikowanego zespołu ds. relacji z klientami; przemyślanej, dobrze ustrukturyzowanej strategii zawartości & architektury informacji; odważnego, oryginalnego i skutecznego projektu wizualnego opartego na działaniu; responsywnego, szczupłego, eksperckiego kodowania HTML & CSS; oraz złożonego, niestandardowego programowania back-end. Wszystko dostarczone na czas i w ramach budżetu, z zawrotnie szybkimi czasami ładowania i uruchomione z entuzjastycznymi recenzjami.

Cieszymy się, że mieliśmy okazję popisać się naszymi cyfrowymi umiejętnościami przy tworzeniu strony UNC Dining, a klient nie mógł być bardziej zachwycony. Jak NMC może zachwycić Ciebie? Skontaktuj się z nami już dziś.