COLEGIO PIO XII
CAMPESTRE COTA

CONSULTORÍA UI, UX, DISEÑO DIGITAL & WEB

1. GENERALIDADES DEL PROYECTO

Retos del proyecto:

La institución educativa tiene un logo y con base en este han decorado sus instalaciones, pero no tienen un branding claro y quieren un sitio web que refleje su identidad. Se debe hacer una landing muy distintiva para procesos de admisión.

Equipo de:

Coordinadora académica y comunicadora socia

Tiempo:

Trabajo medio tiempo desde octubre hasta diciembre de 2019

Problema:

En el Colegio Pio XII tienen un sitio web que no tiene buena usabilidad ni arquitectura de información. Las familias interesadas en el colegio, no encuentran información fácilmente en el sitio web y tienen problemas al ponerse en contacto con el el colegio.

Enfoque:

El colegio quiere reemplazar el sitio web por una landing page clara para ofrecer información relevante fácil de navegar hacer y además hacer campañas en la época de admisiones.


2. METODOLOGÍA

Usamos la metodología de Design thinking

sprint

3. INVESTIGACIÓN UX

EMPATIZAR

INVESTIGACIÓN DE USUARIO

Herramienta: BENCHMARKING


Imagen: Comparación de 5 colegios tomados como referencia de la competencia.

Se analizan colegios bilingües campestres que son competencia directa de Colegio Pio XII. Estos son en su mayoría colegios para un nivel socio económico alto.

Se reconocen las debilidades y fortalezas de la competencia y se encuentra lo siguiente de los colegios analizados:

Al ser colegios bilingües, algunos colegios invierten en sitios web y redes sociales con una identidad visual clara.

La información que muestran es muy actualizada, aunque no siempre está organizada de forma clara.

Todos tienen videos mostrando sus instalaciones

Cada colegio resalta lo que los hace diferentes, su enfoque pedagógico y a su vez muestran las certificaciones que tienen.


USUARIO OBJETIVO

Los usuarios objetivo del Colegio son familias que viven en el occidente o noroccidente de Bogotá. Por lo general son familias de deportistas que llegan al colegio referidos desde las escuelas de deporte.

Con la información obtenida, se piensa en una forma de organizar la información para los usuarios.

Herramienta: Arquetipo - Persona

Herramienta: ARQUETIPO - PERSONA

Señor usuario
Juan Gonzalez

Juan tiene 38 años. Vive en un barrio del occidente de Bogotá con su esposa y su hijo David, de 12 años. Desde pequeño Juan es deportista. Juega fútbol los domingos con sus amigos y ha enseñado a David su amor por el deporte.

El colegio en el que está David deja tareas a diario y no le da permisos para viajar cuando tiene campeonatos en otras ciudades. Juan busca un colegio en el que su hijo pueda tener una buena educación y seguir practicando fútbol.

Señora usuaria
Elena Parra

Elena es arquitecta y vive con su hijo Emilio, de 5 años en Villa del Prado, al norte de Bogotá. Elena sabe que para los jóvenes es posible acceder a becas universitarias como deportistas.

Ella siempre ha hecho deporte y quiere que Emilio practique deporte y que tenga una educación bilingüe para que tenga mejores oportunidades en el futuro. Desde ahora está buscando un colegio.


INVESTIGACIÓN VISUAL

Herramienta: MOODBOARD

Siete stakeholders recopilan las palabras clave que definen al colegio.

Al hacer una búsqueda visual en las instalaciones, se reconocen elementos visuales clave que pueden ser parte del sitio web:

1

Color amarillo: presente en las sillas, canchas, murales, mascota

2

Diagonales y estrellas presentes en el uniforme y en el logo

3

Tipografía College Presente en murales y en algunos uniformes

Moodboard Pio XII

DEFINIR

ARQUITECTURA Y DISEÑO DE INFORMACIÓN

