Está en la página 1de 56

Entrega final - Matías Papalini

Diseñando una nueva


experiencia educativa
post-pandemia
Link a prototipo
funcional
Diseñando una nueva experiencia educativa post-pandemia __________________

En el prototipo se puede navegar


desde el inicio, realizar el
onboarding, subir un trabajo práctico
accediendo a una materia y utilizar la
barra de búsqueda para encontrar un
apunte.

Haz click en la imagen del teléfono

Matías Papalini _______________


para probar el prototipo (se abrirá
una nueva pestaña en el
navegador).
Diseñando una nueva experiencia educativa post-pandemia __________________

Introducción
¿Cómo cambió la educación en la pandemia?

Matías Papalini _______________


Contexto
Diseñando una nueva experiencia educativa post-pandemia __________________

La pandemia alteró nuestra vida en todos los


ámbitos y de formas que nunca imaginábamos.
En muchas dinámicas sociales como la
educación, los hábitos y comportamientos
tuvieron cambios muy profundos en muy poco
tiempo.

El objetivo de este proyecto fue rediseñar una de


las plataformas educativas con más crecimiento
durante la pandemia. Una plataforma que según

Matías Papalini _______________


alumnos y docentes será parte de la “nueva
normalidad”.
57
Respuestas de docentes y alumnos en
Los números de la cuestionario digital.

investigación
Diseñando una nueva experiencia educativa post-pandemia __________________

Esta investigación consistió en: 4


Entrevistas en profundidad con alumnos
● Cuestionarios digitales: anónimos y universitarios y preuniversitarios.
confidenciales con preguntas cuantitativas y
cualitativas.
● Entrevistas en profundidad: online y
compartiendo pantalla para observar cómo
1

Matías Papalini _______________


alumnos y docentes utilizan las diferentes
herramientas educativas. Entrevista en profundidad con docente de
últimos años de secundario.
● Análisis de reviews en app stores: recolección de
comentarios sobre apps educativas.
● Análisis de tendencias: detección de señales y
posibles tendencias.
La educación pre-COVID
48%
¿Cómo era antes? De los encuestados utilizaba una
plataforma digital en su institución
educativa antes de la pandemia
Diseñando una nueva experiencia educativa post-pandemia __________________

Personas: Personas estudiando o enseñando


en academias o instituciones mayormente de
forma presencial.

Dinámicas: La educación presencial era


percibida como la mejor forma de aprender.

Herramientas: Principalmente materiales

Matías Papalini _______________


físicos, en algunos casos había adopción de
algunas herramientas digitales. Algunas
instituciones tenían plataformas digitales
integradoras.
La educación en cuarentena

¿Cómo cambió?
Diseñando una nueva experiencia educativa post-pandemia __________________

Personas: Se suman personas que dan y


toman cursos online sobre herramientas o
temas específicos (ej; cocina).

Dinámicas: Todas las clases se vuelven


digitales, alumnos y profesores tuvieron que
hacer una adaptación acelerada.

Herramientas: Instituciones y academias


52%

Matías Papalini _______________


adoptaron plataformas integradoras. Ante De los encuestados empezó a usar una
la necesidad, hay una mayor apertura a la plataforma digital en su institución
exploración de nuevas apps para mejorar las educativa durante la cuarentena
dinámicas de clase.
La educación post-COVID

¿Qué está emergiendo?


Diseñando una nueva experiencia educativa post-pandemia __________________

Personas: Cada vez más personas se animan


a ofrecer cursos y aprender de forma digital
todo tipo de temas.

Dinámicas: Instituciones, profesores y alumnos


son cada vez más propensos a probar nuevas
tecnologías, se rompen barreras de adopción.

Herramientas: La apertura a probar herramientas

Matías Papalini _______________


digitales lleva a que herramientas como realidad
virtual, la colaboración en tiempo real e incluso
juegos sean opciones con mucho potencial. Las
instituciones potenciarán las funcionalidades de
plataformas integradoras.
¿Cuáles son las más utilizadas?
11%
Utiliza una plataforma personalizada por
su institución educativa Plataformas
12% integradoras
Diseñando una nueva experiencia educativa post-pandemia __________________

Utiliza Google Classroom

