Giter Club home page Giter Club logo

katasdiegopenalozaintrofrontend's Introduction

KatasDiegoPenalozaIntroFrontEnd

Katas realizadas por Diego Armando Peñaloza Juárez para la primera semana de FrontEnd: Intro a FrontEnd para Launch X.

Caso Practico: Abogabot

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.

Practicas

Toma de Requerimientos

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.

Toma de Requerimientos

Buyer Persona

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.

Buyer Persona

Publico Objetivo

Para nuestro Publico Objetivo se utilizo una plantilla en Miro especifica para determinar esta fase del proceso, donde utilizamos identificadores demograficos, geograficos y psicometricos.

Image text

Enlace en Miro: Publico Objetivo en Miro

Wireframe (User Experience)

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.

Image text

Enlace en Miro: Wireframe en Miro

User Interface (UI)

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:

User Interface (UI)

Enlace en Figma: UI en Figma

katasdiegopenalozaintrofrontend's People

Contributors

diegopenalozajuarez avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.