How to group the delivery slots in the checkout?
I'm working on the online grocery shop, flexible delivery option is one of its key strengths. This interaction happens as the step of the checkout process.
I'm thinking of 2 options.
A. The buttons are aligned similar to the calendar view in Outlook, the size of the button represent the length of the timeslot. Each button has the time and the delivery price.
B. The price and short description are placed as subheaders on top of the buttons. The buttons show only the timeslot and have the similar size.
Which would you choose and why?