Las plataformas integradoras o LMS (Learning


Management System) son sistemas de gestión de
aprendizaje online basados en entornos virtuales (web o
75% mobile). Su uso se potenció durante la pandemia para
poder organizar contenidos y clases. Con estos sistemas:
Utiliza la plataforma
Moodle
● Los profesores pueden subir material de estudio,
2% corregir, comunicarse con alumnos, etc.

Matías Papalini _______________


No utiliza plataforma ● Los alumnos pueden acceder a apuntes, entregar
integradora trabajos, rendir exámenes, etc.
¿Qué es Moodle?

Plataforma Moodle
Diseñando una nueva experiencia educativa post-pandemia __________________

La plataforma Moodle es un sistema de enseñanza


diseñado para crear y gestionar espacios de aprendizaje
online adaptados a las necesidades de profesores,
estudiantes y administradores.

Moodle es un software libre que se distribuye bajo la


licencia GPL (General Public License). Esto significa

Matías Papalini _______________


que cualquier persona o institución puede hacer uso de él y
adaptarlo a sus necesidades sin pagar.
Diseñando una nueva experiencia educativa post-pandemia __________________

Insights
¿Qué descubrimos en la investigación?

Matías Papalini _______________


INSIGHT 01: VINO PARA QUEDARSE

Alumnos y docentes valoran positivamente


el potencial de la plataforma.
Diseñando una nueva experiencia educativa post-pandemia __________________

Consideran que poder acceder a todos los materiales, anuncios y trabajos


de clase en un solo lugar actualizado es una gran ventaja.

Matías Papalini _______________


”Está buena la facilidad de entregar “Me gusta tener toda la información
trabajos digitales y evitar contenida y ordenada en un solo lugar.” -
impresiones.” - Alumno Docente
INSIGHT 02: DIFERENCIAS ENTRE APP Y WEB

Las diferencias en la interfaz de la app con


respecto a la web generan confusiones entre
Diseñando una nueva experiencia educativa post-pandemia __________________

alumnos y docentes.
Los usuarios consideran que la web es mucho más intuitiva que la app.
Algunos usuarios entrevistados hablaban de la app y la web como dos
herramientas diferentes.

Matías Papalini _______________


“La interacción con la app no es igual “Creí que la app y la página eran cosas
que en la computadora.” - Alumno diferentes.” - Docente
INSIGHT 03: ORGANIZACIÓN DE CONTENIDOS

Los diferentes niveles de organización de


contenidos generan confusión en los
Diseñando una nueva experiencia educativa post-pandemia __________________

usuarios.

Matías Papalini _______________


INSIGHT 03: ORGANIZACIÓN DE CONTENIDOS

¿Cómo es la app actualmente?


Diseñando una nueva experiencia educativa post-pandemia __________________

Contenidos al mismo nivel


Al ingresar a una materia todos los contenidos están en una gran
lista. El usuario debe hacer scroll hasta encontrar lo que busca. Los
contenidos no están agrupados (salvo divisiones que hace el docente

Matías Papalini _______________


por capítulos). En el mismo nivel se encuentran: apuntes, carpetas,
anuncios del profesor, exámenes, trabajos prácticos, etc.
INSIGHT 04: PERSONALIZACIÓN

Los usuarios no pueden personalizar su


experiencia porque la plataforma no admite
Diseñando una nueva experiencia educativa post-pandemia __________________

muchos cambios en su estructura e interfaz.

Se pierde una oportunidad de permitir que los alumnos expresen su


personalidad. Cada alumno y cada docente tiene formas diferentes de
organizar y crear sus materiales y dinámicas.

Matías Papalini _______________


“No se puede cambiar los colores, ni “Me encantaría cambiar el aspecto
la foto de la materia, ni agregar visual.” - Alumno
nada”. - Alumno
INSIGHT 04: PERSONALIZACIÓN

¿Cómo es la app actualmente?


Diseñando una nueva experiencia educativa post-pandemia __________________

Aspecto aburrido y sin opciones de cambio


La app tiene un aspecto rígido. No se puede cambiar el orden de las
materias, por lo que a veces hay que scrollear un buen rato para
encontrar una. No se puede cambiar colores ni imágenes de
materias, solo hay compatibilidad con tema claro/oscuro del celular.

