Free Press

«¿Dónde comemos esta noche?»

Tuvimos la envidiable oportunidad de trabajar con el equipo de Dining Services de la Universidad de Carolina del Norte para reimaginar un moderno sitio web de ubicaciones de comedor para que, por fin, los estudiantes sepan qué se sirve, cuándo y dónde. En colaboración con Aramark y el departamento de servicios informáticos de la UNC, creamos un sitio web alimentado no por una, sino por dos aplicaciones web personalizadas. Ahora, los estudiantes, los profesores y el personal pueden navegar por todos los comedores del campus y ver qué puestos de comida están abiertos de un vistazo. A continuación, con un solo clic (¡o un toque!) pueden consultar el menú y los ingredientes de cada plato. Es un proyecto grande y complejo que ha requerido la participación de los gestores, un diseño original, una codificación de primera línea y una impresionante programación de segunda línea, todo ello combinado con éxito. En resumen, un proyecto ideal para las campañas en los nuevos medios. Hemos hecho bastantes aplicaciones y sitios web personalizados para colegios y universidades -incluyendo varios para la UNC, como los Servicios de Energía, el Departamento de Geología y el Minor de Emprendimiento-, así que éste estaba bien dentro de nuestra capacidad.

De repente volvemos a ser estudiantes hambrientos

El equipo del proyecto tuvo suerte en este caso: todos recordamos claramente el dolor de salir de clase, caminar hasta un comedor y encontrarlo cerrado. O lo que es peor, pagar una comida sólo para darse cuenta de que no había opciones disponibles para limitaciones dietéticas específicas. Así que conocíamos bien el problema que UNC Dining quería resolver. La solución se dividió en tres partes: el sitio web, una aplicación web de menú personalizado & horas, y una segunda aplicación personalizada para las pantallas de menú en vivo.

El sitio web tenía que tener un aspecto súper moderno para un público más joven y ser fácil de mantener y rápido de cargar. Está construida con HiFi, el sistema de gestión de contenidos más rápido e infinitamente configurable. Para la aplicación del menú &horario, determinamos rápidamente que su objetivo principal era responder a estas tres preguntas para los estudiantes, el personal y la facultad de UNC Chapel Hill:

• ¿Qué está abierto ahora (o más tarde)?
• ¿Qué hay en el menú?
• ¿Puedo ver los ingredientes?

Por último, queríamos ver la experiencia del usuario hasta el final, lo que significaba vincular el menú real del sitio. Los comedores de la UNC tienen grandes pantallas LCD que muestran el menú actual. Nuestra solución fue dirigir estas pantallas a páginas web privadas con visualización personalizada para que los administradores del sitio puedan actualizar el contenido de cada estación tan fácilmente como si fuera un sitio web. Lo hicimos muy sencillo y cada pantalla coincide con el estilo de la estación individual, del comedor y de la marca UNC Dining en general. La aplicación de la pantalla del menú está construida en el lenguaje de programación Scala y funciona a las mil maravillas.

Al unir los tres componentes, pudimos dar al equipo de Servicios de Comedor de la UNC la solución que necesitaban para responder a la pregunta: «¿Qué hay para cenar?» El resultado: un sitio web súper rápido, sencillo de usar y fácil de entender que simplemente funciona. ¿Hemos mencionado que es sensible?

Parte 1: El sitio web

Gestión del contenido

Nuestra primera prioridad fue auditar el contenido existente en el antiguo sitio. ¿Qué se queda, qué se va y qué se puede mejorar? La arquitectura de la información original no estaba bien diseñada y había varios tipos de contenido que el cliente necesitaba gestionar. Las plantillas de contenido del sitio incluían:

• Páginas de información sencillas, como Quiénes somos, Datos nutricionales o Catering
• Formas de información con múltiples elementos, como Blog de noticias o Calendario de eventos
• Páginas de especialidad, como Planes de comidas
• Formularios interactivos, como Contacto
• Y, por supuesto, la aplicación del menú &horas

