Intercambio PUCV, Propuesta Web

De Casiopea



TítuloDiseño de Sistemas Integrales
Palabras Claveapp, ux, diseño, ingeniería, sistema, digital, aplicación, web, experiencia, intercambio
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2018
Alumno(s)Valentina Carrasco, Renee Rodo, Jessica Villarroel
ProfesorHerbert Spencer, Rodolfo Pinto

Tabla de Contenidos

Datos Personales

  • Grupo: Alfa
  • Público al que se dirige: Estudiantes relacionados al Proceso de Intercambio PUCV
  • Integrantes Ingeniería Informática: Luis Rojas, Nicolás Johnson, Cristobal Sánchez, Franco Ortiz
  • Diseño de Interacción: Valentina Carrasco, Renée Rodo, Jessica Villarroel


Carta Gantt

Tema de estudio

Proceso de intercambio centrado en experiencia del alumno PUCV

Problemática de estudiantes de intercambio que cursaron, cursan, o quieren cursar un intercambio en la Universidad Católica de Valparaíso, enfocado en el sistema de postulación, búsqueda de opciones, convivencia en el extranjero o bien problemáticas personales y especiales para cada caso.

Introducción al tema

La Pontificia Universidad Católica de Valparaíso ha desarrollado una labor permanente de proyección internacional, promoviendo y estableciendo vínculos con instituciones de educación superior afines en el extranjero.

La Universidad procura el desarrollo de alianzas con entidades académicas, públicas y privadas en todo el mundo, como también con organismos internacionales y agencias de cooperación.

Estas alianzas se manifiestan a través de diversas actividades y proyectos internacionales en diferentes áreas. La PUCV cuenta con numerosos convenios de cooperación, los cuales alcanzan a más de 200 con instituciones y organismos extranjeros, permitiendo generar una sólida y creciente red de contactos mediante los cuales se han desarrollado importantes actividades en las áreas de la enseñanza, investigación y educación continua. [1]


Estudiantes de la PUCV La Universidad Católica de Valparaíso se caracteriza por su heterogeneidad y por ser un reflejo de la sociedad chilena. Acoge a alumnos de diversos puntos del país, recibiendo a aproximadamente a 13.500 estudiantes cada año. [2]

Estudiantes de INTERCAMBIO PUCV Este año se incorporará a nuestra Casa de Estudios un grupo de jóvenes provenientes de 25 países. Algunos efectuarán prácticas profesionales, aprenderán el idioma español y tendrán la oportunidad de perfeccionar su formación desde la mirada de nuestro país. En efecto, este año un grupo de 315 estudiantes de intercambio se están incorporando por estos días al primer semestre en la Católica de Valparaíso.[3]

Estudiantes INTERCAMBIO en CHILE Durante el 2016, la cifra de estudiantes extranjeros de intercambio matriculados en instituciones de educación superior de Chile fue 8.703 alumnos.

Nuestro país recibe anualmente a alumnos de más de 80 naciones. La principal región de origen de los estudiantes de intercambio es Europa, con 3.340 alumnos provenientes de España, Francia e Inglaterra.

Del total de estudiantes que llegan de intercambio a Chile, 5.330 corresponden a mujeres (61,2%), mientras que los 3.373 restantes son hombres. Principalmente optan por quedarse en Santiago, Valparaíso o Concepción.[4]

Anexo

Preguntas frecuentes[5]


¿EN QUÉ CONSISTE EL INTERCAMBIO ESTUDIANTIL?


A través del Programa de Movilidad Estudiantil, los estudiantes pueden cursar parte de sus estudios en el extranjero, tiempo durante el cual continúan siendo alumnos regulares de la PUCV. En este periodo los estudiantes deben pagar su matrícula y mensualidad en PUCV (según corresponda) quedando exentos de pagar en la universidad de destino.


Primer acercamiento, Conocer Territorio y Validar Conceptos

Metodología de Diseño

Métodos de captar información utilizado: DISEÑO CONTEXTUAL

Corresponde a un proceso basado en el usuario. Se utilizan variados métodos de recolección de datos, dentro de un curso de acción determinado, que guía al equipo a través de los procesos de diseño en una correcta dirección. Algunos de los pasos recomendados


Requerimientos y soluciones:

  • Contextual Inquiry: (investigación de contexto) entrega al diseñador una comprensión cualitativa muy rica, sobre quién es el cliente. [Hablar con clientes, de un campo específico].
  • Interpretation Sessions: (sesiones de interpretación) interpretar datos como equipo, para encontrar las problemáticas. Se realizan investigaciones y estudios a las entrevistas realizadas. Se determina un marco de referencia sobre el cual todos podrán trabajar (en perspectivas multidisciplinarias).
  • Work Models and Affinity Diagrams: permite al equipo externalizar la representación de un sistema de trabajo complejo (flujo, secuencia, artefacto, cultural, físico, etc).
  • Visioning and Storyboard: toma las implicancias de los modelos de trabajo y se utilizan para generar conceptos y trabajar detalles, inventando nuevas o mejores formas de apoyar el trabajo del cliente.