Matías Papalini _______________


INSIGHT 05: NOTIFICACIONES

Cada alumno desea recibir notificaciones


diferentes, en distintas formas y tiempos, pero
Diseñando una nueva experiencia educativa post-pandemia __________________

la plataforma no ofrece opciones.

Ante la falta de opciones para personalizar las notificaciones, algunas


instituciones decidieron eliminarlas por completo, lo que provoca que
muchos alumnos pierdan fechas de trabajos y anuncios importantes.

Matías Papalini _______________


”Como llegaban muchas “Me gustaría agregarle notificaciones
notificaciones las desactivaron todas, cuando los profes suben avisos,
no hubo punto medio.” - Alumno materiales o info nueva.” - Alumno
INSIGHT 06: DOCENTES

La experiencia de los alumnos con la


plataforma depende de qué tan cómodos se
Diseñando una nueva experiencia educativa post-pandemia __________________

sienten los docentes utilizándola.

Matías Papalini _______________


INSIGHT 07: COMUNICACIÓN

Las herramientas de comunicación de la


plataforma resultan complejas para los
Diseñando una nueva experiencia educativa post-pandemia __________________

usuarios, que utilizan otros medios externos.

La educación es una dinámica social, hay una oportunidad grande de “socializar”


la plataforma. Los profesores resaltan la falta de herramientas para dar
devoluciones y mostrar su progreso a los alumnos.

Matías Papalini _______________


”Las clases van a seguir virtuales, hay “Estoy acostumbrada a hablar mucho
que mejorar la app para que sea más con mis alumnos y en esta plataforma
sencilla la comunicación entre alumno casi no podemos interactuar.” - Docente
y docente.” - Alumno
INSIGHT 07: COMUNICACIÓN

Benchmarking: Feed e interacciones.


Diseñando una nueva experiencia educativa post-pandemia __________________

Feed de materia
Cada materia cuenta con un
feed donde se puede Redes sociales
interactuar con otros. El Feed es un componente
común en redes sociales.
Muchas instituciones
educativas utilizan grupos de
Discusiones facebook para algunas
Las materias cuentan con materias.
foros de discusión.

Matías Papalini _______________


INSIGHT 08: ¿CÓMO SERÁ EL FUTURO?

Alumnos y profesores creen que este tipo de


plataformas vino para quedarse.
Diseñando una nueva experiencia educativa post-pandemia __________________

Hay una percepción de que incluso después de la pandemia habrá una


combinación de clases digitales+presenciales.

”Creo que a partir de ahora Moodle y “Que empecemos a usar estas


clases presenciales se van a herramientas digitales fue lo más

Matías Papalini _______________


complementar.” - Alumno positivo de la pandemia.” - Docente

“Creo que va a continuar así un “Quiero que vuelvan las clases


tiempo, y luego seguirán usando presenciales porque es lo mejor, pero
plataformas como Moodle por quiero que se sigan usando cosas como
comodidad y acceso a la materia.” - Moodle.” - Alumno
Alumno
¿Qué proponemos?
El rediseño se basa en tres pilares principales para eliminar los puntos de dolor encontrados en la
experiencia de los usuarios:
Diseñando una nueva experiencia educativa post-pandemia __________________

Personalización Socialización Organización


Ofrecer a los usuarios la Permitir que docentes y Rediseñar la arquitectura de
posibilidad de cambiar el alumnos puedan interactuar de información y facilitar el

Matías Papalini _______________


aspecto de la app y a forma natural como si fuera acceso a los contenidos.
organizarla según su gusto al una extensión del aula.
estudiar. Insights relacionados:
Insights relacionados: 03. Organización de
Insights relacionados: 07. Comunicación contenidos.
04. Personalización 06. Docentes.
05. Notificaciones
Nuevas funcionalidades

Personalización Socialización Organización


Diseñando una nueva experiencia educativa post-pandemia __________________

Elegir personalidad Feed de materia Búsqueda rápida


Permitir personalizar Feed donde alumnos y Barra de búsqueda rápida
opciones como colores y docentes interactúen como como Google Drive en el
tarjetas de materias. red social. inicio.

Notificaciones Reorganización
Crear un sistema de Rediseñar los menú de
personalización de contenido para las materias.

