Katas realizadas por Diego Armando Peñaloza Juárez para la primera semana de FrontEnd: Intro a FrontEnd para Launch X.
Es un despacho de abogados que quiere automatizar las demandas de sus clientes, esto lo harán a traves de una página web llenando un formulario. Al momento de llenar el formulario se manda al proceso de pago para finalizar la transacción.
Para dar seguimiento a su demanda, el cliente crea una cuenta en la plataforma y verá el seguimiento de cada una de las actualizaciones del proceso legal. El administrador del sitio recbe la notificación de una nueva demanda y con los datos llenados del formulario se crea automaticamente el documento legal en formato word para empezar el proceso.
El administrador recibe el pago y debe de ser capaz de verlo en un dashboard para ver la cantidad de ingresos recibidos. El administrador actualiza el proceso de la demanda y agrega comentarios en cada paso del proceso.
Al usuario le llegan correos de notificación para saber el avance de su proceso. La página debe de ser responsive para poderla ver desde el celular. La preferencia de colores del cliente es azul marino y blanco, pero acepta propuestas.
Los requerimientos son las peticiones basicas solicitadas por el cliente para el tipo de aplicación que pide. Se realizo el siguiente documento con los requerimientos solicitados donde se incluye el alcance del proyecto, el proposito, la descripción general, usuarios y los requerimientos funcionales y no funcionales.
Para nuestro buyer persona se utilizo la plantilla proporcionada donde se especifico el buyer persona ideal para el producto, donde se obtuvo el siguiente resultado.
Para nuestro Publico Objetivo se utilizo una plantilla en Miro especifica para determinar esta fase del proceso, donde utilizamos identificadores demograficos, geograficos y psicometricos.
Enlace en Miro: Publico Objetivo en Miro
Para la creación de nuestro Wireframe utilizamos igualmente las plantillas genericas de Miro que nos facilitan a crear nuestro Wireframe. Nuestro boceto inicial de nuestra aplicación en versión movil tiene una pinta del siguiente estilo.
Enlace en Miro: Wireframe en Miro
Para nuestro UI se utilizo la herramienta de Figma donde diseñamos nuestra interfaz para la pagina web utilizando estilos y formatos semejantes a lo que creemos el cliente desea. El resultado lo vemos en el siguiente enlace:
Enlace en Figma: UI en Figma