Definición y Validación de Conceptos:

  • Use Environment Design: representa un nuevo plano de trabajo para un sistema que mejora comportamientos existentes y apoya el flujo natural del trabajo del cliente. [Diseña un nuevo sistema].
  • Paper Mock-ups: usadas para obtener feedback de usuarios en estructura, función y flujo del diseño propuesto. Todo esto, antes de ser codificado e implementado. Usa pautas interactivas.
  • Interaction & Visual Design: diseña y prueba la apariencia final y la experiencia del usuario.

Investigación de Contexto

Mapa de Actores

  • Embajada de país extranjero
  • Estudiantes en Intercambio
  • Estudiantes postulando a Intercambio
  • Estudiantes que volvieron del Inntercambio
  • Familia
  • Estudiantes extranjeros
  • Amigos/ compañeros
  • Asistente Social PUCV
  • Aerolínea
  • Personal relaciones internacionales, universidad extranjera
  • Universidad de destino
  • PUCV
  • Aseguradora
  • Taller UX (Ingeniería y Diseño)
Mapa de actores copia-02.png

Conceptos

Mapa Empewe.png
  • Conceptos ya validados

Entrevista a Encargo de Relaciones Internacionales

Se hace una entrevista presencial a la asistente de programa de Movilidad Estudiantil, Justyna Ostaszewska


Entrevista - Justyna - .png


Encuesta

Encuesta Online


Se hacen las preguntas de forma presencial, se registran de forma online.


https://docs.google.com/forms/d/1Y5ujUrg0pjWiQY4tra02DjOtL1n1K2GV0VFfytAzKXI/viewform?edit_requested=true



Grafico1di.png

Interpretación de Información

Representación gráfica


Mapa conceptual

Un mapa conceptual es una herramienta de aprendizaje basada en la representación gráfica de un determinado tópico a través de la esquematización de los conceptos

Mapasss-02.png

Diagrama de afinidad

Se utiliza para la organización de ideas que aporta un grupo sobre un problema complejo que se tiene de un área. Primero se presentan los problemas rescatados desde las encuestas y los estudios hechos a los actores, directamente. Luego se toma este problema y se analiza la verdadera problemática, internamente lo que sucede con esto. Y finalmente se presenta una posible solución, vista en conjunto con Ingeniería, para crear un sistema o plataforma que pueda llevarse a cabo a futuro, pensando en un aporte para los alumnos de la misma universidad, que pueda ser creable y aplicarse.

Diag de afinidad-03.png


Mapa de Empatía

Un mapa de empatía es un gráfico de emociones, deseos y necesidades que experimenta el usuario en distintas etapas.

Con esta herramienta, las empresas se ponen en el lugar de las personas para identificar como optimizar productos y servicios, así se diseña con base en los sentimientos del usuario.


Mapa Empatía2.png

Esfuerzos

  • No inclusión a becas
  • No convalidación de ramos
  • Retrasos en proceso
  • Resolución presencial de dudas
  • Mayor orientación
  • Seguimiento
  • Incentivo a vivir la experiencia
  • Falta de explicación de métodos y fechas respectivas
  • Falta de red alumnos que ya se han ido de intercambio y los que no

Resultados

  • Bases bien expuestas
  • Aporte de información por parte de alumnos con experiencia
  • Crecimiento personal, aprendizaje de nuevas culturas, idiomas, métodos y personas
  • Más encargados pendientes de resolver dudas
  • Curso previos de idioma que faciliten la interacción futura

Presentación 1

https://docs.google.com/presentation/d/1ExVgoUv7v_YiHNJJQuZV3cLp1w0ZSJHpMWSzlYd1V0U/edit#slide=id.g39c6b53cc8_0_56

Segundo acercamiento, Ideación

Objetivo

Mejorar la experiencia de los alumnos, en relación al Intercambio PUCV

Primeras Ideas

Escenarios y personas

Escenario

  • Posible mejora Digital:Una plataforma en que los estudiantes de diseño puedan ingresar sus preferencias de país, y esta les muestre aquellas universidades a las que pueden acceder, sobre estas, información de cantidades de créditos sobre ramos a lo que pueden optar, para luego convalidar respecto a su carrera. Además se piensa que esta pueda contactar a estudiantes nuevos, por medio de un medio de comunicación, con estudiantes ya regresados del intercambio, estudiantes que se encuentran en intercambio y estudiantes postulando al intercambio.


Persona La "persona" es una descripción detallada sobre la base de los conocimientos, comportamientos y habilidades de los distintos tipos de usuarios que tendrá un sistema digital

  • Posible Perfil de usuario: Estudiante, perteneciente a la carrera Diseño en PUCV, posiblemente interesado en intercambio, con 4 semestres cursados en la Universidad (para posible postulación),

Problemáticas principales, y Posibles Soluciones

Pre Intercambio:

  • Necesidad de guías/orientadores mejor informados y más disponibles, con mejor predisposición |

