This was my second prototyping exercise. Coming from the first one I was fresh from learning the auto animate iteration in XD. Being a beginner, I had a little pride in being able to do that first iteration(apologies for not mentioning that in my earlier post). This challenge was to create a credit card checkout design.
The Design Inspiration
Coming into this project, I knew that I would have to make iterations that actually looked "purchasey". So I got to thinking about how I would make the iteration make the user feel like he/she is actually purchasing something from an online store. I figured out that I would have to start from a product in order to completely show the entire procedure from start to finish. I wanted so badly, to humanize the movement of the iteration for better design results. As for the UI, I wanted a modern simple feel. Using card design but with the product images slightly offset so as to make it easier to iterate using auto animate.
The Screens
The screen were so many so I'll just highlight the main ones that showcase the process.
The start screen of the app
The product detail page with optional sliders for quantity and type
The credit cards page
The card details
Response page
Iteration design
As I said earlier, I wanted the app to feel like a purchase app so I decided to go with the shopping card feel where after entering the details the product image drops into the cart making it look like it has been picked off the shelf of a store. The final result is as follows
Full iteration
No comments:
Post a Comment