Este resumen describe el proceso de diseño participativo de wireframes para un sitio web universitario. Se definieron tres arquetipos de usuarios y se realizó una actividad con personas que representaban cada arquetipo. Luego se analizaron los wireframes creados por cada persona, llegando a conclusiones sobre la importancia y ubicación de elementos como el logo, buscador, menús y contenidos relevantes para cada tipo de usuario. Finalmente, se propuso un nuevo mapa de navegación basado en los hallazgos.

1. Diseño Participativo de Wireframes

2. Introducción
 Para realizar el diseño de los wireframes armamos una
paleta de elementos de la página
(botones, imágenes, video, buscador, etc.) que cada
persona debía ordenar en el espacio.
 Las personas que realizaron la actividad fueron elegidas
en base a los arquetipos definidos en la etapa de
“Personas y Escenarios”.
 Nos enfocamos en los 3 tipos de estudiantes de una
universidad: el alumno de colegio que es su potencial
“futuro estudiante” y que ingresará a pregrado; el
alumno que pertenece a la institución y que en este
caso acaba de entrar a pregrado y un profesional o
estudiante egresado que busca continuar sus estudios
tomando un postgrado.

3. Actividad en Proceso

4. Arquetipos Definidos
 Arquetipo Definido 1: Alumno 4º medio. Busca
información sobre postulantes.
 Arquetipo Definido 2: Alumno UFTSM. Debiera conocer
más el sitio y podría diferenciar entre jerarquías de
contenidos.
 Arquetipo Definido 3: Egresado. Busca un magíster.

5. Persona 1: Margarita
 Arquetipo Definido:
Alumno de Colegio. “Postulante”
Caso Real de Estudio
 Nombre: Margarita Peña
 Edad: 18 años.
 Ocupación: Estudiante de 4º medio, Colegio Compañía
de María.
 Quiere estudiar Ingeniería en Diseño de Productos en la
UTFSM. Necesita acceder tanto a la inscripción de ensayos
PSU que realiza la universidad como a información de la
carrera, puntajes, aranceles, etc.

6. Wireframe de Margarita
Caso: Estudiante de Colegio
 Ubica el Nombre sobre
el logo y este último a la
izquierda.
 La barra de búsqueda
también está bajo el
nombre, pero a la
derecha.
 Ubica los botones
Carreras, Ensayos PSU y
Becas en ese orden, en
el lado derecho y bajo
el calendario.

7. Persona 2: Cristian
 Arquetipo Definido:
Alumno UTFSM
Caso Real de Estudio
 Nombre: Cristián Cortés
 Edad: 19 años.
 Estudios: Egresado del Colegio Mackay, generación 2012.
 Ocupación: Estudiante de Ingeniería Civil en la UTFSM.
 Fue elegido ya que como estudiante activo de la
Universidad debiese usar con más frecuencia el sitio web
de ésta.

8. Wireframe de Cristian
Caso: Estudiante UTFSM
 Ubica el logo arriba a la
derecha.
 Luego el título, la barra
de búsqueda y la barra
de menú.
 Los botones de
Becas, Ensayos PSU y
Carreras se ubican a la
derecha en ese orden.

9. Persona 3: Renzo
 Arquetipo Definido:
Egresado. Busca un magíster.
Caso Real de Estudio
 Nombre: Renzo Baldassare.
 Edad: 25 años.
 Estudios: Ingeniería Comercial, Universidad Adolfo Ibáñez.
 Ocupación: Área de Desarrollo, Entel empresas.
 Fue elegido como posible usuario del sitio web debido a
que existen postgrados de su interés, como el Magíster en
Gestión de Activos y Mantenimiento.

10. Wireframe de Renzo
Caso: Estudiante Egresado
 Ubica el logo arriba a la
izquierda.
 No hay barra de menú
superior.
 Los botones de
Carreras, Becas y
Ensayos PSU se ubican a
la izquierda en ese
orden.

11. Conclusiones sobre los usuarios
 Estudiante Colegio: Desconoce los contenidos del
sitio, no relaciona los links. Dice que son muchos
contenidos y que debiesen desplegarse, pero no
identifica las jerarquías.
 Estudiante UTFSM: Aclara que ellos como alumnos de la
UTFSM nunca o casi nunca ingresan al sitio de su
universidad, sino que utilizan otro sitio. Es por esto que
desconoce sus contenidos.
 Estudiante Egresado: No pertenece a la institución y
reconoce dos aspectos importantes: el sitio debe captar
la atención de los futuros alumnos y debe haber un
menú exclusivo para los alumnos de la universidad.

12. Conclusiones sobre los wireframes
 Para los 3 usuarios los elementos más importantes son el
título, el logo y el buscador, y por esto los ubican en la
parte superior.
 Las redes sociales siempre se ubican juntas, en un
espacio definido y sin mezclarse entre el resto de los
contenidos. Además, dos de las tres personas las
ubicaron en la parte superior. Esto nos indica que hay
interés por la información que en estas redes se
transmite.
 Las secciones “eventos” y “noticias” se ubican en un
mismo nivel, demostrando una relación entre ambos
contenidos.

13. Conclusiones sobre los wireframes
 Los tres usuarios ubican el calendario en la zona lateral
derecha, cerca de la sección eventos y noticias. Se crea
así una relación entre los elementos que tienen que ver
con el tiempo.
 El video institucional es casi irrelevante. Lo utilizan como
accesorio o lo dejan a un lado.
 Para el área relacionada con los futuros alumnos, los
elementos más relevantes según los usuarios son Carreras
USM, Ensayo PSU, Becas y Admisión Especial.
 Los tres coinciden en que la información de contacto
(teléfonos, e-mail, dirección, etc.) deben estar en la
parte inferior del sitio.

14. Nuevo Mapa de Navegación
“home”

15. Propuesta Wireframe Home
Versión web y móvil

16. LC3, 2013
Franco Baldassare
Josefina Borja
Caterina Da Silva
Javiera Rojas
Camila Valenzuela