Puede existir una plataforma con toda la información sobre el intercambio (lo previo, lo durante y los post), pero no garantiza de que los guías/tutores estén mejor informados ya que depende plenamente de quien los escoge/capacita, y de la disposición del mismo.

  • Falta de jornadas presenciales para orientar y aclarar dudas. |

No es posible crear un software que organice y calendarise reuniones, ya que depende de la disponibilidad de orientadores.

  • Procesos lentos a la hora de postular, falta de organización y apoyo al estudiante; sobre todo a la hora de escoger universidades y cursos. |

Posible plataforma con información sobre todas las universidades a las que se puede postular, separadas por carreras y cursos. Esto facilitaría y haría más expedito el proceso de postulación

  • Incentivar a alumnos a participar de esta experiencia. |

Generar un plataforma web que conecte a alumnos en intercambio, lo que incentivaría gracias a la posibilidad de encontrar otros estudiantes en la misma situación

  • Incumplimiento de plazos en postulaciones, tanto en aceptación a universidades como a becas. |

No es posible crear un software que regule estas demoras, ya que cada caso debe tener el tiempo necesario para ser analizado; dependiendo plenamente de los encargados en la Universidad.


Durante Intercambio:

  • Falta de organización entre universidades, a la hora de convalidar ramos. |

Se puede realizar un software que presente toda la información que necesita el alumno cuando busca una universidad para el intercambio, como cursos, créditos y convalidaciones.

  • Falta de persona o ayuda que se encuentre disponible 24/7, en caso de dudas, problemas e inquietudes. |

Se puede realizar un software de comunicación interna e inclusiva.

  • Falta de medio/plataforma de comunicación entre estudiantes de intercambio saber quienes están cerca. +Falta de actividades de integración. + Falta de inducción u orientación a alumnos al llegar a la universidad: sistema de notas, calendario, formas de trabajar, de evaluar. +Falta de red de alumnos de intercambio + estudiantes que se inician en proceso y estudiantes que ya fueron.

Generar un plataforma web que conecte a alumnos partícipes del intercambio PUCV (pre-durante-post). Traería beneficios a la hora de encontrar gente que se encuentre en el mismo país, ciudad e incluso universidad; también conectarse con alumnos que hayan estado en la misma universidad que puedan aconsejar sobre ésta, el país, la ciudad, etc.


  • Falta de seguimiento de estudiantes en intercambio, por PUCV

Se puede realizar un software que una esta red de comunicación con los requerimientos necesarios.

Posibles Software

En base a los hallazgos mencionados anteriormente, se puede ver que algunos de ellos que no son modelables desde el punto de vista informático, como por ejemplo la baja cantidad de reuniones para brindar información o la poca variedad de becas.

En cuanto a los que sí se puede ver de informáticamente, podemos sintetizarlos en tres posibles softwares:

  1. Sistema de intercambio que muestre seleccionando una carrera a cuáles universidades se puede asistir alrededor del mundo e identificando claramente que ramos se convalidarán.
  2. Una aplicación que conecte alumnos de intercambio mediante perfiles para poder entablar comunicación y facilitar la interacción de personas en mismos países o universidades.
  3. Una red de ayuda para personas, tanto con información sobre intercambio que mediante mentores aporten en la integración tanto en nuestro país como en el extranjero.

Estudio de datos

Estudio de plataforma existente

  • Partitura de uso de plataforma existente [6]

PIX.png

Estudio de Convenios Existentes

  • Convenios Bilaterales: la PUCV mantiene más de 40 convenios con universidades de Alemania, Australia, Canadá, Corea, Costa Rica, España, Estados Unidos, Francia, Italia, México, Portugal, Rumania y Suecia. [7]
  • ISEP: la PUCV es miembro del International Student Exchange Program, que permite a sus alumnos asistir a más de 100 universidades en Estados Unidos y 130 en el resto del mundo.[8]
  • CINDA: a través de un convenio con el Centro Interuniversitario de Desarrollo, las universidades más importantes de Latinoamérica abren sus puertas para que los estudiantes de la PUCV puedan realizar estancias académicas de un semestre. [9]
  • DAAD: programa que permite a alumnos de Ingeniería y Agronomía de la PUCV hacer una estadía de un año en prestigiosas universidades alemanas, con financiamiento parcial del Servicio Alemán de Intercambio Académico (DAAD).[10]

Universidades adscritas

Se crea una lista de más de 400 Universidades adscritas al Sistema de Intercambio de la Universidad Católica de Valparaíso, específicamente de la carrera de Diseño, para este primer prototipo se realiza el estudio solo de universidades del continente europeo. Incluye todos sus países, donde predomina Alemania, Italia, Inglaterra y Francia, donde Italia es la más preferida por los estudiantes encuestados.

Estudio de Ingeniería

Requerimientos

A) Requerimientos Funcionales | ¿Qué es lo que el sistema debe ser capaz de hacer?

  • EJ: Permitir a usuarios registrarse en el sistema mediante un formulario


  1. Sitio web
  2. Sistema de sesiones + Registro de usuarios (Usuarios con perfiles)
  3. Menú de Carreras (PUCV)
  4. (sub) Menú de países (que tienen convenio con la universidad y la carrera)
  5. (sub) Menú de carreras (que tienen convenio ...)
  6. (sub) Menú de ramos (con sus respectivos créditos)
  7. Mensajes entre usuarios
  8. PosibleForo de consultas
  9. Posible Búsqueda por filtros


