Works

«Ningún mar calmado hizo experto a un marinero».

En agosto de 2017 iniciábamos a navegar en uno de los proyectos más desafiantes de nuestra bitácora: diseñar y desarrollar el nuevo sitio web de la Universidad de Monterrey (UDEM).

Nos enfrentamos a múltiples retos y objetivos concretos: tener un sitio web útil, eficiente, orientado a la conversión y que estuviera al servicio de quienes buscan a la Universidad de Monterrey para el siguiente paso académico, ya sea desde la óptica de alumnos o como padres de estos.

Aquí te comparto algunos hallazgos de este proyecto lanzado 2 años después de iniciado y que más que un sitio web tradicional, es una plataforma digital personalizada para construir campañas bajo demanda.

Acompáñanos a platicar de User Experience Design (UX), Diseño de Interfaz (UI), diseño y desarrollo de front-end, Administrador de Contenidos (CMS) y más.

Hicimos un análisis previo para poder participar en el pitch del proyecto, con el que descubrimos, a lo largo de los más de 300 templates a diseñar, una gran variedad de desafíos:

• La elección de una nueva versión del administrador de contenidos (Drupal) y la incertidumbre respecto a la estabilización.
• El desarrollo de funcionalidades especiales como: un simulador de colegiatura para los diferentes grados académicos y una alta expectativa al plan de estudios.
• Diferentes equipos de trabajo incluyendo la consultoría de Acquia como acompañamiento en el workflow del proyecto.
• Lanzamientos en paralelo de micrositios como el de CRGS.
• Incorporación de equipo interno de desarrollo.
• Alta expectativa de flexibilidad en la construcción de landing pages y páginas con un diseño personalizado y sin necesidad de un programador para realizarlo.
• Elaboración de un diseño amigable para dispositivos móviles y orientado a la conversión de los prospectos.
• Todo esto con la posibilidad de ser personalizable y multilenguaje.
• Entre muchos otros que fuimos descubriendo en conjunto con la UDEM.

Me gustaría también platicarte un poco sobre cómo se fueron resolviendo cada uno de los desafíos y sobre todo los aprendizajes obtenidos.

Partir el pastel en rebanadas o los Sprints de Agile.

Una estrategia clave para ir resolviendo cada reto fue mantener el foco de atención en el objetivo. Así que, en un proyecto de más de 2 años fue indispensable tener sprints quincenales donde existiera visibilidad de los avances, probar sobre lo construido (ya en el CMS), hacer pruebas de regresión, etc.

Por otra parte identificamos todos los componentes de interfaz (algo parecido a la esencia del Atomic Design) que afectan la experiencia del sitio, estos se priorizaron de tal forma que se iban desarrollando para ir creando las distintas páginas a través de paragraphs de Drupal, estos dan una flexibilidad importante al «administrador» del sitio de diseñar y construir con base a las necesidades del contenido.

Con más de 270 diseños elaborados para el sitio web de la UDEM, podemos decir que ha valido la pena el tiempo, las múltiples conversaciones y las muchas iteraciones realizadas. Cuando pusimos en papel las problemáticas, las ideas y las soluciones en el contexto del uso real que tendrían las audiencias, encontramos la mejor forma para que cada elemento fuera conversado y evaluado.

Por otra parte, incluimos algunas animaciones que ayudan en hacer una experiencia agradable y no intrusiva a las personas que visitan el sitio siendo también uno de los retos importantes al buscar ese sweet spot entre performance/no-intrusive/wowness.

Con una solicitud de incluir un plan de estudios que pudiera guiar al posible alumno a «crear» y elegir sus materias pudimos proponer una interfaz que consideramos la adecuada a dichas necesidades.

Diseñamos elementos arrastrables en la experiencia desktop que nos ayudaron a agregar ese ingrediente «playful» que acompaña al estudiante a jugar con las materias y ayuda a abrir la conversación con otra quien finalmente lo guiará a crear un plan personalizado cada semestre durante su paso por la universidad.

En este aprendizaje en particular, reconozco, tuvimos varios fails. Tomando de referencia experiencias pasadas donde es casi nula la diferencia entre lo que proponemos en diseño y lo que se logra programar en los administradores de contenido que conocemos a profundidad como WordPress u otros, no previmos que en Drupal es diferente y bueno, tuvimos que aprenderlo a prueba y error.

