Corimar Torres - Said Quintero
1. Conceptualización 1.1 Brief 1.2 Pregunta Problema 1.3 Objetivos 1.4 Público 1.5 Adquisición 1.6 Conversión 1.7 Retención 1.8 Investigación Primaria 1.9 Investigación Secundaria 1.10 UI/UX/IA
2. Relización 2.1 Referentes Visuales 2.2 Interfaz de Usuario 2.3 Experiencia de Usuario 2.4 Arquitectura de la Info 2.5 Mapa de Navegación 2.6 Estrategia de Comunicación
Índice
Conceptualizaciรณn
1.1
Brief Hoy en día vivimos en un mundo muy agitado, lleno de actividades y responsabilidades. En este ritmo de vida es muy importante cumplir con muchas cosas al tiempo y es en esta circunstancia en la cuál muchos estudiantes fallan. NotifyMe te brinda la oportunidad de no perder de vista tus responsabilidades académicas, pudiendo así quitarte un
peso de encima. La web a través de correos electronicos te avisará de cualquier detalle que tengas pendiente por atender en tu universidad, esta te recordará tareas, exámenes y demás con solo llenar su cronograma con tu planeación académica.
Diseño Web 1.1 Brief
Preguna Problema
1.2
¿?
¿Cómo una página web puede ayudar a los estudiantes barranquilleros a la ejecución y organización de sus actividades académicas?
Diseño Web
1.2 Pregunta Problema
Objetivos
1.3
General
Crear una página web capaz de ayudar a los estudiantes universitario de Barranquilla a responder a tiempo con sus responsabilidades académicas.
Específicos Recordar a las personas sus tareas a entregar. Recordar a las personas que materias llevan más bajas para lograr un mejor rendimiento en esta. Mantener el control de las notas en las materias. Ayudar a tener un mejor rendimiento académico. Diseño Web
1.3 Objetivos
Público
1.4
Directo
Indirecto
Este proyecto va dirigido a estudiantes univsersitarios barranquilleros que necesiten una manera de mejorar su rendimiento académico y ser un poco más responsables.
Estudiantes Barranquilleros con falencias para realizar sus actividades acadeémicas a tiempo.
La web va dirigida a estudiantes univsersitarios barranquilleros que necesiten una manera de mejorar su rendimiento académico y ser un poco más responsables.
Diseño Web
1.4 Público
Nuestro primer paso será darle a los estudiantes una expectativa de la página mostrando una introducción, en ella iremos revelando poco a poco los beneficios de la página web para llamar la atención del estudiante. Para esto crearemos un esquema o mapa de arquitectura para otorgar visualmente como se organizan los elementos que la componen. Posteriormente se realizará una encuesta en donde se pregunte básicamente que espera el usuario de nuestra página. Luego de obtener estas opiniones, uniremos todas las ideas y pasaremos a la etapa de crecimiento donde habremos superado los esfuerzos técnicos para ofrecer al usuario un registro que permita que nuestra página web pueda aumentar su lista de usuarios.
Adquisición
1.5
La idea es que los clientes que ya se han registrado reciban una parte experimental del sitio; el usuario que llega hasta esa parte se encontrará con un diseño muy sencillo y básico.
Analizamos mediante comentarios para obtener informes de rendimiento y garantizarnos que la página web esté funcionando como deseamos y esté cumpliendo nuestras perspectivas.
Finalmente, saltamos a publicar y pasar la página web a “producción”. En esta etapa el sitio web está con un continuo control a tiempo real y en constante mantenimiento para ir optimizando y realizando continuas mejoras en el sitio web. Diseño Web
1.5 Adquisición
Conversión
1.6
Utilizaremos una estrategia sencilla debido a que este será un servicio gratuito, mostraremos piezas visuales de modo que los clientes vayan tomando expectativas del sitio. Optimizaremos la navegación y facilitaremos el proceso de conversión por medio de un buen aspecto visual. Por medio de estas herramientas nuestro objetivo es generar mayor atracción del usuario y lograr convertir a un visitante en un cliente, para así conseguir más visitas y posteriormente más clientes en nuestra página web.
Retención
1.7
Contaremos con un servicio de alertas vía correo electrónico el cuál nos permitirá mantener informados a nuestros usuarios en todo momento. Desarrollaremos una interfaz capaz de transmitir tranquilidad y agrado, para así crear comodidad a quienes visitan la web, de esta forma será posible mantener por más tiempo a nuestra audiencia y así ella conocerá más los valores de la página.
Diseño Web
1.6 - 1.7 Conversión - Retención
Investigación Primaria
1.8
Encuestas Por medio de sitios web de recolección de datos como los que brinda google y a través de pequeñas encuestas impresas. La idea es recoletar información para determinar los patrones dados y ejecutar una solución.
Entrevistas A diferentes sujetos del campo como maestros y estudiantes. Con esta información determinar la prioridad de las diferentes situaciones.
Navegación Web A través de los medios digitales encontrar referentes de partida y testimonios que no sean útiles a la hora de armar el sitio web y darle respuesta a la problemática.
Diseño Web
1.8 Investigación Primaria
Investigación Secundaria
1.9
Wunderlist
Wunderlist es la forma más sencilla de hacer tus cosas. Ya sea planificar unas vacaciones, compartir una lista de la compra con tu pareja o administrar varios proyectos de trabajo, Wunderlist te ayuda a completar todas tus tareas personales y profesionales.
Wunderlist
Un board de Trello es básicamente una página web que contiene listas dispuestas de manera horizontal de modo que puedas apreciar, de un vistazo, todo lo que hay en tu proyecto. Los ítems dentro de las listas, llamados cards, pueden arrastrarse y soltarse en otras listas o reordenarse. Diseño Web
1.9 Investigación Secundaria
UI
1.10
El diseño de la interfaz será muy simplificado ya que estará diseñado para que los usuarios tengan claridad de la distribición y el manejo de los componentes de la misma, permitiendo su uso en todo momento y dándole agilidad al usuario para que así se siente mucho más seguro dentro del sitio. Hay que mantener claro siempret el contenido que mayormente verán los usuarios será aquel que ellos mismos creen en la página. Nuestra página cuenta con un manejo de colores inspirado en
las diferentes áreas del conocimiento, colores que contextualizan al usuario en un ambiente de concentración y a la vez le dará tranquilidad y sensación de control. Haremos uso recurrente de marcadas jerarquías tipográficas ya que son el medio más práctico para transmitir una información en cierto orden queremos mostrar que estamos en un lugar de conocimiento y claridad, en el que la interfaz no es otro reto más al que hay que afrontar.
Diseño Web 1.10 UI
UX
La página será del tipo personal, este sitio web será un lugar donde se expresan las actividades académicas de los estudiantes a nivel de educación secundaria o superior. Tenemos como propósito que las personas ya no olviden más sus tareas y distintas actividades y así logren tener un mejor desempeño académico. Contaremos con varias páginas ya que dará mayor flexibilidad y velocidad de localización del contenido, exceptuando la página principal la cuál será una página de “scroll” en la que explicaremos
brevemenente a través de piezas gráficas cómo es el funcionamiento de la página, y al final un botón de inscripción para la misma.
1.10
El dominio poseerá una barra de navegación horizontal la cuál será visible por cualquier visitante de la página en la cuál podrá acceder a opciones básicas de la misma, pero al estar suscrito a esta se le permitirá acceder a otra columna vertical la cuál estará presente en cualquier parte del dominio para que así este puede saltar entre sus anotaciones muy fácilmente. Diseño Web 1.10 UX
AI
1.10
La información estará dividida en dos orientaciones. En la parte horizontal la cual será una barra de navegación superior, se encontrarán opciones como suscripción, acerca de, soporte e inciar sesión. En la parte vertical estará distribiudo el contenido que hace parte del material educativo, con opciones como un calendario, apuntes importantes, tareas, clases, horarios y demás. Dentro de cada página de estas se verá un ícono estatico en el cuál podremos acceder a esta columna de distribución.
Diseño Web 1.10 AI
Realizaciรณn
Referencias Visuales En la página web de Trello tomamos como referencia las distintas tarjetas con pasos de la tarea a realizar incluidos, debido a que estas se pueden desplazar por la pantalla y organizarse de la manera que el usuario desee para que así estos tengan una mejor experiencia en la página.
2.1
Diseño Web
2.1 Referencias visuales
Referencias Visuales
2.1
En la página web de wunderlist tomamos como referencia la sección de comentarios debido a que esta es visualmente cómoda de usar para que los futuros usuarios de nuestra página puedan interactuar y hablar con respecto a sus tareas.
También tomamos como referencia la sección para establecer una fecha de caducidad y recordatorio de modo que a los usuarios se les haga fácil agregar la misma para su tarea y se le sea notificado a su correo electrónico.
Diseño Web
2.1 Referencias visuales
Interfaz de Usuario
2.2 Colores
RGB: 20 - 55 - 50 HEX: #143732 RGB: 50 - 95 - 90 HEX: #325F5A RGB: 150 - 190 - 185 HEX: #96BEB9 RGB: 100 - 100 - 100 HEX: #646464
Tipografía
Source Sans Pro Source Sans Pro Source Sans Pro Source Sans Pro Source Sans Pro Source Sans Pro Diseño Web
2.2 Interfaz de usuario
Interfaz de Usuario
2.2 Barras
Búsqueda Buscar
Navegación Home
Conócenos
Log in
Sing in
Íconos Mesa
Calendario
Deberes
Ajustes
Prioridad
Editar Diseño Web
2.2 Interfaz de usuario
Interfaz de Usuario
2.2 Tarjetas
Geografía
Columna Esta semana
Mesa
Mapa
Examen 2
Calendario
Topología
Topología
Deberes
Martes, 22 de Abril 2016
Viernes, 25 de Abril 2016
Geografía
Geografía
Examen 2
Bata de laboratorio
Capitales del mundo
Leer el libro
Viernes, 25 de Abril 2016
Martes, 29 de Abril 2016
Física II
Ajustes
Literatura
Trazado de rutas
Martess, 6 de Mayo 2016
Diseño Web
2.2 Interfaz de usuario
Interfaz de Usuario
2.2
Agregar deberes
Hovers Log in
Log in
Geografía Mapa
Martes, 22 de Abril 2016
Materia Título Fecha Descripción
Geografía
Topología Viernes, 25 de Abril 2016 Mapa Martes, 22 de Abril 2016 Examen 2 Viernes, 25 de Abril 2016
Topología Capitales Viernes, 25 dedel Abrilmundo 2016 Martes, 29 de Abril 2016
Examen 2 Trazado deAbril rutas Viernes, 25 de 2016
Martess, 6 de Mayo 2016
Capitales del mundo
Todas Trazado de rutas Mapa Críticas Martess, 6 de Mayo 2016 Exámenes Martes, 29 de Abril 2016
Diseño Web
2.2 Interfaz de usuario
Experiencia de Usuario
2.3
En Notify pensamos que el usuario interactúe en nuestra página en una sección de comentarios para que así estos puedan comunicarse sus tareas con sus compañeros y además puedan enviar comentarios a los creadores de la página para reportar algún error o sugerencia.
Diseño Web
2.3 Experiencia de Usuario
Arquitectura de la información Se busca distribuir la información separando a los usuarios registrados de lo visitantes a la página, dándole a este último solo un parcial acceso a la información. Para los visitantes sólo se les mostrará la barra de navegación con sus prectectivas derivaciones. Para los usuarios registrados se les desplegará una columna del lado izquierdo en el cuál tendrán acceso a los datos que ellos manejarán acerca de la aplicación. En la barra se encontrará información acerca de la página tal
2.4
como una breve explicación acerda de en qué consiste la página y cómo usarla. También se verán dispuestas algunas de las piezas de promoción gráfica acerca de la página y adicionalmente, un apartado de registro. En la columna se desplegarán los deberes, calendarios, ajustes y la mesa. Estos comprenden el núcleo de la infromación de la página, esta al ser accedida por un usuario nuevo no contendrá nada pero a medida que el usuario llena los datos, los elementos se verán organizados según su sección. 2.4 Arquitectura de
Diseño Web la información
Mapa de Navegación
2.5
Navegación
Barra Home
Piezas de Promoción
Conócenos
Cómo usar la página
Log in
Campos de inscripción
Sing In
Acceso a la cuenta
Acerca de su creación
Columna izquierda
Diseño Web
2.5 Mapa de Navegación
Mapa de Navegación
2.5 Cuerpo Columna izquierda
Footer
Mesa
Redes sociales
Calendario
Deberes
Ajustes
Por meses
Todas
Notificaciones
Por semanas
Críticas
Perfil
Exámenes
Reportes
Soporte técnico Diseño Web
2.5 Mapa de Navegación
Estrategia de Comunicación
2.6
Como estrategia de comunicación para el lanzamiento de nuestra página web se piensa hacer una campaña por medio de Facebook, principalmente dirigida a los estudiantes de Barranquilla de modo que estos vayan conociendo lo que ofrecemos. Reforzado con piezas gráficas y pequeós videos infográficos los cuales muestren la versatilidad de la página. También se verán reveladas estas piezas a través de Instagram.
Diseño Web
2.5 Mapa de Navegación