B) Requerimientos no funcionales | Restricciones más orientadas al “cómo hacer” que al “qué hacer”

  • EJ: El sistema debe re-dirigir a un nuevo usuario registrado a la página principal en menos de 2 segundos.


  1. Organizado y fácil de utilizar, intuitivo
  2. Tiempos de carga rápidos
  3. Eficiencia en el uso de sus partes
  4. Adaptable a varias plataformas (computador, celular)
  5. Persistencia de datos de los usuarios (almacenar en BD)
  6. Posibilidad de vincular con redes sociales
  7. Los datos ingresados a la base de datos deben ser validados

Planificación de Riesgos

Riesgo: Probabilidad de que una situación adversa ocurra. Su gestión se preocupa de identificar, analizar y responder a estos factores de riesgo.

  • Técnicas para descubrir los posibles riesgos del proyecto: Brainstorming, experiencia
  • Plan de mitigación: Busca reducir la probabilidad de ocurrencia del riesgo.
  • Plan de contingencia: Respuesta en caso de ocurrencia del riesgo.


A) Falla de servidor

  • Plan de contingencia: Mantener servidores con un plan de replicación de datos, para seguir funcionando en caso de fallas.
  • Plan de Mitigación: Se configurará la aplicación para conectarse a un servidor temporal.


B) Cambios de requerimientos

  • Plan de contingencia: La metodología de desarrollo escogida permite un avance flexible durante el desarrollo por lo que cambios no significativos no afectarán en mayor grado al desarrollo del proyecto.
  • Plan de Mitigación: Se analizará la factibilidad de desarrollar los nuevos requerimientos para luego adaptarlos o reemplazarlos respecto a los existentes.


C) Pérdida de datos ingresados por desconexión de Internet

  • Plan de contingencia: Crear un caché que contenga los datos que ingresó el usuario.
  • Plan de Mitigación: Extraer los datos guardados en el caché.

Análisis Preliminar de Riesgos

Se revisa cada riesgo por separado y se asigna la probabilidad de ocurrencia. La probabilidad del riesgo se puede valorar como muy bajo (< 10%), bajo (10-25%), moderado (25-50%), alto (50-75%) o muy alto (>75% )


Probabilidad: 1- 4 | Impacto: 1- 4 | Exposición: (Probabilidad x Impacto)


  • Falla del servidor: Probabilidad:2/ Impacto: 4/ Exposición: 8/ Prioridad: media
  • Cambios en requerimientos: Probabilidad:4/ Impacto: 2/ Exposición: 8/ Prioridad: media
  • Pérdida de datos ingresados por desconexión de Internet: Probabilidad:1/ Impacto: 1/ Exposición: 1/ *Prioridad: baja

Presentación 2


Tercer acercamiento, Diseño y desarrollo de Prototipos

Prediseño de Software

Definición de Idea

Según las propuestas expuestas y estudiadas anteriormente, se escoge la idea con la que se proseguirá a prototipar e indagar:

  • Plataforma Interactiva, de mejora al proceso de postulación al intercambio PUCV, con posibilidad de una mejora (a futuro) de conexión entre alumnos partícipes del Intercambio PUCV.


Específicamente, lo que esta plataforma entregará al usuario, es una base de datos de todas las universidades que tienen convenio con la PUCV. En ella, el alumno podrá buscar los establecimientos con los cuales realizar un estudio en el extranjero (tanto en pre-grado como en post-grado); según la carrera que están cursando, el convenio, el continente y/o el país.

De esta forma, se propone facilitar y mejorar el proceso de postulación, ya que el alumno encontrará rápida y expeditamente todas las universidades disponibles para sus estudios. Las demás problemáticas expuestas previamente (Conexión entre alumnos de intercambio mediante perfiles para poder entablar comunicación y facilitar la interacción de personas en mismos países o universidades. / Red de ayuda para alumnos, tanto con información sobre intercambio que mediante mentores aporten en la integración tanto en nuestro país como en el extranjero.) son tomadas en cuenta y no desechadas, para luego ser implementadas dentro del mismo sistema, como complemento. Podrían ser solucionados con una red de contactos, un registro de estos y además un vinculo con sus datos para contacto personal y presencial de los estudiantes.


Metodología a Utilizar

  1. User Research: test de usabilidad (sitio/app), desarrollar personas, desarrollar mapas de viaje del usuario. 6.1 User Research
  2. Arquitectura de Información: generar inventario de todo el contenido, analizar el contenido con el "user research" como guía, desarrollar prototipos interactivos, iterar (basado en feedback).6.2 Arquitectura de Información
  3. Page Template: diseño de páginas (estructura de contenido, layout, patrón de interacción).6.3 Page Template Design - Wireframes
  4. Visual Design (User Interface): trends, color, tipografías.6.4 Visual Design

Herramientas para el desarrollo del prototipo

Informática

