CTRL + Z

Año

2025

Rol

Diseñador UX/UI | Scrum Master (Sprint 3)

Duración

Otoño 2025 | 4 sprints (de 2 semanas de duración cada uno)

Tipo de proyecto

Diseño UX/UI

VISITE EL SITIO WEB

El problema

El departamento de Diseño de Loyola ofrece un plan de estudios sólido que cubre una variedad de temas, como diseño interactivo, gráficos en movimiento y diseño impreso.

Sin embargo, los estudiantes anhelan un fuerte sentido de comunidad, una forma fácil y accesible de enterarse de cualquier evento (Foro, eventos que organiza el College of Music and Media, …), una manera de mostrar fácilmente el trabajo de estudiantes y profesores, y un centro para encontrar oportunidades de pasantías relacionadas con el diseño.

Esto presenta la oportunidad de crear un centro digital para estudiantes de diseño por estudiantes de diseño para fomentar la participación comunitaria, promover próximos eventos y oportunidades de trabajo, y exhibir el trabajo que produce el departamento.

Estudio de Precedentes

Después de una lluvia de ideas para un sitio web dirigido a los estudiantes y profesores de diseño de Loyola, nos quedamos con las características más sólidas que nos gustaría incluir en nuestro sitio web.


A partir de ahí, llevamos a cabo un estudio de precedentes, en el que se pidió a cada miembro del equipo que analizara un sitio web para examinar sus características, estructura de navegación, características clave y distintivas, entre otras cosas.

⬅ Deslice para ver más información ➡

Después del estudio, decidimos incluir las siguientes características principales para nuestro propio sitio web:

1

Exhibir el trabajo de los estudiantes para motivarlos y mejorar el compañerismo entre los estudiantes de diseño

2

Dele a los estudiantes la opción de dejar comentarios, para que puedan brindar a sus compañeros recursos, nuevas ideas, nuevas inspiraciones y cosas nuevas que investigar y explorar

3

Publique actualizaciones relacionadas con el departamento de diseño (eventos, alertas de empleo, trabajo/investigación del cuerpo docente, etc.), para que todos puedan estar al tanto.

4

Incluye encuestas, divertidas y educativas (serif vs. sans serif, ¿dónde te gusta ponerte al día con el trabajo?, …)

Sprint 1

(Makenna)

(Makenna)

El primer sprint se trató de construir una base, desde la identidad de la marca hasta la arquitectura de la información.

El equipo abordó el branding, el levantamiento de información y un prototipo de baja fidelidad todo a la vez, mientras superaba un desafío técnico: crear un formulario de comentarios en vivo en Framer sin soporte nativo de complementos. La solución fue un componente personalizado conectado a través de Google App Script.

⬅ Desplace para ver más información ➡

Desplace hacia los lados para ver más información

Desplace hacia los lados para ver más información

1

Lluvia de ideas de conceptos, creación de paneles de inspiración y del backlog

2

Diseño de marca: logotipo, paleta de colores, tipografía y tono de voz

3

Recopilación de datos: profesores, cursos, pasantías, eventos

4

Arquitectura de información y prototipo de baja fidelidad en Figma

Sprint 2

(Cadence)

El Sprint 2 se centró en la construcción. Las páginas de Quiénes Somos, Prácticas Profesionales, Cuerpo Docente, Calendario y Archivos de Estudiantes comenzaron a tomar forma. Se empezaron a introducir microinteracciones, como animaciones al pasar el cursor y presentaciones de diapositivas.

El equipo también alineó las páginas del Foro de Diseño con los objetivos reales del departamento, volviendo a centrarlas en eventos en lugar de contenido general.

⬅ Desplace para ver más información ➡

⬅ Deslice para ver más información ➡

Desplace hacia los lados para ver más información

1

Se crearon 5 páginas nuevas: Quiénes somos, Pasantías, Docentes, Calendario y Archivos de estudiantes

2

Cohesión visual mejorada en todo el sitio, lo que resulta en una marca más sólida

3

Se introdujeron animaciones al pasar el cursor y componentes de presentación de diapositivas para mejorar la interactividad y el compromiso

4

Se realinearon las páginas del foro y de titulares con los objetivos del departamento, centrándolas más en los eventos.

Sprint 3

(Daniel)

(Daniel)