Con las herramientas anteriores, se reunen conclusiones que son relevantes para el diseño y arquitectura de información. Estas son:

El diseño debe reflejar el carácter internacional y dinámico de la institución

Deben darse diferentes opciones para que el usuario contacte la institución. deben ser claros los CTA

Instalaciones campestres

Imágenes de estudiantes que han hecho intercambios en otros países

Énfasis en currículo internacional que puede ser seguido online

Logos de las certificaciones internacionales y de convenios para estudio en el exterior


PROTOTIPAR

STYLE GUIDE - UI

With the above tools I gather relevant conclusions in order to design the User interface and information architecture:

Guía de estilo logo

Logo

Guía de estilo tipografía

Tipografía

Guía de estilo textos

Textos

Guía de estilo colores

Colores

Guía de estilo botones

Botones

Guía de estilo formas

Formas

WIREFRAME

Herramienta: WIREFRAME

Wireframe Pio XII

Imagen: Wireframe del sitio web organizada por secciones. Pantallas grandes y móviles.

Se estructura la información del sitio web en diferentes secciones.


PROTOTIPO

Herramienta: PROTOTIPO ALTA FIDELIDAD

Prototipo alta fidelidad

Imagen: Prototipo de alta fidelidad con los detalles de las decisiones de diseño.

Prototipo de alta fidelidad con los elementos visuales y UI


PRUEBAS DE USABILIDAD:

Hice un prototipo para hacer prueba de usabilidad con tres usuarios.

Les asigné dos tareas: Contactar la escuela para recibir más información, y reconocer el valor agregado de la propuesta de educación en el colegio. Los tres usuarios pudieron hacerlo sin problema.


DISEÑO ANTERIRO VS. DISEÑO NUEVO

Con el nuevo diseño, los usuarios pueden encontrar lo que estaban buscando.

El sitio web anterior tenía algunos inconvenientes de UI - UX:

Imágenes de baja calidad: Es muy importante considerar el tamaño de las imágenes para poder hacer el diseño. De esta manera las fotos no se ven de baja calidad cuando se muestran en un tamaño mayor.

Había información que no era relevante para el usuario..

No habían diferentes opciones de contacto y CTA.

Diseño antes y después

Imagen: Diseño anterior (izq.) vs. Diseño nuevo (der.)


3. CARACTERÍSTICAS DEL DISEÑO Y USO

MEJORA DE INFORMACIÓN DE CONTACTO Y CTA

Antes habían sólo dos formas de contacto: un formulario que no estaba funcionando y un teléfono que estaba en el footer del sitio web.

Al ubicar información de contacto visible y llamados a la acción, personas interesadas en el proceso de admisión pudieron comunicarse con la institución. Se pudieron hacer campañas efectivas y alimentar la base de datos.

1

Botones para comunicarse desde celular: Para hacer una llamada o desde Whatsapp en header fijo.

2

Botón redes sociales: Facebook.

3

Llamado a la acción CTA: Botón para llenar formulario.

Información Pio XII

MEJORA DE INFORMACIÓN DEL COLEGIO

Las familias interesadas en recibir información acerca del Colegio debían navegar el sitio web buscando información de admisiones.

Al hacer una sección Por qué escogernos, se muestra el valor agregado del colegio, los visitantes del sitio web entienden rápidamente cuál es la propuesta de la institución.

1

Imágenes e información relevante: Se muestra la información relevante como los logos de las certificaciones.

2

Texto: El texto que acompaña la imagen es explicativo y claro.

3

Modal: Al hacer click aparece un modal con un carruseñ que permite ampliar la información.

Información Pio XII
Imagen mailing

Imagen: Campaña de mailing


4. LO QUE APRENDÍ CON ESTE PROYECTO

Con este proyecto disfruté mucho los workshops con los stakeholders porque pudieron reconocer en el diseño, los elementos visuales en su escuela. De esta forma, pudieron mostrar de forma efectiva su mensaje y hacer mercadeo digital más efectivo.