Matías Papalini _______________


notificaciones.
Diseñando una nueva experiencia educativa post-pandemia __________________

información
Arquitectura de la

¿Cómo reorganizaremos los contenidos?

Matías Papalini _______________


Card Sorting

Rediseñando la
arquitectura
Diseñando una nueva experiencia educativa post-pandemia __________________

Se le pidió a 10 usuarios que organizaran en


grupos relacionados las distintas
funcionalidades de la app, las que ya existen
y las nuevas (personalizar materia y
feed/foro de comentarios de materia). El
resultado fue parecido a la arquitectura
actual, las nuevas funcionalidades fueron

Matías Papalini _______________


ubicadas dentro de Materias y Configuración
(feed/foro y personalizar materias).

Matriz de estandarización
Nueva funcionalidad

Feed de materia
Diseñando una nueva experiencia educativa post-pandemia __________________

Una oportunidad interesante de la investigación


es potenciar la “socialización” de la plataforma.
Para confirmar qué herramienta usarían y
dónde la encontrarían para socializar, se
presentó un escenario a 10 participantes donde
tenían que preguntar una duda al docente.
Algunos usuarios utilizarían la herramienta
existente de chat para preguntar en privado. Los
que utilizarían el feed para hacerlo de forma

Matías Papalini _______________


pública lo encontraron correctamente dentro de
cada materia.

Tree testing
Conclusiones
Grupo 1 Grupo 2 Grupo 3 Grupo 4 Grupo 5

Materias Calendar Chats Notificaciones Configuración


Diseñando una nueva experiencia educativa post-pandemia __________________

Feed/Foro de materia Secciones no incluidas en este proyecto


Se añadirá un espacio de Estas secciones no representaron grandes problemas en la experiencia durante la investigación. Además, los usuarios agruparon las funcionalidades de la misma manera
interacción pública dentro de que están organizadas actualmente. La configuración de notificaciones fue un problema, pero los usuarios agruparon esta funcionalidad dentro de configuración, por lo
cada materia. que la personalización de notificaciones se incuirá en configuración y en la opción de “configurar materia” en el grupo 1.

Notificaciones
Algunos usuarios esperan Personalización.
configurar las notificaciones Se recomienda añadir aquí
en cada materia. también las opciones de
personalización.

Contenido
Se agregarán diferentes niveles

Matías Papalini _______________


de organización para encontrar
mejor cada tipo de contenido
(materiales, exámenes,
trabajos prácticos, configurar
materia, etc.)
Mapa de la plataforma
Diseñando una nueva experiencia educativa post-pandemia __________________

Materias Notificaciones Chats Calendario Configuración

Feed Lista Privados Próx. eventos Notificaciones

Materiales Grupales Nuevo evento Perfil

Trabajos Estadísticas

Matías Papalini _______________


Exámenes Aspecto

Progreso Settings
generales

Configuración
Diseñando una nueva experiencia educativa post-pandemia __________________

¿Qué cambió?
rediseño
Presentación del

Un paseo por las principales funcionalidades

Matías Papalini _______________


Bienvenido al futuro
de la educación
Diseñando una nueva experiencia educativa post-pandemia __________________

Moodle se renueva como nunca lo viste,


concéntrate en aprender, nosotros
crearemos la mejor experiencia para que
todo sea más fácil que nunca.

Matías Papalini _______________


Tu app, tus materiales,
tu personalidad
Diseñando una nueva experiencia educativa post-pandemia __________________

Queremos que la app sea tuya y tu experiencia, única.


Encuentra nuevas opciones de personalización para
estudiar a tu modo:

● Elige el color de la app.


● Elige qué notificaciones quieres recibir.

Matías Papalini _______________


● Cambia el orden de las materias.
Encuentra todo más
fácil
Diseñando una nueva experiencia educativa post-pandemia __________________

Cambia las imágenes de cada materia y


utiliza la potente nueva barra de búsqueda
donde puedes encontrar cualquier
material, proyecto, examen.

Dentro de cada materia, utiliza el nuevo

Matías Papalini _______________


menú horizontal para encontrar lo que
necesites.
Interactúa con docentes
y compañeros
Diseñando una nueva experiencia educativa post-pandemia __________________