Un reto en la parte del diseño de la información del nuevo sitio fue cómo manejar el contenido profundamente anidado. A veces la información se agrupa en un grupo en un grupo en un grupo y que puede hacer que los menús de navegación desordenado y difícil de usar, rápido. Por ejemplo, tomemos el menú y la aplicación de horas, donde tuvimos que diseñar la interfaz de la pantalla para manejar cinco trozos de información sucesivamente granulares: Desde la ubicación (digamos, «Comedor Ram’s Head») hasta la comida («Almuerzo»), pasando por la estación individual («Pizza Bar»), el plato («Pollo a la búfala») y, finalmente, el ingrediente («Harina de trigo»). Si parece complicado, lo es. Pero nuestro equipo lo resolvió con elegancia.

Nuestra solución HiFi

Nuestra solución tenía que facilitar la perforación de todo el árbol de la aplicación de menús, así como la actualización y la creación de páginas de contenido en el lugar correcto. Y como construimos el sitio web usando HiFi, es fácil, ya que cada una de estas plantillas de contenido están incluidas por defecto. El blog de noticias, el calendario de eventos, los formularios de contacto y los tipos de información básica están incluidos. Desde el panel de control, la jerarquía de navegación es clara y cada uno de los diferentes tipos de contenido es sencillo de añadir con un solo clic.

El cliente utiliza HiFi para actualizar la información de los menús, publicar los próximos eventos, actualizar los perfiles del personal y preparar guías especiales para los estudiantes, como por ejemplo cómo planificar las comidas y cómo evitar ciertos alérgenos. El comedor de la UNC se ocupa tanto de servir la comida a los estudiantes como de la educación: se contrata a un dietista titulado para coordinar con los servicios de salud del campus de la UNC que se aseguren de que las comidas sean saludables y asesoren a los estudiantes con necesidades dietéticas especiales. El éxito académico está estrechamente vinculado a una buena nutrición y a un estilo de vida saludable, por lo que es importante que los administradores del sitio puedan utilizarlo para publicar información nutricional precisa, oportuna y & práctica.

Enfoque del diseño

El antiguo diseño adolecía de los típicos fallos que vemos en los sitios web que nos llegan para ser rediseñados:

• Sin retícula de diseño: los elementos de la página están dispuestos y dimensionados de forma desordenada
• Poca jerarquía visual: no está claro dónde debe ir el ojo y los títulos no se distinguen del cuerpo del texto
• No hay llamadas a la acción evidentes: el visitante no sólo no sabe qué leer, sino que tampoco sabe qué hacer o hacer clic
• Falta de espacio en blanco: el texto y los recuadros de contenido necesitan «espacio para respirar» para que el ojo pueda distinguirlos en el campo visual
• Paleta de colores escasa: los azules y grises apagados dominan lo que, por lo demás, debería ser un tema colorido y vibrante (¡una comida deliciosa!)
• Tipografía descuidada: más allá del uso de fuentes simples y predeterminadas, la longitud media de las líneas y el espaciado entre párrafos dificultan la lectura

Antes & Después: El antiguo sitio no utilizaba muy bien el espacio ni se centraba en las tareas o contenidos que más interesan a los visitantes

Además de todo esto, el antiguo sitio se cargaba muy lentamente y no estaba optimizado para dispositivos móviles. Nuestra tarea no sólo consistía en abordar cada una de estas consideraciones de diseño, sino también en hacerlo de forma adecuada al público principal: moderno y juvenil. El motivo de diseño resultante tiene estas características:

• Titulares grandes y en negrita
• Llamadas a la acción claras
• Formas sencillas y modernas (cuadrados y rectángulos)
• Sin sombreados ni texturas innecesarias
• Espacio en blanco liberal

Más allá de esto, nuestro equipo diseñó la interfaz para que se sintiera como en casa en una pantalla, del mismo modo que un programa o aplicación en su ordenador utiliza la totalidad del espacio. Es decir, en lugar de estar limitado por una anchura de «página» arbirtray, el diseño es a la vez de pantalla completa y sensible a los diferentes contextos de los dispositivos: el nuevo sitio de UNC Dining es tan naturalmente en casa en un monitor de escritorio de pantalla ancha como lo es un ordenador portátil, una tableta o un teléfono.

