Valentina Carrasco Proyecto 3 - Diseño y Emprendimiento 2018

De Casiopea



TítuloValentina Carrasco Proyecto 3 - Diseño y Emprendimiento 2018
Tipo de ProyectoProyecto de Taller
AsignaturaDiseño y Emprendimiento,
Del CursoDiseño y Emprendimiento 2018,
CarrerasDiseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Diseño Industrial"Diseño Industrial" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Valentina Carrasco
ProfesorCamila Zamora Osorio


Prototipado rápido

¿Qué vamos a prototipar?

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.

Hipótesis

Esta plataforma será probada con estudiantes que estén postulando a un intercambio, para que sean estos mismos los que opinen acerca de la funcionalidad de la plataforma, carencias y necesidades.

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.


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.

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