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á:
- 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.
- Apoyarse en características de hardware y servicios cloud para plantear soluciones que excedan las funcionalidades actuales de la app de alarmas.
- Establecer y planear los requerimientos funcionales de la solución a través de artefactos y mapas de UX Design.
- Desarrollar el diseño de UX y de Interacción de las funcionalidades seleccionadas.
- Desarrollar dos prototipos (web y mobile) de bajo nivel de fidelidad y probar su validez con usuarios reales.
- Diseñar un Sistema de Diseño (Design System) como fundamento para la implementación de las interfaces para web y app móvil.
- Implementar dos prototipos interactivos (Web y mobile) de fidelidad alta no funcional.
- 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.
- 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% |