This project consists of a web application that allows users to validate a credit card number using Luhn algorithm. A message is displayed on screen when the card number is valid or not, once the card number is validated, numbers except for the last four digits are masked. Only numbers between 13 to 18 characters are allowed, since cards numbers length falls into this range.
Figure 1. Final project image
-
Who are the main users of this product?
The target users are those who generate a card number through a credit card generator, either to test web applications or to access to free trials without providing a real card number.
-
How this product is solving their problems?
This product is providing the user the security that the generated card number is valid in advance when used in an application or website.
-
Web design sketch
A sketch was made on paper, then Figma was used to make the first prototype.
Figure 2. Web design sketch
Figure 3. Figma prototype
-
Feedback summary and prototype changes
In the feedback was suggested to add a margin to the buttons so they stand out from the background color. On the final prototype a black border was added to both buttons and the text inside them was changed from white to black.
-
Final prototype
Figure 4. Final Figma prototype
Figure 5. Final Figma prototype / valid card number
Figure 6. Final Figma prototype / invalid card number
Figure 7. Final Figma prototype / please enter a card number
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent