/SCL016-card-validation

MarketAPP 💳 || First Front End specialization project for Laboratoria G-16. A basic card validation exercise with first approach to HTML, CSS and JavaScript.

Primary LanguageHTML

PROYECTO MERCADOAPP

Más de alguna vez me ha pasado que estoy comprando en un minimarket o en un mercadito cerca de mi casa y al momento de pagar en la caja me doy cuenta que se me quedó la billetera en mi casa o que no aceptan tarjetas y yo no ando con efectivo.

MercadoAPP nace con la idea de mejorar la experiencia del usuario al momento de comprar en tus minimarket más cercanos y a los cuales concurres habitualmente. Es una aplicación móvil que te invita a hacer de tu compra pequeña algo más expedito, rápido y seguro. Solo necesitas descargar la app en tu teléfono, registrarte y linkear tus tarjetas predilectas y dejas que el código QR haga el resto.

ValidacióndeTarjeta

El público objetivo de esta app son personas entre 25 y 45 años; que les gusta la tecnología y que utilizan su celular como una herramienta que les facilita los procesos cotidianos y la vida en general. Personas que no les gusta andar con tantas cosas cuando salen y que prefieren la inmediatez y aprovechan que los celulares inteligentes sirven completamente para eso.

PROTOTIPO

Lo primero que hice fue buscar una forma amigable de representar la interacción que uno tiene con los mercaditos de barrio. Quería que la app no solo interactuara facilitándote pagar sin tener tu tarjeta física si no que también te agilizara el proceso de compra de otras formas: que te diga dónde tienes mercaditos cerca para comprar, que te cuente cuánto llevas gastado en el mes, que te permita tener un historial donde puedas ir viendo lo que compras. De esta manera no solo hace rápido el poder comprar si no que también te ayuda a organizarte y hasta medir en qué gastas normalmente. Para eso utilicé diferentes plantillas en Figma que representaran el acceso a esta app y que mediante los botones puedas avanzar hacia la validación de tarjeta, que en el caso de mi app está representada en integrar una tarjeta nueva y comprobar que sea válida o no.

Prototipopapel

El prototipo en papel buscaba ser algo fácil de leer visualmente, con botones que te guíen; sin mucho texto. Que el botón de QR para "pagar" fuese más grande que el resto. Sobre la función de validación, esta se encontraría en la opción "Ingresar nueva tarjeta".

PrototipoFigma

Luego lo pasé a FIGMA donde agregué otras funcionalidades que me dieron a través de Feedback con mis compañeras, como agregar un botón que te pudiera devolver hacia atrás por si te equivocabas o te aburrías y también un botón que te permitiera localizar mercaditos cercanos. En un siguiente feedback, me recomendaron cambiar la font y que ésta fuese parecida o acorde al logo, así otorgaba más unidad a la App.

Finalmente, la App quedó así.

ProyectoFinal

https://valeriavidelam.github.io/SCL016-card-validation/src

Siento que la app resuelve la necesidad de agilizar un proceso que es bastante cotidiano y a veces por situaciones super ajenas a nosotros se nos dificulta. La idea es que sea un proyecto que evolucione con el tiempo y que vaya creciendo y mejorando conforme la tecnología y la experiencia de usuario lo permita. Que no se estanque y que en un futuro permita ir agregando más funcionalidades.