Descripción General del Proyecto de UX Alarma App - isinning1/MISW-4302-UX GitHub Wiki

Proyecto de UX Alarma App

Descripción principal del proyecto

Establecer, a partir de la tecnología, el rediseño creativo e innovador de la aplicación de alarmas nativa del celular, de modo que cualquier usuario de la misma esté en capacidad de gestionar alarmas y recordatorios según sus necesidades y objetivos personales.

Objetivo del proyecto

Aplicar los conocimientos teóricos del Diseño de UX, Diseño de UI y Diseño de interacción en la planeación técnica de una propuesta creativa e innovadora como solución a una necesidad real y común entre los ciudadanos colombianos.

Condiciones mínimas

Para cumplir con los objetivos del proyecto cada equipo debe desarrollar una solución bajo los siguientes criterios:

  • El proyecto se desarrolla en parejas, y cada uno debe participar de todas las actividades, métodos y procesos.
  • Las funcionalidades a planear deben estar distribuidas equitativamente entre una plataforma web y una aplicación de celular.
  • La solución debe aprovechar, de alguna manera creativa, las ventajas que ofrecen las características de hardware del dispositivo. Estas incluyen, sin limitarse a: Cámara, micrófono, magnetómetro, acelerómetro, giroscopio, bluetooth, etc.
  • La propuesta debe aprovechar, de manera creativa, las ventajas que ofrece la conexión de la aplicación con servicios cloud. Los cuales incluyen, sin limitarse a: almacenamiento de archivos, bases de datos, inteligencia artificial, data lakes, microservices, etc.
  • No se llevará la implementación del proyecto más allá de las maquetación en código de las interfaces, animaciones e interacciones. Esto significa que no se implementarán funcionalidades, conexiones con backEnd ni visualización o captura de datos en el frontEnd.

Descripción General del Proyecto

Para lograrlo, cada integrante del equipo de UX, desarrollará:

  1. Metodologías de UX Research para identificar el uso actual y las necesidades no satisfechas de los usuarios respecto al uso de la app de alarmas del celular.
  2. Apoyarse en características de hardware y servicios cloud para plantear soluciones que excedan las funcionalidades actuales de la app de alarmas.
  3. Establecer y planear los requerimientos funcionales de la solución a través de artefactos y mapas de UX Design.
  4. Desarrollar el diseño de UX y de Interacción de las funcionalidades seleccionadas.
  5. Desarrollar dos prototipos (web y mobile) de bajo nivel de fidelidad y probar su validez con usuarios reales.
  6. Diseñar un Sistema de Diseño (Design System) como fundamento para la implementación de las interfaces para web y app móvil.
  7. Implementar dos prototipos interactivos (Web y mobile) de fidelidad alta no funcional.
  8. Desarrollar maqueta en código de una funcionalidad del frontend para la aplicación web. Cada miembro del equipo de UX. Implementará tecnologías de HTML, CSS y Javascript o frameworks de desarrollo conocidos. No se debe codificar más de 3 pantallas web por integrante.
  9. Desarrollar maqueta en código de una funcionalidad del frontend para la app móvil. Cada integrante del equipo de UX, debe implementar en alguna tecnología nativa, híbrida o frameworks de desarrollo multiplataforma de su predilección. No se debe codificar más de 3 pantallas por integrante.

Fases a desarrollar por módulo

Módulo 1 Módulo 2 Módulo 3
1 4 7
2 5 8
3 6
Comprensión del problema y las necesidades de los usuarios para el Planteamiento de una solución creativa. Propuesta de creatividad visual y la respectiva estandarización de componentes como base de la diagramación y composición de las interfaces necesarias para los prototipos interactivos de web y mobile. Codificación en HTML, CSS y Javascript de las interfaces del módulo web, así como la codificación en XML o JSON de las interfaces de la aplicación mobile.
Diseño de la solución y su correspondiente validación con usuarios.

Módulo 1

Semana Actividades Actividades y entregables
1 UX Research:Definición del problema principal. - Design Scope canvas
2 UX Research:Definición del problema principal.Comprensión de las necesidades.Desarrollo del User persona.Mapa de las acciones del usuario. - Documento consolidado de la Investigación de usuarios.- User persona card- User journey map
3 UX Strategy:Propuesta de solución.Diseño de Interacción de Usuario.Priorización de funcionalidades. - Mapa de sitio- Mapa de navegación- Lista de funcionalidades- MVP list
4 Interaction Design:Arquitectura de información.Flujos de interacción.Prototipos físicos. - Diagramas User Flow- Prototipo en papel- Documentación en video de interacción de un usuario con el prototipo en papel

Módulo 2

Semana Actividades Entregables
4 UI Design:Diseño de wireframes.Prototipo de navegación.Propuesta de estilo.Definición de componentes visuales. - Wireframes de la aplicación web- Wireframes de la aplicación móvil- Style tile- Design System
5 y 6 UI Design:Propuesta inicial.Diseño de MockUps.Prototipo interactivo. - Propuesta de pantalla principal- Interfaces de la aplicación web- Interfaces de la aplicación móvil- Prototipo interactivo

Módulo 3

Semana Actividades Entregables
7 UI Development:Maquetación de interfaces web.Animación e interacción de interfaz web. - Maqueta navegable de aplicación web.- Maqueta navegable de aplicación mobile.
8 UI Development:Maquetación de interfaces mobile.Animación e interacción de interfaz mobile. - Maqueta navegable de aplicación web.- Maqueta navegable de aplicación mobile.

Evaluación (proyecto individual)

Semana Entregable evaluable Tipo de evaluación Porcentaje
1 No Aplica No Aplica No Aplica
2 Documento consolidado de la Investigación de usuarios. Diagrama User Journey. Hetero evaluación 35%
3 Video de interacción de un usuario con el prototipo en papel. Diagrama de flujo de interacción y Lista de funcionalidades priorizada. Hetero evaluación 35%
4 Wireframes en blanco y negro de las pantallas del proyecto. Hetero evaluación 10%
5 Propuesta de estilo del proyecto y Sistema de diseño. Hetero evaluación 20%
6 Propuestas visuales con el estilo final. Prototipo interactivo de las pantallas de la aplicación. Hetero evaluación
7 Maquetación de las interfaces en código HTML. Maquetación de las interfaces en código nativo de dispositivo móvil. Hetero evaluación
8 Front End web y móvil codificado como prototipo interactivo. Hetero evaluación 35%