Los enlaces son obvios y fácilmente tocables. Las secciones y el texto tienen una jerarquía clara y bien definida. Las noticias y artículos individuales son agradables de leer en profundidad. El diseño abarca todo el ancho de la pantalla que se utilice para verlo. Emplea los mismos azules y grises (Carolina) de la paleta original, pero los equilibra con grandes fotografías de alta definición y colorido. La navegación está bien organizada, es interactiva y está oculta excepto cuando se desea. Las sutiles animaciones transmiten una sensación de respuesta y capricho. El efecto general es poner el énfasis en la riqueza del contenido.

Impulsado por la acción

New Media Campaigns emplea una filosofía llamada «Action Driven Design». Esto significa que abordamos cada proyecto web invirtiendo la típica pregunta «¿Cómo debería ser?» por «¿Qué debería hacer?». Nos obliga a pensar cuidadosamente en las acciones que la gente llega al sitio buscando hacer. A menudo es tan fácil como centrarse en los tres objetivos más importantes del sitio. En el caso de UNC Dining, estaba muy claro:

1. ¿Qué hay abierto y qué se puede comer?
2. ¿Qué está pasando estos días?
3. ¿Qué cubre mi plan de comidas?

Trabajando hacia atrás a partir de ahí, verás que las tres acciones son los elementos visuales más importantes de la página de inicio y lo que más interesa a los visitantes. Pero más allá de eso hay una gran cantidad de información del sitio: detalles sobre los planes de comidas, el catering, e incluso el compromiso de UNC Dining con la sostenibilidad, todo fácilmente accesible desde un menú interactivo. Haga clic o toque para acceder al instante a todo el contenido del sitio de un vistazo.

Medios sociales

UNC Dining se toma en serio sus canales de comunicación. No solo publica con frecuencia en Twitter, Facebook e Instragram, sino que coordina los mensajes en las tres plataformas. Esto significa que los seguidores obtienen una experiencia editorial consistente, sea cual sea su medio preferido.

En la página de inicio, hemos sacado un feed en directo de las tres. Las últimas actualizaciones de Facebook y Twitter se muestran en forma de texto y las de Instagram en forma de fotos grandes y de alta calidad. Es una forma estupenda de reforzar los esfuerzos del equipo de medios de comunicación y de proporcionar un contenido fresco, original y atractivo a la página de inicio. No está de más tener fotos de comida que hacen la boca agua!

Código hecho a mano

Como en todos los proyectos web de NMC, escribimos el código a mano. Esto asegura que es magra y concisa (sin marcas innecesarias para aumentar el peso de la página) que optimizar la página del sitio para la indexación del motor de búsqueda. También significa que podemos comprimirlo y almacenarlo en caché con antelación para acelerar el tiempo de representación de la página de forma drástica y evitar cualquier error de visualización específico de los navegadores (Internet Explorer es notoriamente problemático). Por último, UNC Dining funciona tan bien en el monitor de tu ordenador de sobremesa como en el de tu portátil, tableta o teléfono, incluso en la aplicación del menú & horas, que responde instantáneamente con información precisa al tocar y deslizar.

Parte 2: Aplicación web de &horas de menú

UNC Dining cuenta con una aplicación web diseñada para responder a una pregunta: «Tengo hambre. Qué hay para comer en el campus?». Diseñamos y construimos un software a medida utilizando Ruby on Rails que hace un puñado de cosas, de forma instantánea y automática:

• Busca la hora actual
• Comprueba la hora con una base de datos de todos los lugares para comer en todo el campus de la UNC
• Devuelve una lista de lo que está abierto en este momento
• Muestra una lista actual, muestra una lista actualizada y precisa de cada elemento del menú
• Cada elemento del menú cuenta con información nutricional completa& información sobre alérgenos de un vistazo

