CASE STUDY 04 — EDUCATION · UNMSM · 2023CASO DE ESTUDIO 04 — EDUCACIÓN · UNMSM · 2023
San Marcos
Matemáticas
Complete redesign of UNMSM's Mathematics Faculty website — transforming a single-page static landing into a multi-screen site useful for students and faculty.Rediseño completo del sitio web de la Facultad de Matemáticas de la UNMSM — transformando una landing estática de una sola página en un sitio multi-pantalla útil para alumnos y docentes.
EducationEducación Web RedesignRediseño Web UX Research Info. ArchitectureArq. de Información
THE PROBLEMEL PROBLEMA
KEY INSIGHTHALLAZGO PRINCIPAL
UNMSM's Mathematics Faculty had a single static screen. Students looked for their curriculum, faculty announcements and teacher contacts in WhatsApp groups — because the website simply didn't have it.La Facultad de Matemáticas de la UNMSM tenía una sola pantalla estática. Los alumnos buscaban su malla curricular, los anuncios de la facultad y el contacto de profesores en grupos de WhatsApp — porque la web simplemente no lo tenía.
BEFOREANTES
Single static screenUna sola pantalla estática
No online curriculumSin malla curricular online
No announcement boardSin tablón de anuncios
No contact informationSin información de contacto
No navigationNavegación inexistente
Students use WhatsApp to find informationAlumnos usan WhatsApp para informarse
→
AFTERDESPUÉS
🎓 UNMSM Mathematics — Full Website🎓 UNMSM Matemáticas — Sitio completo
CurriculumMalla curricular
AnnouncementsAnuncios
ContactContacto
Clear navigationNavegación clara
Info by semesterInfo. por semestre
Accessible & usefulAccesible y útil
Students find everything on the websiteAlumnos encuentran todo en la web
WHO I DESIGNED FORA QUIÉNES DISEÑÉ
STUDENTSALUMNOS
Mathematics StudentsEstudiantes de Matemáticas
Curriculum by semesterMalla curricular por semestre
Announcements and communicationsAnuncios y comunicados
Contact with the facultyContacto con la facultad
Info about courses and schedulesInfo. sobre cursos y horarios
FACULTYDOCENTES
Faculty ProfessorsProfesores de la Facultad
Publish official announcementsPublicar anuncios oficiales
Information visibilityVisibilidad de información
Curricular referenceReferencia curricular
NEW STUDENTSINGRESANTES
Prospective studentsFuturos estudiantes
Information about the programInformación de la carrera
Study plan structureEstructura del plan de estudios
How to contact the facultyCómo contactar a la facultad
PROCESSPROCESO
01
Benchmarking — Academic referencesBenchmarking — Referentes académicos
Analyzed sites from other Peruvian and international faculties and universities to identify what information they prioritize, how they structure the curriculum, and what navigation patterns work for the university academic context.Analicé sitios de otras facultades y universidades peruanas e internacionales para identificar qué información priorizan, cómo estructuran la malla curricular y qué patrones de navegación funcionan para el contexto académico universitario.
02
Surveys — Students and facultyEncuestas — Alumnos y profesores
Ran surveys with active students and faculty. The key finding: almost everyone accessed academic information through WhatsApp groups because the website didn't have it. This validated the redesign direction: prioritize real utility over aesthetics.Apliqué encuestas a estudiantes activos y docentes de la facultad. El hallazgo clave: casi todos accedían a información académica por grupos de WhatsApp porque la web no la tenía. Eso validó la dirección del rediseño: priorizar utilidad real sobre estética.
03
Information Architecture & UI KitArquitectura de Información & UI Kit
Defined the multi-screen site structure: home, curriculum (navigable by semester), announcement board and contact. Built a UI kit with the necessary components — typography, adapted institutional colors and grid system — before designing the final screens.Definí la estructura del sitio multi-pantalla: inicio, malla curricular (navegable por semestre), tablón de anuncios y contacto. Construí un UI kit con los componentes necesarios — tipografía, colores institucionales adaptados y sistema de grilla — antes de diseñar las pantallas finales.
04
Final screens & delivery to the facultyPantallas finales & entrega a la facultad
Designed all screens in high fidelity in Figma — including the interactive curriculum by semester, the announcement board and the contact page. The final screens were delivered directly to UNMSM's Mathematics Faculty.Diseñé todas las pantallas en alta fidelidad en Figma — incluyendo la malla curricular interactiva por semestre, el tablón de anuncios y la página de contacto. Las pantallas finales fueron entregadas directamente a la Facultad de Matemáticas de la UNMSM.
DELIVERABLESENTREGABLES
BenchmarkingBenchmarking
Information ArchitectureArquitectura de Información
Institutional UI KitUI Kit institucional
Curriculum by semesterMalla curricular por semestre
Announcement boardTablón de anuncios
Contact screenPantalla de contacto
RESULTSRESULTADOS
Delivered
to UNMSMEntregado
a UNMSM
to UNMSMEntregado
a UNMSM
REAL IMPACTIMPACTO REAL
The final screens were delivered directly to the Mathematics Faculty of Universidad Nacional Mayor de San Marcos.Las pantallas finales fueron entregadas directamente a la Facultad de Matemáticas de la Universidad Nacional Mayor de San Marcos.
1 → 4+
SCREENSPANTALLAS
From a static landing to a site with home, curriculum, announcements and contact — real navigation.De una landing estática a un sitio con inicio, malla curricular, anuncios y contacto — navegación real.
Online
curriculumMalla
online
curriculumMalla
online
CURRICULAR ACCESSACCESO CURRICULAR
Students can review the curriculum by semester directly on the website — no longer depending on WhatsApp groups.Alumnos pueden revisar la malla por semestre directamente en la web — sin depender de grupos de WhatsApp.
WHAT I LEARNEDLO QUE APRENDÍ
Public institutions have users with urgent basic needsLas instituciones públicas tienen usuarios con necesidades básicas urgentes
It wasn't about micro-animations or advanced aesthetics — students needed their curriculum on the website. Sometimes the best design is the one that solves the most basic need reliably and clearly.No se trataba de microanimaciones ni estética avanzada — los alumnos necesitaban su malla curricular en la web. A veces el mejor diseño es el que resuelve lo más básico de forma confiable y clara.
Information architecture is the first designLa arquitectura de información es el primer diseño
Before opening Figma, I needed to know what pages would exist and how they'd connect. The most costly mistake in institutional projects is designing screens before having the structure clear — good IA makes the UI obvious.Antes de abrir Figma, tenía que saber qué páginas existirían y cómo se conectarían. El error más costoso en proyectos institucionales es diseñar pantallas antes de tener clara la estructura — el IA bien hecha hace que el UI sea obvio.
Surveys reveal workarounds the institution doesn't know aboutLas encuestas revelan workarounds que la institución desconoce
The faculty didn't know that its students were organizing WhatsApp groups to share information that should be on the website. That workaround was the most powerful proof of the problem — and the strongest argument to justify the redesign.La facultad no sabía que sus alumnos se organizaban en grupos de WhatsApp para compartir información que debería estar en la web. Ese workaround fue la prueba más poderosa del problema — y el argumento más sólido para justificar el rediseño.
Delivering to a real client changes the work's perspectiveEntregar a un cliente real cambia la perspectiva del trabajo
Knowing that the screens would be delivered to UNMSM raised the standard of every decision. It wasn't an academic exercise — it was something real people would use. I learned to design with that responsibility from the first stroke.Saber que las pantallas serían entregadas a la UNMSM elevó el estándar de cada decisión. No era un ejercicio académico — era algo que personas reales usarían. Aprendí a diseñar con esa responsabilidad desde el primer trazo.