DialyUI #002: Credit Card Checkout

Today's challenge was to work on a credit card checkout.

I didn't have a lot of spare time today - otherwise I would have loved to prototype more of the checkout experience and perhaps GIF the interactions. Particularly the camera icon in the card number field...

So I stuck with the minimal amount of information you'd need to input, presented in as clean a way as possible. Maybe it's too subtle with the active highlight though - would love any feedback!

In a real world scenario, I'd prototype this amongst the rest of the checkout flow with users, in a lot lower fidelity, and one of the goals would be to find out if this credit card screen makes immediate sense. But hey this is DailyUI so I get to flex raw visual skills! 💪🏼

Find me on Twitter.