Delivery to address & Store pickup - Ecommerce app design.
Project Overview
'Why' - A short explanation about the project.
Product Screens - Displaying the two buttons for delivery options.
Address Screen - Section to fill in the delivery address.
Search Results - Display after searching by address.
Entire Prototype - Overview of the complete prototype.
Microinteraction - Details on specific microinteractions within the interface.
1. Why?
In the product page, I created a section dedicated to checking the delivery options.
The client could be interested in the delivery details before deciding to order.
This option is shorter because all the information is available before starting the checkout.
2. Product Screens
3. Address Screens
4. Search Results
5. The entire flow - Prototyping ↓
6. Microinteraction ↓
To avoid a frozen screen, clicks have an instant reaction for the user.
↓ Animation for the 'Delivery to address' button after the address field is filled in.
This action shows the user that the selection was made and provides a location preview.