Case Study

Universidad Camilo José Cela

2019 | Rol: UX/UI Design

¿Quieres saber como estamos implementando el rediseño y el sistema de diseño de la universidad Camilo José Cela?
Sigue leyendo para saber como fué el proceso.

Contexto

La imagen de marca de la Universidad Camilo José Cela ha sufrido importantes cambios a lo largo del tiempo, cambiando la consistencia de marca con cada Brandbook (cambios en colores primarios y tipografías, logos no evolutivos, etc.). Necesitamos una imagen de marca adaptada a digital pero que conviva en el corto medio plazo con la marca actual, ya que debido a una decisión interna habrá un período de adaptación de la nueva y vieja estética. La nueva marca debe de ser adaptable a todos los diseños tanto digitales como impresos (web comercial, newsletter, landings de conversión, apps, etc. )

Reto

Desde el dpto. de Marketing se inició el proceso de adecuación digital de la marca basado en su Brandbook. Necesitamos diseñar desde un punto de vista sistémico, para unificar toda la marca a nivel digital, cosa que no pasaba. Uno de los dos grandes errores que se solía cometer a la hora de rediseñar una nueva entidad, es aislarla como un ente que solamente va a convivir por sí mismo o implementar la imagen en procesos estáticos e inalterables evitando la iteración de la marca. En el caso de la universidad, además se notaba que la marca había evolucionado de forma dispersa, con aplicaciones dispares según el servicio y departamento que se encargara del producto o servicio. Había a su vez, una desconexión entre el diseño digital y analógico.

Problema

Los problemas que nos encontramos fueron los siguientes:

Convivencia temporal de dos estilos

Se decidió de manera corporativa que el rediseño tendría que ser por etapas, es decir, primero la home, luego la página de producto, luego el header, etc. En el corto plazo iban a convivir el antiguo y el nuevo estilo de la web en producción. Para cumplir plazos de entregas internos que escapaban a nuestro control. No es la solución más óptima en el corto-medio plazo si quieres mantener la consistencia en el diseño.

Gap Diseño/Desarrollo

Nos encontramos en un contexto donde el dpto. de diseño no estaba conectado físicamente con desarrollo, ya que no tenemos equipo front-Eni in House. Para más inri, había otro departamento de un proveedor externo que hacía de intermediario, siendo cuello de botella entre los dos equipos encargados. Teníamos que buscar formas de comunicación para empatizar con el equipo contrario.

Un CRM obsoleto del que diseño es dependiente

El CRM actual de la web tiene una arquitectura y desarrollo obsoletos para los estándares actuales. Las tripas de la web necesitaban cambiarse, pero debido al scheduling interno, al departamento se le comunicó que tendrían que implementar el nuevo lenguaje visual antes de proceder a la estructuración del CRM y cambio del antiguo dedicado al nuevo (Salesforce).
Hay campos de formulario que simplemente no tenían sentido, pero que eran imprescindibles para el CRM. Un ejemplo de esto sería:

En este ejemplo, el formulario estaba desplegado en la página de producto. A parte de colores con un contrast ratio que no es el adecuado, veo tres errores principales dependientes del CRM y que afectan a UX:

  • Botón del CTA en estado ghost hasta que no se active checklist de política de privacidad. Hemos comprobado que muchas veces, al no haber un CTA claro que no se puede activar, ni ningún alert o notification que guíe al usuario, aumenta el abandono del mismo. En muchos casos el usuario no reconoce ni que es un formulario.
  • Demuestra que no eres un robot fuera del contexto de seguridad.
  • ¿Es necesario elegir el año académico? Hemos detectado que los usuarios principales quieren pedir información para el año en curso, ya que son alumnos que acaban de terminar sus estudios de bachillerato, especialmente en campaña. Después de rellenar ese formulario, una responsable de admisiones se pone en contacto con el potencial cliente, por ello…¿para que pedir que sea necesario indicar en un desplegable el año académico? Simplemente porque es una condición sine qua non para que el CRM funcione.

Objetivos

  • Crear un sistema con un lenguaje único.
  • Este sistema tiene que estar adaptado a las necesidades de cada departamento y gestión con baja cualificación técnica en desarrollo y diseño.
  • Diferenciación y consistencia
  • Aumentar conversión
  • Reducir cuellos de botella