PHP: PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de código abierto muy popular especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML. PHP fue concebido para el desarrollo simple de aplicaciones en el lado del servidor (Back-End).

  • Motivo por el cual lo usaremos: Con PHP podemos ejecutar códigos desde el servidor, y manejar el contenido obtenido de la base de datos con eficiencia.


JavaScript: Javascript es un lenguaje programación interpretado. Se utiliza principalmente en su forma del lado del cliente (Front-End), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas.

  • Motivo por el cual lo usaremos: Es sencillo de usar, soporta la mayoría de los navegadores populares además es versátil para multiplataformas en sistemas operativos móviles.


HTML: HTML es el lenguaje de marcado estándar para la creacion de paginas web. HTML es el acronimo para Hyper Text Markup Language | a. Describe la estructura de la página web utilizando etiquetas. | b. Las etiquetas de HTML poseen contenido como cabeceras, párrafos, tablas, etc. | c. Los navegadores no muestran las etiquetas HTML, pero las usan para renderizar el contenido de la página.

  • Motivo por el cual lo usaremos: El lenguaje HTML es el estándar para los documentos de hipertexto usados en la web.


Bootstrap/css : a. Bootstrap es un framework gratuito, el cual permite implementar facil y rapido un entorno web. | b. Bootstrap incluye plantillas de diseño basadas en HTML y CSS para formularios, botones, tablas, navegación, modales entre muchos otros. | c. Bootstrap brinda la capacidad de fácilmente diseños receptivos.

  • Motivo por el cual lo usaremos: Atributos responsivos: Los atributos se ajustan a distintos dispositivos, como tablets, teléfonos y computadores. Compatibilidad con navegadores: Bootstrap es compatible con todos los navegadores modernos (Chrome, Firefox, Internet Explorer, Safari y Opera).


Laravel: Laravel es un framework de código abierto para desarrollar aplicaciones y servicios web con PHP 5 y PHP 7.

  • Motivo por el cual lo usaremos: Nos facilitará el desarrollo de la página web, además, entre sus funcionalidades deja implementar una conexión a redes sociales.


MySQL: MySQL es un sistema de gestión de bases de datos que se utiliza para almacenar los países, nombres de estudiantes en intercambio, convalidaciones, etc.

  • Motivo por el cual lo usaremos: Una de las más potentes y utilizadas bases de datos, posee muchas funcionalidades y no requiere pago para usarse.


Xampp: XAMPP es un paquete de software libre, que consiste principalmente en el sistema de gestión de bases de datos MySQL, el servidor web Apache y los intérpretes para lenguajes de script PHP y Perl.

  • Motivo por el cual lo usaremos: Al ser un prototipo, no se pagará por un dominio por lo cual se recomienda usar Xampp. Además, sirve para gestionar fácilmente las bases de datos usadas.

Definiciones

[11]

  1. Wireframe: Un wireframe para un sitio web, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web.1 El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.
  2. Framework: Es un esquema (un esqueleto, un patrón) para el desarrollo y/o la implementación de una aplicación.
  3. Hipertexto: Sistema de organización y presentación de datos que se basa en la vinculación de fragmentos textuales o gráficos a otros fragmentos, lo cual permite al usuario acceder a la información no necesariamente de forma secuencial sino desde cualquiera de los distintos ítems relacionados.
  4. Software: Se conoce como software​ al soporte lógico de un sistema informático, que comprende el conjunto de los componentes lógicos necesarios que hacen posible la realización de tareas específicas, en contraposición a los componentes físicos que son llamados hardware.
  5. Base de Datos:Una base de datos es un conjunto de datos pertenecientes a un mismo contexto y almacenados sistemáticamente para su posterior uso.


Diseño

User Experience (UX)

  • Personas
  • Data
  • Wireframes
  • User Research

User Interface (UI)

  • Color
  • Tipografías
  • Lay-out

Diseño de Software

Corresponde al proceso a través del cual se crea la especificación de un Software, busca cumplir goals, usando un set de componentes primitivos y sujetos a restricciones. Puede relacionarse a "toda actividad implicada en conceptualizar, determinar, implementar, poner en marcha y modificar sistemas complejos". Usualmente involucra resolver problemas y planear soluciones. Incluye diseño de componentes y algoritmos y diseño de arquitectura.


User Research

Personas

Herramienta del Design Thinking que ayuda a encontrar respuestas a preguntas como ¿Para quién diseñar? Al comprender las expectativas, inquietudes y motivaciones de los usuarios es posible diseñar un producto que satisfaga las necesidades de los usuarios y, por lo tanto, que este sea exitoso.

Persox1.jpg
Persox2.jpg
Persox3.jpg
Persox4.jpg

Journey Map

Herramienta de Design Thinking que permite plasmar en un mapa, cada una de las etapas, interacciones, canales y elementos por los que atraviesa el usuario durante todo el ciclo de navegación.

Jouneymapintercambio-01.png Jouneymapintercambio-02.png

Modelo Entidad Relación

Entidades


Las entidades son el fundamento del modelo entidad relación. Podemos adoptar como definición de entidad cualquier cosa o parte del mundo que es distinguible del resto. Por ejemplo, en un sistema bancario, las personas y las cuentas bancarias se podrían interpretar como entidades. Las entidades pueden representar entes concretos, como una persona o un avión, o abstractas, como por ejemplo un préstamo o una reserva. Se representan por medio de un rectángulo.

Atributos


Atributos/ características de la entidad, se representan mediante un círculo o elipse etiquetado mediante un nombre en su interior. Cuando un atributo es identificativo de la entidad se suele subrayar dicha etiqueta. Por motivos de legibilidad, los atributos suelen no aparecer representados en el diagrama entidad-relación, sino descritos textualmente en otros documentos adjuntos.

Relación


Describe cierta dependencia entre entidades o permite la asociación de las mismas.

Merintercambio1.png

Identificación de Escenarios

STORYBOARD


Storyboard plataformainteractiva copia.png

Arquitectura de Información

El diseño de arquitectura es la versión más abstracta del sistema. Aquí se identifica el software como un sistema con variados componentes que interactúan entre ellos. En este nivel, el diseñador tiene la idea de las posibles soluciones.

Método de estructurar y organizar la información dentro del producto.


Datos

  • Universidades Extranjeras y Respectivos Convenios

  • Carreras de la PUCV


  • Usuario

Datos a registrar:

  1. Nombre Usuario
  2. Contraseña
  3. Correo Electrónico
  4. Carrera
  5. Rut/DNI


Primera idea de Interfaz

Todos los datos a considerar para la creación de la navegación por la plataforma, sus derivaciones y además la totalidad de la opciones que podría entregar.

  • Fase 1: Registro de Usuario
    1. Solicitud de datos personales
      • Nombre:
      • Rut/ DNI:
      • Nacionalidad:
      • Contacto (email, teléfono):


  • Fase 2: Carrera (54)
    1. Selección de carrera: Por el momento solo DISEÑO
      • FACULTAD DE ARQUITECTURA Y URBANISMO
      • FACULTAD DE CIENCIAS
      • FACULTAD DE CIENCIAS AGRONÓMICAS Y DE LOS ALIMENTOS
      • FACULTAD DE CIENCIAS ECONÓMICAS Y ADMINISTRATIVAS
      • FACULTAD DE DERECHO
      • FACULTAD DE FILOSOFÍA Y EDUCACIÓN
      • FACULTAD DE INGENIERÍA
      • FACULTAD ECLESIÁSTICA DE TEOLOGÍA


  • Fase 3: Filtros
    1. Selección de CONTINENTE(5)solo Europa por el momento (6)
      • África
      • América
      • Antártida
      • Asia
      • Europa
      • Oceanía
        1. Luego de seleccionar un país, se presentan todas las universidades que imparten Diseño en este
    2. Selección de CONVENIO (4)
      • Bilateral
      • ISEP
      • CINDA
      • DAAD
        1. Luego de seleccionar un convenio, se presentan todas las universidades que imparten Diseño y tienen convenio con la PUCV, por este medio
    3. Selección de PAÍS;
        1. Luego de seleccionar un País, se presentan todas las universidades que imparten Diseño y tienen convenio con la PUCV
    4. Selección UNIVERSIDAD (400)
        1. Se presentan todas las universidades que imparten Diseño y tienen convenio con la PUCV
  • Fase 4: Ficha de Universidad
    1. Selección de Universidad
      • Se muestra una ficha de datos tipo, de la universidad seleccionada, esta muestra:
        1. Nombre
        2. Datos geográficos: ubicación, ciudad, etc
        3. Fotos de Universidad
        4. Link a la página web
        5. ...proximamente
          • Datos de carrera: ramos convalidables, créditos,
          • Testimonios, datos de contactos

Idea Definitiva

  • Se realizan pruebas de la arquitectura, por medio de prototipos e iteración basada en feedback (Wireframes).


Fondo

  1. Botones o enlaces: que permita cambiar de filtro dentro de otro
  2. Enlace a inicio
  3. Contáctanos

Inicio

  1. Iniciar sesión
  2. Buscador de universidades
  3. Red de estudiantes

1. Iniciar sesión

  1. Usuario
  2. contraseña
  3. Nuevo usuarioredirecciona a nuevo usuario
    1. Nuevo usuario: nombre, dni, contacto, nombre usuario, contraseña= Guardar


Me envía al inicio


2. Buscar universidades

  1. Carrera: abre una lista con las 54 carreras de la pucv y se escoge una. (Ej. Diseño)
    1. Abre un mapamundi con los 5 continentes y se escoge uno. (Ej. Europa)
      1. Se abre continente, se escoge un país. (Ej. Se abre Europa, se escoge Italia)
        1. Se abre país, muestra universidades y convenios. (Ej. Se abre Italia, se muestran tres universidades y se expresa a qué convenio está subscrita cada una)

3. Red de alumnos

  1. Proximamente

Page Template Design - Wireframes

Prototipos

Propuesta 1

