marcoslopezm / introfrontend

Introducción a Desarrollo Front-End

Para las prácticas de esta semana se tendrá el siguiente caso y a raíz de eso, se deberán sacar los puntos mencionados abajo.

Caso: Abogabot

Descripción

• En un despacho de abogados se quiere automatizar las demandas de sus clientes, esto lo harán a través de una página web llenando un formulario.
• Después de llenar el formulario se manda al proceso de pago para finalizar la transacción.
• Para dar seguimiento a la demanda, el cliente crea una cuenta en la plataforma y verá el seguimiento de cada una de las actualizaciones del proceso legal.
• El administrador recibe el pago y debe ser capaz de verlo en un tablero para ver la cantidad de ingresos recibidos.
• El administrador actualiza el proceso de la demanda y agrega comentarios.
• Al usuario le llegan notificaciones al correo para saber el avance del proceso.
• La página debe ser responsive para poderla ver desde el celular.
• La preferencia de colores del cliente es azul marino y blanco, pero acepta propuestas.

---

Requerimientos

1. Cuando el usuario ingrese a la página web (PC/móvil), tendrá la opción de iniciar sesión, registrarse o directamente realizar la denuncia.

2. Si el usuario opta por realizar la denuncia, tendrá la opción de ver una guía rápida de cómo rellenar el formulario, así como el formulario en sí.

3. Al finalizar el rellenado del formulario, se genera un documento con la denuncia, y el usuario iniciara sesión o se registrará en la página.

4. El usuario selecciona el método de pago para que se realice el pago por los servicios de la página.

5. El administrador podrá ver un tablero con las denuncias (sin seguimiento, en progreso y completadas), el número de pago y el total de ingresos. Además, tendrá la opción de agregar comentarios, actualizaciones, etc. para las denuncias. Con cada uno de estos cambios, el usuario recibe una notificación por medio de correo electrónico.

---

Buyer persona

---

Público objetivo

---

User Experience - Wireframe

A continuación se muestra el wireframe de la página web. Se muestran las páginas más importantes del sitio web: página de inicio, página con el formulario de denuncia, página de inicio de sesión y página de proceso de pago.

Notemos además que los colores del sitio web cumplen con los requerimientos del cliente.

---

User Interface

Para demostrar que el sitio web es responsivo, este apartado de User Interface (UI) se mostrará para un teléfono móvil.

---