Day 02 - Credit Card Checkout
Postet av Camilla den 31. Jan 2024
Daily UI 100 Days Challenge
Credit card checkout
💬 Prompt
Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.
🎯My approach
I decided to create a mobile version of an online clothing store, presenting the credit card checkout page as instructed. I wanted to integrate all the key elements, such as product details, shipping costs and of course the credit card form —all combined on a single page for a streamlined user journey.
🎨Design focus
- Keeping a minimalistic structure and visual consistency.
- Visible payment controls/no hidden features, which means that the user has complete control over the product details and the payment options during the purchase.
- Seamless credit card integration with clear instructions and display of the total cost upfront to build trust in the users online transaction.
Low Fidelity Wireframe -> High Fidelity Wireframe
Check out the mockup in Figma here!
Kommentarer
Siste fra Camilla
![Day 08 - 404 Page Design](https://azurecontentcdn.bloc.net/froala/200000346/7939/2024/3/14/screenshot-2024-02-04-at-16.23.45.png?autorotate=true?autorotate=true&width=100&height=100&mode=pad&scale=both&anchor=center)
Day 08 - 404 Page Design
14.03.2024
![Day 07 - Settings](https://azurecontentcdn.bloc.net/froala/200000346/7939/2024/2/17/2024-02-17-16-09-50-window.png?autorotate=true?autorotate=true&width=100&height=100&mode=pad&scale=both&anchor=center)
Day 07 - Settings
17.02.2024
![Day 06 - User Profile](https://azurecontentcdn.bloc.net/blog/200000346/7939/2024/2/7/1707328286388.png?autorotate=true&width=100&height=100&mode=pad&scale=both&anchor=center)
Day 06 - User Profile
07.02.2024
![Day 05 - App Icon](https://azurecontentcdn.bloc.net/froala/200000346/7939/2024/2/7/screenshot-2024-02-04-at-16.23.14.png?autorotate=true?autorotate=true&width=100&height=100&mode=pad&scale=both&anchor=center)
Day 05 - App Icon
07.02.2024
![Day 04 - Calculation](https://azurecontentcdn.bloc.net/froala/200000346/7939/2024/2/5/screenshot-2024-02-04-at-16.23.02.png?autorotate=true?autorotate=true&width=100&height=100&mode=pad&scale=both&anchor=center)
Day 04 - Calculation
05.02.2024
![Day 03 - Landing Page](https://azurecontentcdn.bloc.net/froala/200000346/7939/2024/2/4/screenshot-2024-02-04-at-16.22.45.png?autorotate=true?autorotate=true&width=100&height=100&mode=pad&scale=both&anchor=center)
Day 03 - Landing Page
04.02.2024