Feedbacks Al presentar esta propuesta la mayor respuesta es que esta plataforma es muy informal, las puntas curvas de los cuadros de texto hacen parecer a esta propuesta no finalizado. También se manifiesta que su color es muy fuerte, por lo que se nos sugiere elegir un de menor intensidad, pero manteniendo la familia del Rosa.

Propuesta 1.2


Propwireframejeca2.png


Feedbacks Desde aquí se toman las consideraciones de la forma de los cuadros de textos y color de la propuesta. Se propone probar y presentar pruebas de combinaciones de color y tipografías.

La opacidad del color relleno de cuadros de texto se toma como un punto a favor, esto hace que la pagina tome cada vez más apariencia de formalidad y valor.

Propuesta 2

Propu1val.png Propu2val.png

Variaciones


Feedbacks Se recopila la información dada por los usuarios, y se crean pruebas de colores, tipografías e iconos, los cuales nacen de la necesidad de ilustrar lo que se dice con palabras. De esta forma se complementa lo gráfico, la base del proyecto.

De estas propuestas se recoge el lograr un diseño de plataforma que se muestre neutra, y que al interactuar con ella, ésta misma entregue un feedback indicando que la operación se completó, por lo que se decide próximamente crear wireframes específicos para la respuesta y apropiación de la página.

También nace de esta necesidad el cambio de tono o color en el momento de hacer click y seleccionar alguna opción y botón, un feedback constante que sea el que le da el color al wireframe.

Propuesta 2.1

Prpu2-1.png


Feedbacks En esta propuesta se invierte el color de los contenidos, se deja el fondo gris y se integra el segundo color en lo que está superior a este (cuadros de texto, botones). Se genera un menú inferior.

Propuesta 3

Propuesta1,2Renee.jpg


Variaciones

  • Prueba de Tipografías [A]

Título: Playfair Display Subtítulo/texto: Open Sans


  • Prueba de Tipografías [B]

Título: Open Sans Subtítulo/texto: Playfair Display

  • Pruebas de Menú

Feedbacks En esta propuesta se recogen todas las correcciones de los usuarios y además las realizadas como taller, donde se definen las tipografías y colores a utilizar, de donde se modifican algunos feedback de la pagina, complementando con cambios de color y tonos en donde se seleccionan los botones.

Propuesta 4

Pagweb-intercambio-02.png

Feedbacks Se presenta esta propuesta vía correo a nuestros compañeros de Ingeniería y ellos manifiestan que el color no les parece, exigiendo un cambio, por lo que se cambia el color a uno que a ellos les parece más "sobrio"

Video patrón de Interacción


Propuesta 4.1

Pagweb-intercambio - VERSIONB (2).png

Feedbacks Finalmente y además de este cambio de color, se agregan algunos wireframes que se manifiesta que podrían complementar la experiencia del usuario por la pagina, como "olvidé mi contraseña", como expresar el éxito de algunas operaciones, una opción de "salir" y además una opción de agregar notas al wireframe posterior a la selección de universidad, para de esta forma dar una navegación que se pueda complementar y además personalizar de manera mas amplia, para poder tomar esta página como un método confiable y fácil para poder navegar por las distintas universidades que interesen.



Propuesta Final

Pagweb-intercambio-fin-07.png

Otros ejemplos de Menú país

Olvidé mi contraseña


Páginas no existentes

Iconos creados


Feedbacks Versión final de los wireframes.

Finalmente se agregan todos los wireframes que los usuarios y las correcciones del taller se realicen, (agregando, salir, agregar notas, éxito de operaciones, cambios en la respuesta de la pagina, ver lista completa, y países que no se encuentren disponibles).

Además de todo esto se cambia el color por la disconformidad de compañeros de Ingeniería, aún así manifestandoles que los feedback de usuarios eran positivos, y además que el color conchevino ya es un color sobrio y aceptable.

También se nos comenta que es necesario que algunos datos sean declarados como definiciones de convenios, lugares, y universidades. Se agregó esta opción de un recordatorio siempre presente al momento de necesitarlo.

Siempre se busca el complementar la página respondiendo a las necesidades del usuario, para que pueda ver esta como una página a la cual recurrir por ayuda, que sea de confianza y de fácil manejo y navegación, ya que en algún caso también podría ser usada por alumnos de habla no hispana.


Video Patrón de Interacción


Diseño de Arquitectura

Opciones de navegación, páginas a las redirecciona; desarrollo mientras el usuario la utiliza.

  • Inicio Plataforma

UsNu1.jpg

  • Menú Central

UsNu2.jpgUsBus2.jpg


Inicio de Sesión - Registro Nuevo Usuario

Inicio de Sesión

Buscador de Universidades


  • Menú Superior

Usuario - Perfil

Ver Favoritos

Editar Carrera

Editar Contraseña


Universidades - Buscador


Convenios - Buscador

Propuesta con Gráfica Final

  • Inicio Plataforma


Cuadex-01.png

  • Menú Central


Cuadex-02.png


Cuadex-03.png


Inicio de Sesión - Registro Nuevo Usuario

Inicio de Sesión

Cerrar Sesión

Olvidé mi contraseña

