svillarroelz/scl020-card-validation

Card Validation: Felices Mascotas

En nuestro proyecto de Card Validation decidimos realizar la simulación de una página de venta de productos para mascotas, está enfocado a dueños de animales domésticos que optan por comprar alimento y otros productos de manera online, con un formulario básico que permite el ingreso de datos para realizar la compra y despacho de sus productos, realizando la validación de su tarjeta de crédito como paso final en su proceso de compra.

Prototipos:
1.- Prototipo de Baja fidelidad:
Aquí determinamos que íbamos a trabajar simulando un carro de compras para productos de animales, en donde todos los pasos previos a la compra ya fueron realizados por el usuario y solo mostraremos los productos que el usuario se decidió a comprar, para pasar al proceso de compra y validación de datos.

2.- Prototipo de Media fidelidad:
En este prototipo decidimos que vamos a trabajar con 2 pantallas, además determinamos que vamos a incluir espacios de navegacion e hipervínculos (que en la realidad, para este proyecto, no son funcionales) Agregamos espacios de búsqueda, botones e información mas detallada de lo que queremos lograr de manera mas ordenada.

3.- Prototipo de Alta fidelidad:
Una vez que logramos familiarizarnos con figma, creamos nuestro prototipo definiendo colores, texto y los lugares donde van nuestros botones, hipervínculos e imput para recibir la información que le pediremos al usuario para validar nuestra trajeta. También buscamos los dibujos que usaremos en nuestra pantalla dandole un aspecto mas amigable para el usuario.

Haz click aquí para ver el prototipo en tu navegador.

Resultados
1.- Primera Pantalla:
Todo el encabezado de nuestra página es fijo (incluido el navegador, ya que los hipervínculos realmente no redireccionan, pensamos que visualmente caracterizaban de mejor forma una página web real). Además hicimos que el logo (la pata) nos redireccione siempre al index. Luego dividimos la página en 2 partes, el lado izquierdo es estático ya que nos proporciona información ficticia de una compra. Por otra parte, el lado derecho recopila información, en donde guardamos los datos de "Nombre" y "Apellido", le damos formato al rut, validamos los radio-buttons y validamos el check-box. La mayoría de estos eventos suceden al presionar el botón siguiente.

1.- Segunda Pantalla:

En esta segunda pantalla decidimos mantener el mismo encabezado de la página anterior. Siguiendo la misma estructura de la página 1, dividimos la página en 2 partes, en donde el lado izquierdo realiza la validación de la tarjeta de crédito solicitando diferentes datos al usuario y el lado derecho simula visualmente una tarjeta física completando los datos proporcionados por el usuario (datos rescatados de la pantalla 1 "Nombre" y "Apellido"). La validación de la tarjeta se efectúa presionando el botón "pagar" y devuelve la información necesaria al usuario en caso de poder comprar (tarjeta válida) o en caso de no poder comprar (tarjeta inválida).