COLEGIO PIO XII
CAMPESTRE COTA

UI, UX, BRANDING AND WEB DESIGN CONSULTANCY

1. PROJECT OVERVIEW

Project challenges:

This private school has a logo and they have decorated their facilities based on it. However, they do not have a clear branding design and they want a website that reflects their identity.

Scope of the project:

Academic Coordinator and Communications department

Time:

Half time job from October until December 2019.

Problem statement:

Some families that are interested in this school do not find information easily on their current website. Besides, the contact information is confusing and hard to find.

Approach:

The school wants to replace their website for one that provides relevant information about the services they offer. They also want to use it as a landing page for their digital marketing campaigns during the admissions period.


2.DESIGN METHODOLOGY

We use the design sprint methodology.

sprint

3. UX RESEARCH

UNDERSTAND

COMPETITOR ANALYSIS


Image: Comparison of 5 competitor private schools.

I make a competitor analysis comparing five private schools. They are mostly schools that reach a high socioeconomic level.

These are the key outcomes:

Most of them have a clear visual identity.

Each school highlights what makes them different, their pedagogical approach, and the certifications they have.

Each school highlights what makes them different, their pedagogical approach and the certifications they have.

They all have videos showing their facilities.


USERS

The target users of the school are families living in the west or northwest of Bogotá. They are usually families of athletes that are referred from the sports schools.

After running a workshop with 4 stakeholders, I create two personas:

Señor usuario
Juan Gonzalez

Juan is 38 years old. He lives in a neighborhood in western Bogotá with his wife and 12-year-old son David. Juan practices sports sinhis childhood. He plays soccer on Sundays with his friends and has taught David his love for sports.

The school David attends assigns homework every day and does not give him permission to go to championships in other cities. Juan is looking for a school where his son can get a good education and still play soccer.

Señora usuaria
Elena Parra

Elena is an architect and lives with her son Emilio, 5 years old, in Villa del Prado, north of Bogotá. Elena knows that for young students it is possible to get university scholarships as athletes.

She has always played sports and wants Emilio to play sports and have a bilingual education so he has better opportunities in the future. From now on she is looking for a school.


VISUAL RESEARCH

Seven stakeholders gather keywords that describe the school.

These are some key visual elements I recognize when visiting their facilities:

1

Yellow color: found on chairs, courts, murals, mascot.

2

Diagonal lines and stars found on the uniforms and the school logo.

3

College Typography Seen on murals and uniforms.

Moodboard Pio XII

PROTOTYPE

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

Brand logo

Guía de estilo tipografía

Typography

Guía de estilo textos

Texts

Guía de estilo colores

Colors

Guía de estilo botones

Buttons

Guía de estilo formas

Shapes


WIREFRAME

Herramienta: WIREFRAME

Wireframe Pio XII

Image: Website wireframe organized by sections. Desktop and mobiles.

After having a card sorting workshop with five stakeholders, I organized the information in different sections.


PROTOTIPO

Herramienta: PROTOTIPO ALTA FIDELIDAD

Prototipo alta fidelidad

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

High fidelity prototype.


USABILITY TESTS:

I make a prototype to run the usability tests for three users.

They are given two task: Contact the school for more informationa, and recognize the added value or the school. The three of them succeded.


OLD DESIGN VS. NEW DESIGN

With the new design, users are able to find what they are looking for.

The previous website had some UX and UI issues:

Low-quality pictures: It is important to consider the original size of the picture so it does not look low-quality when it is shown bigger than it is.

Information that is not relevant for the user.

Missing CTA and contact buttons:

Diseño antes y después

Image: Old design (left) vs. New design (right)


IMPROVED CONTACT AND CTA

In the previous version, there were only two ways of contact: a form that was not working and a phone that was in the footer of the website.

By placing visible contact information and calls to action, people interested in the admissions process were able to contact the institution. Effective campaigns made the school get 20% more requests for information and visits.

1

Buttons to communicate directly from the cell phone: On the fixed header the user can select to either call directly or send a message via WhatsApp.

2

Social network: Facebook.

3

CTA: Buttons to request more information via a form.

Información Pio XII

IMPROVED SCHOOL INFORMATION

Families that are interested in receiving information about the school, look for the information on the website.

By making a Why Choose Us section, the added value of the school is shown, and the visitors of the website quickly understand what the institution's education method is.

1

Images and relevant information: Relevant information such as certification logos are shown.

2

Text:The text that accompanies the image is explanatory and clear.

3

Modal: When clicking on an image, a modal appears with a carousel that allows the user to get more information.

Información Pio XII
Imagen mailing

Image: Mailing campaign


4. WHAT I LEARNED FROM THIS PROJECT

I especially enjoyed the workshops with the stakeholders because they were able to recognize the visual elements of their school as an important part of their visual communication.