Finalmente, gracias a colaborar muy de cerca con la UDEM, logramos avanzar al mantener la metodología de mostrar primero los diseños e ir aprendiendo juntos qué elementos pudieran no ser tal cuál lo que se muestra al implementarlos; creo que los resultados fueron bastantes buenos siendo el mínimo de componentes los que no se lograron variar de acuerdo al diseño elaborado gracias al Team de Diseño de Front End que logró entender a detalle y darle una «vuelta» al código arrojado por el CMS y adecuarlo a tener la experiencia diseñada.

Personalmente este proyecto me ha dejado muchos aprendizajes y reflexiones y uno de los mayores es la importancia de enfocarnos en nuestras fortalezas, sobre lo que conocemos, sobre lo que sí sabemos hacer y potencializarlo, no necesariamente en las debilidades (propias y del equipo), ni en lo que desconoces o en las dudas del camino, y no es un optimismo barato si no es maximizar a través de un enfoque real, en lo inmediato de las decisiones, una cosa a la vez, tragarse los sapos necesarios (Eat That Frog!), tomar al toro por los cuernos dijeran por ahí y llevar al proyecto a donde se necesite llevar.

En donde esté tu enfoque estará tu energía, tu tiempo y de alguna forma delimitará tus acciones y actitud. He descubierto que cada quien es responsable de las historias que cuenta día a día, la narrativa que borda su vida y por consecuencia las decisiones que toma diariamente, considero que es una cuestión muy importante para el liderazgo de proyectos y el éxito de la administración de un equipo de trabajo.

No podemos como equipo hablar de los resultados e incremento en métricas de éxito al ser un proyecto recién salido del horno Acquiaciano.

Pero creemos que el producto habla por sí mismo y que hemos logrado en conjunto diseñar un producto digno de comparar no solo en el ámbito de las instituciones educativas nacionales sino en otros géneros respecto a una plataforma digital sólida y sobre todo que ayuda a las personas a obtener la información que están buscando.

Agradecemos a la UDEM por la confianza durante todo este proceso siendo ya nuestro aliado durante más de 4 años en el camino de diseñar productos digitales.

Por Davo
Líder del proyecto. Cofundador Nett.

Duración del proyecto: + 2 años
Wireframes: +40
Diseños: +270
Componentes: +80
Plataforma: Drupal +8

Nett:

• Líder de proyecto
• Project Manager
• 3 Drupal Developers
• 3 Front End Designers
• 2 UX/UI Designers

UDEM:

• Líder de proyecto
• Project manager
• Especialista técnico
• Gerente de aplicaciones
• Editores de contenido

Acquia:

• Technical Account Manager
• Regional Manager, Latin America
• Sr. Consultants
• Senior Customer Onboarding Manager (COM), Acquia Ready
• Sr. Technical Consultant, Professional Services

• Sitio web principal: http://www.udem.edu.mx
  
  Simulador de costos:
• https://udem.edu.mx/es/admisiones-y-becas/simulador-colegiatura-profesional
• https://udem.edu.mx/es/admisiones-y-becas/simulador-colegiatura-posgrado
• https://udem.edu.mx/es/admisiones-y-becas/simulador-colegiatura-preparatoria
  
  Simulador de plan de estudios:
• https://udem.edu.mx/es/derecho-y-ciencias-sociales/programas/licenciado-en-derecho-y-funcion-publica/plan-de-estudios
  
  Centro Roberto Garza Sada de Arte, Arquitectura y Diseño:
• https://crgs.udem.edu.mx/
  
  Prepa UDEM:
• https://prepa.udem.edu.mx/
  
  Educación Continua:
• https://udem.edu.mx/es/educacion-continua
  
  Donativos:
• https://udem.edu.mx/es/donativos

• General: https://invis.io/F5MYI4QHMUX
• Sección Conoce: https://invis.io/XQNQL6GAPKJ
• Sección Estudia: https://invis.io/ABNDETE29U4
• Sección Vive: https://invis.io/HBNJPZ9G2CW
• Sección Admisiones y becas: https://invis.io/A8NT7R9RJQY
• Sección Comunidad: https://invis.io/36NOUBBBRKA
• ExaUDEM: https://invis.io/3UNFBGNRE8P
• Ciencias de la Salud: https://invis.io/DYMWB5AGTMZ
• Derecho y Ciencias Sociales: https://invis.io/4TNBT3S8GSZ
• Educación y Humanidades: https://invis.io/3CNBT42D8RS
• Ingeniería y Tecnologías: https://invis.io/QTNBT4BMNZR
• Negocios: https://invis.io/EQNBT3D6G27
• Simulador de Plan de estudios: https://invis.io/6KQ9ZTUD2NE
• Simulador de Colegiaturas: https://invis.io/NGNBT4WY9EH
• Prepa UDEM: https://invis.io/DRMUFZK4JYG