# Proyecto Final


### Highlights:

A lo largo de tu proyecto, detecta y ten claro, para que finalmente reportes:

1) Dos limitaciones de diseño o problemas que hayas resuelto con un patrón de interfaz de usuario
2) Dos limitaciones o problemas que no hayas podido resolver aún
3) ¿Cuáles son tus próximos pasos en el proyecto? ¿Qué quisieras que tu producto tuviera próximamente?

## Entregables

### Empatizar

1) **Entrevistas y Encuestas (10%)**
Entrega los resultados de tus encuestas en porcentajes (intenta consultar por lo menos 20 potenciales usuarios a través de encuestas). Utiliza los diagramas de datos que provee Google Forms o Typeforms.
Entrega **entre dos y cinco** frases que hayas recolectado en tus entrevistas y que sean relevantes para el producto que estás creando (y por qué).

:::warning
**ENCUESTAS**

Mira este ejemplo extraído de los reportes automáticos de [Google Forms](https://www.google.com/forms/about/) en una encuesta y una serie de entrevistas que se hicieron para construir un gestor de cupones de descuento digital para un supermercado.

**Datos Demográficos**


**Hábitos de Compra**


**ENTREVISTAS**

Lee estos ejemplos de respuestas de usuarios potenciales que utilizan cupones de descuento.

> "Mi mayor dificultad es conseguir que los cupones de descuento que me dan en el supermercado no expiren sin que los use."

> "Muchas veces pierdo los cupones de descuento físicos que me otorgan cuando voy a la compra, aún si realmente me interesa comprar el producto, cuando lo voy a buscar, se me ha desaparecido."
:::

2) **User Personas (5%)**
Entrega una foto o diagrama en Figma de tu definición de User Persona. No tiene que estar del todo definido, pero intenta, cuando lo crees ceñirte a la data.

:::warning
Mira este ejemplo de un User Persona. En este caso se ideaba un producto para gestionar el trabajo de una empleada de una ONG. El enfoque fue sólamente centrarnos en sus hábitos y motivaciones profesionales, dejando a un lado las características demográficas y personales.


**:bulb: Pro-tip:** Enfocarte en el ámbito en el que el usuario percibe el problema y el contexto de la solución hace que puedas ser más asertivo a la hora de crear una Persona. No tengas miedo de dejar de lado información que no sea relevante para tu producto.
:::

### Definición:

1) **Problem Statement (5%)**
Plantea el problema de forma concisa y cuál es el objetivo de la solución que propones.

:::warning
Mira este Problem Statement para un caso de uso de Uber, Cabify o alguna plataforma de transporte de este tipo.

>Los **usuarios** que toman taxis cuando aterrizan en un **aeropuerto** necesitan una forma de transporte rápida y segura con una **tarifa y ruta predefinida** para que puedan trasladarse a su destino teniendo el control de los **costes** del traslado.

**:bulb: Pro Tip**: Plantea el problema de forma tal que envuelva tu diseño como una solución.
:::

2) **Affinity Diagram (10%)**
Recuerda que un Diagrama de ayuda a centrar un problema mediante la aportación de ideas u opiniones sobre el problema. Con la información de tu investigación, crea un diagrama de afinidad que puede ser digital (Figma o Miro) o físico y hazle fotos.

:::warning
Mira este ejemplo de un Diagrama de Afinidad bastante extenso sobre los hábitos de compra online.


:::

### Ideación:

1) **Bocetos de Conceptos a mano (fotos) (15%)**
Dibuja cómo puede más o menos verse el flujo del producto digital que va a aportar la solución. Documenta tu proceso fotografiando lo que dibujas. Recuerda que no tienes que ser el mejor dibujante ni tienes que crear prototipos muy definidos. Es preferible que seas capaz de plasmar la idea general y el flujo. Entre 3 y 5 pantallas será suficiente. ¿Recuerdas el ejercicio de La Cafeína? En el que solo pintabas dos o tres pantallas para crear el flujo de que a un usuario le sellen la tarjeta de cafés para que el décimo sea gratis?

:::warning

Mira este ejemplo de un boceto a mano que plasma la navegación.


Mira este ejemplo digital de una interfaz de usuario para Escritorio de gestión en una sola vista (sin tomar en cuenta el flujo de navegación).


:::

2) **User Journeys (10%)**
Escoge una tarea que tenga que completar tu User Persona. Entrega el User Journey del usuario para completar dicha tarea.

:::warning
Mira un ejemplo de un User Journey genérico de su día a día para una Persona que quiere hacer la compra.


:::

### Prototipado:

1) **Sistema de Diseño (15%)**
Entrega tu sistema de diseño y recuerda que debes definir:
- Colores (Configura los estilos de tus colores en Figma usando Primary, Secondary, Accent
- Tipografía (Configura tus fuentes de acuerdo al tamaño y utiliza elementos semánticos *h1, h2, h3...*
- Estilos de sombra (con un par tendrás suficientes)
- Estilos de Grid. Recuerda establecer los grids para cada soporte, Escritorio, Móvil, por ejemplo
- Componentes (crea componentes en Figma para que puedas reutilizarlos)
- Iconografía e imágenes. Recuerda añadir los iconos que vas usando o una bandeja de iconos que sientas que le puede servir a tu proyecto. También es interesante que en una página vayas añadiendo las imágenes (fotografías, ilustraciones) que formarán parte del producto
- Documenta cómo será tu producto tan fidedignamente como puedas

:::warning
Esta es una lista de páginas de un sistema de diseño mínimo.

:::

2) **Hi-Fi Prototype (15%)**
Crea unas 5-10 pantallas de alta fidelidad. Recuerda utilizar **Autolayout y Variants** y ordenar y nombrar bien tus capas, componentes y frames. Puedes hacer tu producto para escritorio, para móvil o ambas. Esto va a depender de qué tipo de solución hayas encontrado para el problema.

3) **Prototipo Navegable en Figma (15%)**
A las pantallas anteriores es hora de darles navegación. Utiliza Figma para Prototipar la navegación (cuando un usuario hace click aquí, entonces va a esta pantalla). Si tienes scroll vertical u horizontal, también puedes crearlo en Figma. Puedes compartir el enlace al prototipo directamente dándole al play y compartiendo la URL que se genera en la nueva pantalla.

:::warning

En tus ejercicios de Figma tienes un ejemplo [fácil de macrointeracciones de navegación](https://www.figma.com/file/blqm57SeBLXlRjFyjwUXqo/IxD?node-id=0%3A1).

:::

## Bonus:

1) Crea tu Case Study en Behance. Tienes estos Case Study de referencia en tu Notion
2) Crea la landing de tu producto/marca en Webflow utilizando un template gratis, publícala bajo un dominio de Webflow (para que también sea gratis) y comparte el link

## Recursos

Recuerda que tienes [estos enlaces en Notion para consultar cualquier cosa](https://www.notion.so/4f093d09f0434ce389df76f4a9e7e27e?v=c48b13a51ac748198e4806f1f1525ecb)