Buscador de Universidades


  • Menú Superior

Usuario - Perfil

Ver Favoritos

Editar Carrera

Editar Contraseña


Universidades - Buscador


Convenios - Buscador



Feedbacks Tomando la primera y segunda propuestas de interfaz, donde la primera solo contempla el contenido neto, los datos concretos de navegación, cada opción que se le puede mostrar al usuario, deprendiendo de su búsqueda, e intereses, se crea la versión final enfatizando en la interfaz, y que punto lleva al siguiente y su evolución.

Y en la segunda se muestra todo el avance hasta la propuesta final, aquí se propone un mínimo de botones que permiten el avance en la página web, utilizando en cada uno un icono con una palabra. En esta propuesta se toma toda la información, se distribuye respondiendo a la propuesta final de wireframes y además se agrega un significado y desarrollo de cada botón.

Al momento de presentar la primera propuesta a los posibles usuarios nos dejan en claro que son muchas opciones y que podría confundir, por esto es que se disminuye al mínimo la cantidad de información que se presenta por wireframe, para esto también se crean muchas de estas pantallas de información, para así poder ordenar de mejor manera y catalogar tipos de información que el usuario posiblemente querría ver separada y otras juntas, como por ejemplo al momento de buscar por convenio se sugiere que en todo momento algo recordara la definición de estos.

Visual Design

Interfaz de Usuario

Pagweb-intercambio-colofon-01.png Pagweb-intercambio-colofon-02-41.png

Layout

Guías de Página

Layout-03.png Layout-04.png


Colores

  • Base: R:238/G:238/B:238 || Opacidad 100%
  • Mapa-Logo: R:113/G:112/B:112 || Opacidad 70%
  • Cuadro Texto Menú: R:8/G:138/B:133 || Opacidad 60%
  • Botón Menú: R:8/G:138/B:133 || Opacidad 90%
  • Puntos Convenios: R:33/G:33/B:33 || R:255/G:255/B:255 || R:8/G:138/B:133 || R:40/G:52/B:120 || Opacidad 100%

Tipografías

Source Sans Pro

  • Versalita: Regular/Thin || 7puntos/8puntos|| R:113/G:112/B:112 || Opacidad 100%
  • Regular/Thin Italic || 5puntos/7puntos/11puntos || R:0/G:0/B:0 || R:255/G:255/B:255 || Opacidad 100%

Oswald

  • Regular || 11 puntos|| R:255/G:255/B:255 || Opacidad 100%




Prototipado

Es una representación o simulación de las interacciones que va a tener nuestra solución de diseño. Pueden hacerse tanto con Wireframes como Mockups.

  • Wireframe: Una representación de baja fidelidad (lo-fi) de un diseño.
  • Mockups: La representación de una solución de diseño en alta fidelidad (hi-fi).

¿Cuál es su objetivo? Experimentar, testear y comunicar las interacciones de nuestro diseño.

¿Cuándo usarlos? Usamos prototipos siempre que queramos validar el tipo de interacción que estamos planteando para una solución de diseño. Para que aparezcan los posibles errores y validar la aplicación

Los prototipos también sirven como documentación del proceso.

Primer Prototipo Online - Diseño

Video Prototipo Ingeniería


Corrección desde Feedback

Sobre nosotras

Se agrega un "sobre nosotros" para que el usuario pueda contextualiza y saber concretamente de que se trata la aplicación, se piensa esto como un botón más del menú superior para que en todo momento este presente esta opción de acceder a la información.

Pagweb-intercambio - copia-83.png Pagweb-intercambio - copia-81.png


Volver al mapa

Se agrega un botón "ver mapa" para que el usuario pueda ir directamente el mapa principal de la pagina web, ya sea el mapa del mundo, cuando se encuentra navegando por países, o al mapa del país, cuando se encuentra navegando por las distintas universidades del mismo.

PwebinterULTI-39.png PwebinterULTI-55.png


Scroll

Se intensifican los contrastes de la opción de scroll, buscando que el usuario note que existen más opciones dentro de su búsqueda, sin pasar desapercibido.

Pagweb-intercambio - ULTIMO1-56.png Pagweb-intercambio - ULTIMO1-49.png

Contrastes

Además también se intensifica el color de fondo del texto de cada pantalla, y así crear una mejor lectura del usuario.

PwebinterULTI-05.png Pagweb-intercambio-verde-ORDEN-05.png


Listas y explicitar Contenido

Pagweb-intercambio - ULTIMO2-22.png Pagweb-intercambio - ULTIMO3-01.png

Versión Final Plataforma web de Intercambio, para PUCV

Pagweb-intercambio - ULTIMO3-01.png PwebinterULTI-22.png


Presentación y Nosotros


Inicio de Sesión


Buscar Universidades, Continente Europeo e Italia


Otros Países


Ver Favoritos


Editar Contraseña y Carrera


Ver Convenios y Universidades


Salir


Olvidé mi contraseña


Prototipo Online

https://invis.io/TXMVM0YS6DQ#/307833728_PwebinterULTI-22

Video Prototipo

Video Presentación

Referencias