Valentina Carrasco Proyecto 3 - Diseño y Emprendimiento 2018
Título | Valentina Carrasco Proyecto 3 - Diseño y Emprendimiento 2018 |
---|---|
Tipo de Proyecto | Proyecto de Taller |
Asignatura | Diseño y Emprendimiento, |
Del Curso | Diseño y Emprendimiento 2018, |
Carreras | Diseñ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 |
Profesor | Camila 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:
- Nombre Usuario
- Contraseña
- Correo Electrónico
- Carrera
- 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
- Solicitud de datos personales
- Nombre:
- Rut/ DNI:
- Nacionalidad:
- Contacto (email, teléfono):
- Solicitud de datos personales
- Fase 2: Carrera (54)
- 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
- Selección de carrera: Por el momento solo DISEÑO
- Fase 3: Filtros
- Selección de CONTINENTE(5)solo Europa por el momento (6)
- África
- América
- Antártida
- Asia
- Europa
- Oceanía
- Luego de seleccionar un país, se presentan todas las universidades que imparten Diseño en este
- Selección de CONVENIO (4)
- Bilateral
- ISEP
- CINDA
- DAAD
- Luego de seleccionar un convenio, se presentan todas las universidades que imparten Diseño y tienen convenio con la PUCV, por este medio
- Selección de PAÍS;
- Luego de seleccionar un País, se presentan todas las universidades que imparten Diseño y tienen convenio con la PUCV
- Selección UNIVERSIDAD (400)
- Se presentan todas las universidades que imparten Diseño y tienen convenio con la PUCV
- Selección de CONTINENTE(5)solo Europa por el momento (6)
- Fase 4: Ficha de Universidad
- Selección de Universidad
- Se muestra una ficha de datos tipo, de la universidad seleccionada, esta muestra:
- Nombre
- Datos geográficos: ubicación, ciudad, etc
- Fotos de Universidad
- Link a la página web
- ...proximamente
- Datos de carrera: ramos convalidables, créditos,
- Testimonios, datos de contactos
- Se muestra una ficha de datos tipo, de la universidad seleccionada, esta muestra:
- Selección de Universidad
Idea Definitiva
- Se realizan pruebas de la arquitectura, por medio de prototipos e iteración basada en feedback (Wireframes).
Fondo
- Botones o enlaces: que permita cambiar de filtro dentro de otro
- Enlace a inicio
- Contáctanos
Inicio
- Iniciar sesión
- Buscador de universidades
- Red de estudiantes
1. Iniciar sesión
- Usuario
- contraseña
- Nuevo usuarioredirecciona a nuevo usuario
- Nuevo usuario: nombre, dni, contacto, nombre usuario, contraseña= Guardar
Me envía al inicio
2. Buscar universidades
- Carrera: abre una lista con las 54 carreras de la pucv y se escoge una. (Ej. Diseño)
- Abre un mapamundi con los 5 continentes y se escoge uno. (Ej. Europa)
- Se abre continente, se escoge un país. (Ej. Se abre Europa, se escoge Italia)
- 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)
- Se abre continente, se escoge un país. (Ej. Se abre Europa, se escoge Italia)
- Abre un mapamundi con los 5 continentes y se escoge uno. (Ej. Europa)
3. Red de alumnos
- 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
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
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
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
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
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
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
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
- Menú Central
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
- Menú Central
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.
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.
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.
Contrastes
Además también se intensifica el color de fondo del texto de cada pantalla, y así crear una mejor lectura del usuario.
Listas y explicitar Contenido
Versión Final Plataforma web de Intercambio, para PUCV
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