El viewbook digital de SMC
Un viewbook digital pensado primero para el celular para Spartanburg Methodist College, del mapa del sitio a la construcción en React, en el verano de 2019
Mi papel
VP de Diseño UX
- Cliente
- Spartanburg Methodist College
- Agencia
- MediaCross, en St. Louis
- Cuándo
- Junio a agosto de 2019
- Sigue en línea
- makebigmoves.smcsc.edu
- Planeé el sitio como un diagrama de flujo y mapa del sitio de una sola página: seis páginas, una navegación de cuatro elementos y cuatro notas de construcción sobre formularios del CRM, URL personalizadas, animaciones al desplazarse y una calculadora de becas.
- Dibujé los ocho wireframes, con la calculadora de becas como un flujo de tres pasos: calcular, presentarte, resultados.
- Diseñé las seis pantallas a ancho de teléfono en el azul marino y el cian de la campaña, sobre su textura topográfica.
- Construí el sitio como una aplicación de una sola página en React, con contadores y transiciones que se activan al desplazarse, Google Analytics y una imagen de Docker para la base nginx de la agencia.
- 7 semanas desde el mapa del sitio del 25 de junio hasta el último archivo fuente del 12 de agosto de 2019
- 6 páginas y cada una termina en el mismo formulario de solicitud de información
- 3 pasos en la calculadora de becas, con una respuesta I don't know this en cada campo de puntaje
- 7 años en línea, con los mismos títulos de página y textos que el código fuente que conservé
Resumen
Spartanburg Methodist College, una universidad pequeña de Carolina del Sur, estaba agregando licenciaturas y quería su viewbook, el libro impreso que una universidad le entrega a un futuro estudiante, en un teléfono en lugar de en papel. Ese febrero, MediaCross les había propuesto a varias universidades viewbooks digitales: sitios conectados al CRM, pensados primero para el celular y con algo interactivo. Yo diseñé y construí el de esta universidad, en torno a su campaña Make Big Moves.
El diagrama de flujo tiene fecha del 25 de junio, los wireframes del 11 de julio, y el código fuente en React va del 29 de julio al 12 de agosto. El Internet Archive capturó por primera vez el sitio en línea el 11 de noviembre de 2019, y seguía en línea en octubre de 2026, con los mismos títulos de página, textos e ID de analítica que el código fuente que conservé. El relato público de MediaCross sobre la campaña le atribuye la generación de nuevo ingreso y la matrícula total más grandes de la universidad, durante la pandemia; la parte que le corresponde al viewbook nunca se separó, y no conservo ninguna exportación de la analítica.
Quiénes participaron
- La universidad Sus oficinas de admisiones y de marketing, que aportaron la campaña, las fotografías y los textos, y cuya dirección de marketing dijo que el viewbook terminado era el mejor que había producido la universidad, según el relato de MediaCross.
- MediaCross La agencia que llevó la campaña Make Big Moves, con sus impresos, video y publicidad, y que vendió el viewbook digital.
- Yo El mapa del sitio, los wireframes, las pantallas y la construcción en React.
Leer el expediente .
Dónde empezó
Un viewbook impreso se reimprime cada año y no le puede preguntar nada al lector. En febrero de 2019, MediaCross les propuso a las universidades uno digital en su lugar: un sitio conectado al CRM de admisiones, hecho primero para teléfonos, con algo interactivo, y viewbooks de muestra para dos universidades que enseñaban lo que eso significaba. Para junio, Spartanburg Methodist College ya tenía uno en marcha, como parte de una campaña llamada Make Big Moves que también incluía viewbooks impresos, una guía de ayuda financiera, postales y plantillas de correo electrónico.
Los futuros estudiantes de la universidad leían en el teléfono, y la universidad quería dos cosas que un libro no puede hacer: que la búsqueda se sintiera personal y reunir solicitudes de información. Esos dos deseos le dieron forma a cada página.
Una página que planeó todo el sitio
Empecé con un diagrama de flujo y mapa del sitio en una sola página. Seis páginas bajo una navegación de cuatro elementos: inicio, programas académicos que funcionan, desarrollo profesional, vida en el campus, Spartanburg y ayuda financiera, con tres enlaces al sitio propio de la universidad para clubes, visitas y solicitudes de admisión. Las secciones de cada página aparecen en orden, y cada página termina en el mismo formulario de solicitud de información Make the Move.
Cuatro notas numeradas en la página dicen lo que haría la construcción. Los formularios de solicitud de información se incrustarían desde el CRM de la universidad. Las URL personalizadas leerían el registro de un contacto y adaptarían la página al estudiante. Las animaciones se activarían en puntos de referencia al desplazarse: contadores de cifras, desvanecidos, deslizamientos. Y una calculadora de becas respondería a partir del GPA, los puntajes de exámenes y la residencia en Carolina del Sur una vez que el estudiante se hubiera presentado.
Wireframes, y una calculadora en lugar de un folleto
Los wireframes llevaron el plan a ocho páginas a ancho de escritorio: las seis páginas, con la de ayuda financiera dibujada tres veces para los tres estados de la calculadora. La página de inicio ya tiene el sendero punteado y el diagrama Two Paths, One Place que sostienen la campaña; las imágenes son marcadores de posición.
La calculadora es la única sección interactiva, y su orden es la decisión de diseño. Un estudiante responde cuatro preguntas: GPA, ACT, SAT combinado y si vive en Carolina del Sur. Luego se presenta y después recibe la respuesta: una beca para la que podría calificar, con enlaces de Apply, Visit y Programs debajo. La respuesta es lo que el estudiante vino a buscar; la presentación es lo que la universidad vino a buscar; la calculadora pone lo segundo antes que lo primero.
Los colores de la campaña en un teléfono
La ronda de diseño fijó la tipografía y la paleta de la campaña a ancho de iPhone 8: azul marino y cian, la textura topográfica, el sendero punteado, fotografías de la universidad y encabezados de sección cuyas primeras letras llevan un resaltado cian. La página de ayuda financiera pone la calculadora sobre un panel azul marino para que se lea como la única parte funcional de la página.
La construcción
La construí como una aplicación de una sola página en React con enrutamiento del lado del cliente: seis rutas que coinciden con el mapa del sitio, componentes para cada página, los recuadros destacados, la calculadora y el formulario de usuario, puntos de referencia al desplazarse que activan los contadores y las transiciones, y Google Analytics. Cada campo de puntaje de la calculadora ofrece I don't know this, así que un estudiante sin puntajes también recibe una respuesta. El código fuente va del 29 de julio al 12 de agosto de 2019; un Dockerfile con fecha del 6 de agosto copia la construcción sobre la imagen base de nginx de la agencia, como la agencia alojaba todas sus aplicaciones de una sola página.
Las URL personalizadas del plan no están en el código fuente que conservé, y el formulario de solicitud de información que contiene es un formulario del lado del cliente con un registro de muestra. Cómo enviaba al CRM el formulario que salió no está en mis archivos.
Resultados
El sitio salió en 2019 y sigue en línea. El 22 de octubre de 2026, makebigmoves.smcsc.edu servía una construcción en React con el mismo título, los mismos textos y el mismo ID de analítica que el código fuente que conservé, a partir de una construcción más reciente, así que alguien lo ha reconstruido desde entonces. Las capturas del Internet Archive van del 11 de noviembre de 2019 al 23 de diciembre de 2024.
El relato público de MediaCross sobre el proyecto dice que la dirección de marketing de la universidad llamó al viewbook el mejor que había producido la universidad, y le atribuye a la campaña en su conjunto la generación de nuevo ingreso y la matrícula total más grandes de la historia de la universidad, durante la pandemia. La parte del viewbook no se separa de los impresos, el video y la publicidad en esa misma página, y no conservo ninguna exportación de la analítica, así que aquí no se cuentan visitas, solicitudes de información ni cálculos completados.
Si lo hiciera de nuevo
Conservaría la analítica. La calculadora se construyó para medirse, tres pasos con un formulario en medio, y la única cifra que le habría dicho a la universidad lo que compró, cuántos estudiantes llegaron al resultado, nunca salió de la cuenta de la agencia. Una copia de la exportación en la carpeta del proyecto habría hecho de esta página otra muy distinta.