Encuentra rápidamente lo que buscas en


cada materia con la nueva barra horizontal.
Interactúa con tus compañeros y docentes
como en una red social.

Matías Papalini _______________


Subir un trabajo
nunca se sintió tan
Diseñando una nueva experiencia educativa post-pandemia __________________

bien
Te guiamos paso a paso para que tus
trabajos sigan las guías de tu docente.

Matías Papalini _______________


Diseñando una nueva experiencia educativa post-pandemia __________________

Hand-off
diseño
Sistema de

Sócrates, el nuevo Sistema de Diseño de Moodle

Matías Papalini _______________


Sócrates
Diseñando una nueva experiencia educativa post-pandemia __________________

La plataforma Moodle contará con su propio


Sistema de Diseño para lograr una experiencia
uniforme en todos los dispositivos y futuros
nuevos productos.

Con el nuevo Sistema de Diseño, Moodle


alcanzará un nuevo nivel. Las aulas ya no tienen
cuatro paredes, el aprendizaje ocurre en cualquier
momento y lugar, sin límites.

Matías Papalini _______________


Propósito y valores compartidos
Queremos lograr que alumnos y profesores se sientan cómodos utilizando herramientas digitales para
potenciar la educación.
Diseñando una nueva experiencia educativa post-pandemia __________________

Queremos que la experiencia de educación


01. Simplicidad digital sea simple, natural e intuitiva.

Aprender debe ser algo divertido y dinámica,


02. Diversión aburrimiento mata aprendizaje.

Matías Papalini _______________


La tecnología aplicada a la educación puede
03. Sin límites potenciarla sin límites.
Principios de Diseño
Diseñando una nueva experiencia educativa post-pandemia __________________

La plataforma es una extensión de las clases, toda


01. Extensión natural del aula interacción debe ser natural y sin limitaciones.

02. La organización es la clave del Todos los contenidos están accesibles fácilmente
éxito. a todos los docentes y alumnos.

Matías Papalini _______________


Los alumnos deben enfocar su tiempo a aprender lo
03. Intuitivo y sencillo que quieren, sin perder tiempo en aprender a usar la
plataforma.
Paleta de colores
El color de fondo principal para las pantallas será blanco con texto negro. En el onboarding, el usuario puede elegir entre 4
opciones de gradientes que se utilizarán como color principal en toda la app:

Colores de Gradiente Gradiente Gradiente Gradiente


Diseñando una nueva experiencia educativa post-pandemia __________________

fondo y texto personalizado 1 personalizado 2 personalizado 3 personalizado 4

Blanco para fondo

#FCFCFC

Negro para texto

#0D0D0D

Matías Papalini _______________


#E98636 #6A44C6 #3B7DDC #E06C8A

#FF6E2E #4C2C9B #3372D1 #DD5D7B


Escala de colores para éxito/error
Estos colores se utilizan para dar feedback al usuario ante situaciones de éxito, advertencia y error. Estos colores cumplen con las
guías de accesibilidad WCAG 2.1 y tienen un ratio de contraste mayor a 3 sobre fondo blanco, no utilizar sobre otros colores. Si es
usado en texto, utilizar mínimo el tamaño de Título 3.
Diseñando una nueva experiencia educativa post-pandemia __________________

Éxito Advertencia Error

#19802c #e5651a #d90b0b

Para dar Feedback Para dar feedback Para dar feedback


positivo al usuario en cuando una acción negativo cuando
caso de que una tarea negativa para la sucedió un error que el
o acción se desarrolle experiencia está por usuario no va a poder
exitosamente. suceder, pero existe arreglar. Debe ser
una acción que el acompañado de

Matías Papalini _______________


usuario pueda realizar instrucciones sobre
para evitar o mitigar la cómo contactar a
situación. Acompañar soporte o pedir ayuda.
con Call To Action.
Tipografía - Títulos

Para todos los textos, se utiliza: Próxima Nova


Diseñando una nueva experiencia educativa post-pandemia __________________

Título principal Principales usos: Títulos de presentación en las pantallas


36 pt - ExtraBold iniciales de la app.

Título 1 Principales usos: Títulos en pantallas donde el usuario


deba realizar alguna acción.
28 pt - ExtraBold