Crear un sistema con un lenguaje único

La imagen de marca de la Universidad Camilo José Cela ha sufrido importantes cambios a lo largo del tiempo, cambiando la consistencia de marca con cada Brandbook (cambios en colores primarios y tipografías, logos no evolutivos, etc.). Necesitamos una imagen de marca adaptada a digital pero que conviva en el corto medio plazo con la marca actual, ya que debido a una decisión interna habrá un período de adaptación de la nueva y vieja estética. La nueva marca debe de ser adaptable a todos los diseños tanto digitales como impresos (web comercial, newsletter, landings de conversión, apps, etc. )

Diferenciación y consistencia

La diversidad de competencia hace que el mensaje y diseño de nuestra marca se parezca a otros, evitando esa diferenciación que tenía la universidad en origen. Buscamos un lenguage moderno e identificativo, que se aleje de las convencionalidades en las que recae la competencia, sin parecernos a ninguno, buscando nuestra esencia.

Destaquemos nuestros valores

Los valores que reflejan la universidad y el rector no se veían reflejados en el diseño. Mirarnos a nosotros mismos y saber cuáles son nuestros puntos fuertes, para hacer de ello una bandera. Somos una Universidad con tres claros valores: Interdisciplinariedad, Innovación e Internacionalidad.. Para saber más sobre este punto, visita: https://www.ucjc.edu/universidad/.

Aumentar conversión

Queremos diseñar un lenguaje que se adapte a productos digitales orientados a conversión.

Reducir cuellos de botella

Aumentar la productividad interdepartamental entre todos los involucrados en el producto para dimensionar en qué fases tenemos que poner el foco y así poder optimizar tiempos de entrega entre los diferentes departamentos.

Rol

Estuve a cargo de todo el proceso y faseado de diseño, desde la conceptualización, wireframing, prototipado y diseño final. Como no disponíamos de equipo de desarrollo interno, facilitaba el hand-off a los desarrolladores vía Zeplin y recibía feedback del equipo de Marketing, tanto de interacción como de prioridades en el contenido vía Invision. Participé en las decisiones estratégicas como parte del equipo que afectaban a usabilidad y diseño.)

Herramientas

  • ✐ Papel y lápiz, post-it > Ideas, palabras, wireframes de baja fidelidad.
  • 💠 Overflow > Creación de flujo de pantallas interno.
  • 💠 Asana > Faseado y Journey del proyecto, Scope, comunicaciones técnicas.
  • 💠 Basecamp > Comunicación con agencia, Project Management
  • 💎 Sketch > Wireframes de alta fidelidad y mockups
  • 🧬️InVision > Interacciones, feedback de equipo, Benchmarking
  • 🖥 Visual Code > Desarrollo.
  • 💾 Trunk > Control de versiones diseño
  • 🤖 Bitbucket > Control de versiones desarrollo
  • 📂 Zeplin > Entrega a desarrollo (Hand-off)
  • 📝 Paper > Documentación (que pasará a Confluence)
  • 📕 Excel Online > QA con desarrollo
  • 📲 Hotjar y Analytics > Feedback de usuarios

Proceso

El proyecto comenzó con la evangelización desde ambos lados de los dos perfiles involucrados. Mi puesto justo estaba de puente entre los dos, con énfasis en el diseño y el hand-off de desarrollo.
Por un lado, era necesario evangelizar a la agencia con los valores y el discurso de la universidad. Por el otro, la agencia pudo transmitir desde una posición destacada como se elaboran los productos digitales hoy en día.

A nivel interno, propusimos un faseado en escalabilidad del proyecto. Empezaremos detectando qué páginas necesitan estar actualizadas y tienen más presencia e interacción por parte de los usuarios, para desarrollar un MVP funcional del proyecto e ir avanzando progresivamente hasta que el otro equipo encargado del CRM tenga optimizado el back del que dependemos.

Propuesta de escalabilidad del proyecto basado en Design Thinking pero adaptado a las necesidades de la universidad:

Plan de acción