Este fue mi sprint para liderar. Los usuarios habían pedido más movimiento y dinamismo, por lo que el equipo introdujo animaciones adicionales, efectos flotantes y características interactivas en todo el sitio. Propuse usar el patrón en "Z" como un motivo visual recurrente para unir las páginas y fortalecer la identidad de marca.

Se eliminó el componente de calendario roto y se planificó un enfoque de reemplazo. También se abordaron los enlaces rotos y los problemas de adaptabilidad en preparación para las pruebas de usuarios. Además, se han agregado más páginas

⬅ Desplace para ver más información ➡

Desplace hacia los lados para ver más información

Desplace hacia los lados para ver más información

1

Lideré la planificación del sprint, los Daily Scrums y la retrospectiva como Scrum Master

2

Propuso e introdujo el patrón en "Z" para lograr consistencia visual y una marca más sólida

3

Se introdujeron nuevas animaciones e interacciones de desplazamiento entre las páginas, particularmente en la página de la facultad

4

Se eliminó el componente de calendario que no funcionaba, y se corrigieron los enlaces rotos y los problemas de diseño adaptable

Sprint 4

(Emma)

El sprint final se centró en terminar con fuerza. Una evaluación heurística que realicé identificó fallas de diseño restantes. Se resolvieron las inconsistencias de navegación.

Se finalizaron las páginas de Calendario y Preguntas Frecuentes, y se logró una total adaptabilidad en todos los dispositivos. El equipo también llevó la marca más allá de la pantalla, diseñando calcomanías y botones físicos para promocionar CTRL+Z en el mundo real.

⬅ Desplace hacia los lados para ver más información ➡

1

Evaluación heurística: se identificaron y corrigieron inconsistencias en los botones y problemas de navegación

2

Páginas finalizadas de Calendario, Preguntas Frecuentes y Charlas de Great Ideas

3

Se logró una total adaptabilidad en dispositivos móviles, tabletas y computadoras de escritorio

4

Diseño de mercancía física: stickers y logos de CTRL+Z impresos en 3D

Resultados

En general, CTRL + Z obtuvo una respuesta increíblemente positiva por parte de la comunidad de Diseño en Loyola. Resonó con el público exacto para el que fue diseñado.

Los estudiantes y profesores elogiaban constantemente el concepto alegre e inspirador.

Las microinteracciones, tales como los efectos de desplazamiento y las transiciones, fueron la característica más celebrada.

El equipo se apoyó mutuamente en cada sprint, creando una cultura de responsabilidad mutua.

Reflexión

Aunque este fue un esfuerzo de equipo a lo largo de los cuatro sprints, este proyecto ha dejado un profundo impacto en mí como profesional. Aquí están mis contribuciones individuales que influyeron directamente en el resultado de este sitio web:

Scrum Master | Sprint 3

Dirigí la planificación del sprint, facilité los Daily Scrums y lideré la retrospectiva del Sprint 3, equilibrando la delegación de tareas con mantener el impulso y la moral del equipo en alto a lo largo de una fase técnicamente exigente.

Carrusel de Profesores

Idé e impulsé la función de carrusel en la página de la Facultad, pasando de ser un observador dubitativo a un colaborador activo. Se convirtió en uno de los elementos más elogiados del sitio web terminado.

Patrón en "Z"

Propuse utilizar el patrón en "Z" como un principio de diseño recurrente en todas las páginas, lo que conecta el nombre de la marca con una decisión de diseño estructural y mejora significativamente la cohesión visual en todo el sitio.

Evaluación Heurística

Para asegurar la calidad de la interfaz de usuario, presenté los resultados de mi evaluación heurística el Día 1 del Sprint 4 para señalar pequeñas inconsistencias de diseño en el sitio web antes de la entrega del producto.

Sitio Web Final

Último proyecto

CONTACTO

Stylized blue-toned illustration of a bearded man in profile wearing glasses and a collared shirt.

¡Solo pégame un grito y nos ponemos manos a la obra!

CONTACTO

Stylized blue-toned illustration of a bearded man in profile wearing glasses and a collared shirt.

¡Solo pégame un grito y nos ponemos manos a la obra!

CONTACTO

Stylized blue-toned illustration of a bearded man in profile wearing glasses and a collared shirt.

¡Solo pégame un grito y nos ponemos manos a la obra!

Create a free website with Framer, the website builder loved by startups, designers and agencies.