Título 2

Matías Papalini _______________


Principales usos: Títulos en cards.
22 pt - Bold

Título 3 Principales usos: Títulos de navegación en Headers.


20 pt - Bold
Tipografía - Párrafos y botones

Para todos los textos, se utiliza: Próxima Nova


Diseñando una nueva experiencia educativa post-pandemia __________________

Acción Principales usos: Cualquier componente clickeable por el


usuario que produzca una acción.
18 pt - Bold

Cuerpo de texto 1 Principales usos: Párrafos en general.


16 pt - Regular

Cuerpo de texto 2

Matías Papalini _______________


Principales usos: Descripciones en las cards.
14 pt - Regular

Caption Principales usos: Fechas y subtítulos que den contexto al


usuario.
12 pt - Regular
Imágenes e iconografía

Imágenes
Diseñando una nueva experiencia educativa post-pandemia __________________

Se utilizan imágenes de alta definición,


sin filtros de estilo. Las imágenes deben
estar siempre relacionadas a educación
o tecnología relacionada a educación.

Iconografía

Matías Papalini _______________


En toda la app utilizamos iconos de
línea. Utilizar color con cuidado para
indicaciones de acción.
Nuestra voz

Natural
La plataforma es una extensión de las clases, toda interacción
debe ser natural y sin limitaciones.
Diseñando una nueva experiencia educativa post-pandemia __________________

Organizado
Todos los contenidos están accesibles fácilmente a todos los
docentes y alumnos.

Matías Papalini _______________


Intuitivo
Los alumnos deben enfocar su tiempo a aprender lo que quieren, sin
perder tiempo en aprender a usar la plataforma.
Matriz de voz Natural Organizado Intuitivo

La plataforma es una extensión de las Todos los contenidos están accesibles Los alumnos deben enfocar su tiempo a
Concepto clases, toda interacción debe ser natural
y sin limitaciones.
fácilmente a todos los docentes y
alumnos.
aprender lo que quieren, sin perder
tiempo en aprender a usar la plataforma.

Oraciones cortas, fácilmente entendibles Utilizar sustantivos como palabras clave Instrucciones cortas, una sola idea por
Verbosidad como una buena explicación de una
docente.
para organizar contenido. oración.

La clase va a empezar, la profe ya subió Apuntes, notas, trabajos, exámenes. Entregar trabajo, aquí podrás interactuar
Vocabulario tu nota, no te pierdas los últimos
comentarios en la materia.
con tus compañeros y docentes, entrar a
clase.

Oraciones con lenguaje natural, como si Palabras clave utilizando sustantivos. Oraciones simples con verbos en
infinitivo o en condicional.
Gramática fuera una conversación en clase.

Uso correcto de signos de puntuación para una conversación clara y natural. Evitar guiones y Evitar signos de interrogación que

Matías Papalini _______________


Puntuación barras. puedan confundir a los usuarios en su
experiencia.

Utilizar las normas de mayúsculas (al principio de una oración y nombres propios). Evitar frases y palabras completamente en mayúsculas.
Uso de mayúsculas
Inspirador
Tono y estilo
Onboarding Personalización

Interacción con
clase
Diseñando una nueva experiencia educativa post-pandemia __________________

Recibir
correcciones

Trayecto del usuario

Matías Papalini _______________


Consultar
calendario

Notificaciones Hacer
examen/trabajo
Guía de estilos

Natural Buenas prácticas Malas prácticas

Las fechas son importantes en un año 10/06/1989 - Diez de junio de mil novecientos
Fechas escolar. Utilizamos siempre el formato ochenta y nueve
- 10 de junio de 1989
DD/MM/YYYY.

Utilizando lenguaje natural, damos ¡Bien hecho! Tu trabajo se entregó - Trabajo subido.
Mensaje de éxito feedback positivo a los usuarios con
oraciones clara e inspiradora.
correctamente. La profesora lo verá y
corregirá en los siguientes días.
- Operación completada
satisfactoriamente.

Frase clara explicando lo sucedido. Hubo un error al entregar tu trabajo. Por - Error en el documento.
Mensaje de error Ofrecer una acción clara para intentar
solucionarlo.
favor, comprueba si el formato es el que
pide el docente.
- No se puede realizar esta acción.