Si sólo ofreciera esa funcionalidad, sería un triunfo. Pero un rápido arrastre del ratón (o del pulgar) a lo largo de la línea de tiempo revela los cambios de hora y las opciones en tiempo real a medida que se desliza, sin retraso. Porque a lo mejor tienes curiosidad por saber qué estará disponible para cenar hoy más tarde. Y con el selector de calendario instantáneo, puedes saber qué hay para desayunar la semana que viene. También puedes seleccionar varios horarios de comida en un menú desplegable dentro de la propia ubicación.

¿Tienes necesidades dietéticas especiales? Ahí también lo tenemos cubierto. La aplicación del menú tiene un filtro de alérgenos con una lista de sospechosos comunes como el trigo, la leche, el pescado y los cacahuetes que puedes utilizar para excluir de la lista cualquier artículo que los contenga. Los artículos con esos ingredientes alergénicos aparecen en gris y se tachan. Lo mejor de todo para los alérgicos es que la aplicación recuerda su selección cada vez que la visita, por lo que no tiene que seguir seleccionándola cada vez.

Datos de uso

Sólo han pasado unas semanas y estamos siendo testigos de la rápida adopción por parte de los estudiantes al descubrir la nueva aplicación. El uso de la aplicación ha aumentado cada semana desde el lanzamiento del nuevo sitio web y la aplicación. Seguiremos vigilando de cerca el rendimiento del nuevo diseño, que forma parte de nuestra relación continua con el comedor de la UNC.

Parte 3: Pantallas de menú

Para completar toda la nueva experiencia del usuario, NMC diseñó e implementó menús digitales en el lugar. Estos son alimentados por pantallas de televisión LCD de alta definición en cada estación de los comedores seleccionados. Trabajamos estrechamente con el personal informático de la UNC para obtener una transmisión web en directo y asegurarnos de que todo encajara bien. Nuestro objetivo era que las pantallas fueran tan fáciles de mantener como el resto del sitio web, pero con una visualización personalizada para que cosas como los cursores del ratón no aparecieran y arruinaran la ilusión.

Nuestro genio técnico residente, Kris Jordan, se encargó de la programación personalizada (en Scala) y la integró en el sistema de gestión de pantallas existente en la UNC. Una de las grandes mejoras de esta configuración con respecto a la anterior que tenía el departamento fue eliminar un montón de limitaciones de diseño con las antiguas pantallas, que tenían que funcionar dentro de las plantillas inflexibles permitidas en Scala. Sin embargo, cambiamos la configuración básica y, en lugar de utilizar las plantillas de Scala, simplemente apuntamos cada pantalla a una URL única y, como resultado, pudimos aprovechar las flexibilidades de los navegadores modernos y ser realmente creativos con los diseños de las pantallas. Ahora, cada pantalla se configura en una URL única, lo que permite a UNC utilizar las últimas técnicas web y la flexibilidad de diseño en los nuevos diseños

Sólo NMC

No muchas empresas web pueden llevar a cabo un proyecto como éste. El éxito del nuevo sitio web y la aplicación personalizada de UNC Dining es un ejemplo perfecto de las fortalezas únicas que New Media Campaigns reúne en cada proyecto web.

Además de nuestra amplia familiaridad con las necesidades particulares de las instituciones de educación superior, este proyecto requirió la coordinación práctica de nuestro experto equipo de relaciones con el cliente; una estrategia de contenido bien estructurada y reflexiva & arquitectura de la información; un diseño visual audaz, original y eficaz orientado a la acción; un código manual HTML & experto y responsivo; y una programación back-end compleja y personalizada. Todo ello entregado a tiempo y dentro del presupuesto, con tiempos de carga rapidísimos y lanzado con muy buenas críticas.

Estamos encantados de tener la oportunidad de mostrar nuestras habilidades digitales con el sitio de UNC Dining y el cliente no podría estar más emocionado. ¿Cómo puede emocionarse NMC? Póngase en contacto hoy mismo.