El plan de acción de rebranding, nos llevó a sistemizar el UI KIT tanto a nivel de diseño como contenido. Creando componentes basados en Wordpress que estén estandarizados a nivel de diseño CSS pero que sean funcionales en modificación de imágenes y texto. Por tema logístico no pudimos crear un sistema de diseño, pero llegamos a una solución híbrida, es decir, bloques de componentes reutilizables adaptados tanto para el BackOffice y FrontOffice de Wordpress que se pueden situar en cualquier sección y disposición de la web.

Benchmark

El primer paso en nuestro plan de acción fue entender el contexto y competidores del mercado. Realizamos un Benchmarking rápido con las principales empresas de la competencia para dimensionar junto con nuestros datos first and third party el estado actual.

Workflow

Establecimos con nuestros partners la forma de comunicación. Debido a la logística, los cuatro departamentos involucrados no estábamos en el mismo espacio físico, ni siquiera en la misma ciudad. Decidimos utilizar Asana para las comunicaciones técnicas y tener los diferentes scopes fijados pero para el día a día nos resultaba más operativo Basecamp.

En cuanto empezamos con los flujos de interacción, nos dimos cuenta que el actual Menú con un único primer nivel no tenía sentido. Necesitábamos poder realizar un desplegable dimensionado para ubicar la cantidad ingente de páginas indexadas pero descontextualizadas o que ni siquiera aparecían en los árboles de contenido. La arquitectura de la información y la labor de jerarquización e indexación da para un artículo independiente.

Wireframes

SCSS

Ante la diversidad de estilos que ha tenido el Wordpress de la universidad a lo largo del tiempo, procedimos a la integración SCSS de todos los estilos, aprovechando la unificación de componentes.

Interacción

Hemos buscado las microinteracciones en los enlaces para fomentar la navegación y conexión. Dejamos elementos del diseño antiguo como el background-cover de video en la home, pero personalizando con una cookie, para mostrar siempre un video diferente cada vez que entres.

Hemos centrado la atención en los claims de campaña junto con accesos directos a los estudios para mejorar la conversión. Hemos incluido enlaces con microinteracciones y botones en CTAs en grado de importancia

Producción

Creando el UI Kit de la UCJC

Al ser un proyecto tan componentizado y que dependía tanto de módulos reutilizable, nuestra primera tarea fue hacer el UI KIT basándonos en Atomic Design.

El UI Kit también reflejaba los estados y microinteracciones de cada componente por separado:

Componentes modulares Back/Front Office reutilizables

Una vez hecho los “neutrones” pasamos a diseñar los módulos reutilizables, fácilmente modificables en BackOffice. Estos componentes se centraban en CTAs y tenían una orientación marcadamente comercial, destacando claims de campaña.

Un ejemplo del funcionamiento de los componentes (HTMLBlock)

Los componentes tenía que ser fácilmente reutilizables en diferentes apartados de la web, sin destacar demasiado para no dar la sensación al usuario que estaba en la misma página. Pero por otro optimizaban la realización y unificación del contenido.

FrontOffice

La parte que el usuario ve. En este ejemplo, se trataba del módulo “Descubre el Grado”, que aparece en todas las páginas del grado. Consta de un video (enlazado de YouTube por gestión de espacio en el servidor y para aumentar las visitas en RRSS), una frase de un estudiante actual y un pie de video. El módulo se ve diferente en cada estudio pero la estructura se mantiene.

BackOffice

En el BackOffice de Wordpress (sólo accesible para los trabajadores de la UCJC), se puede configurar todos los apartados de este módulo (titular, orden, id de youtube, claim, etc).

Iterar, iterar e iterar

Estamos bastante contentos del rediseño digital de la universidad, no obstante sabemos que esto sólo es el principio. Los siguientes pasos serían crear un sistema de diseño para unificar los diferentes lenguajes de la marca de la UCJC.

Resultados

¿Te gusta lo que ves?

Puedes escribirme y contactarme para colaboraciones en felipe.sotoca@gmail.com

Contactar

Otros Case Studies

screenshot

Lexorbe Abogados

Ver Case Study

screenshot

Alembiq App

Ver Case Study

©2020 - Felipe Sotoca - Happy to work together