Utilizar frases simpáticas, como si ¿Qué vamos a estudiar hoy? Buscar...

Matías Papalini _______________


Buscador fuéramos un compañero de clase
dispuesto a ayudar.

Crear recordatorios optimistas e La semana que viene es el examen final El examen final está programado para el
de Matemáticas. ¿Sabías que un repaso
Eventos de calendario inspiradores, invitando a pensar en
positivo. final dos días antes potencia la memoria?
10/10/2020.
Botones

Primarios Secundarios Alternativos


Diseñando una nueva experiencia educativa post-pandemia __________________

Activo Activo Activo


Drop Shadow X0 Y4 B16 Outline 2px Fill #F1F3F6
000000 Opacity 24%

Matías Papalini _______________


Inactivo Inactivo Inactivo
Opacity 50% Opacity 50% Opacity 50%
Cards

Materias Feed
Diseñando una nueva experiencia educativa post-pandemia __________________

Matías Papalini _______________


Componente utilizado para acceder a Componente utilizado para socializar
las materias. en el feed de cada materia.
- Color seleccionado por el - Botón “Me gusta” y
usuario. “Compartir”.
- Título utilizando nivel “Acción”
Uso de animaciones
● Utilizar animaciones para potenciar la experiencia de profesores y
alumnos.
● Evitar las animaciones decorativas que no ayuden al usuario a
completar una tarea.
● Las animaciones deben guiar al usuario y facilitar cualquier tarea
que desee realizar, creando una experiencia natural e intuitiva.

Matías Papalini _______________


Animación subordinada

Acceso a materia
● Disparador: La animación inicia al hacer tap en una de las tarjetas de
materia.
● Comportamiento: La imagen de materia se posiciona en la parte superior
de la pantalla junto al título y el fondo. Todos los elementos quedan
subordinados a la imagen de materia. Luego aparecen los demás
elementos.
● Duración total: 400ms
● Coreografía:

Imagen de materia: - Y:203->88 - Size: 358x236 px ->470x121 px - Easy out

0 ms 200 ms

Matías Papalini _______________


Elementos de scroll horizontal: Opacity 0%->100% - Easy out

100 ms 200 ms
Feed: Y:480->368 - Opacity 0%->100% - Easy out

200 ms 300 ms

50 100 150 200 250 300 350 400 t(ms)


Personalización
● La personalización es uno de los pilares en el rediseño de la
aplicación.
● Una de las opciones de personalización más importantes es la de
poder elegir el color de acción de la app.
● Los patrones de personalización deben dar un feedback
instantáneo al usuario, mostrando el resultado de sus decisiones.

Matías Papalini _______________


Animación lineal

Selección de color
● Disparador: La animación inicia cuando el usuario arrastra el elemento
(cuaderno de color) hacia izquierda o derecha.
● Comportamiento: El cuaderno de color se desplaza hacia un lado
(decreciendo en tamaño) para dar lugar al siguiente (creciendo en
tamaño). El botón cambia de color al finalizar el desplazamiento.
● Duración total: 200ms
● Coreografía:

Cuaderno de color: Size: 216x203 px -> 143x200 px // X99,Y214 -> X-81,Y254 //


Lineal
0 ms 200 ms

Matías Papalini _______________


Cuaderno de color: Size: 143x200 px -> 216x203 px // X364,Y266 -> X99,Y214 //
Lineal
0 ms 200 ms

50 100 150 200 250 300 t(ms)


Animación subordinada

Inicio
● Disparador: La animación inicia automáticamente cuando el usuario abre
la app y finaliza la carga.
● Comportamiento: El logo de la app se desplaza hacia arriba para dar
espacio a las opciones de conexión. Todos los elementos quedan
subordinados al movimiento del logo.
● Duración total: 300ms
● Coreografía:

Logo: centrado - Y:324->117 - Size: 232x62 px ->178x48 px - Easy out

0 ms 100 ms

Matías Papalini _______________


Descripción y botón: centrado - Y:304->229 - Opacity 0%-
>100% - Easy out
100 ms 300 ms

50 100 150 200 250 300 t(ms)


Diseñando una nueva experiencia educativa

Matías Papalini _______________


post-pandemia

También podría gustarte