I conducted usability tests with three participants who have utilized Airbnb in the past. The following are iterations I made based on the results.
Adding a detailed breakdown
Before
After
Some of my participants suggested having an itemized list so they can quickly verify their selected meals. To address this, I incorporated a dropdown in the price breakdown on the right. In addition, based on feedback from 2/3 of my participants, I added information about a delivery fee.
Editing selections
Before
After
Two participants suggested adding an aggregated list of the ingredients, where, for instance, if three recipes require one onion each, the list would specify three onions. However, this approach resembles services like Instacart, focusing on shopping for individual items. I opted against this, as my research revealed that user pain points were centered around meals rather than individual items (such as the distinction between ‘chicken noodle soup’ and just ‘chicken’).
As a happy medium, I made it more clear that the recipe/meal selection cards were clickable. In the original design, clicking on the card would open up a detail page, providing users with a comprehensive view of the ingredients to be delivered.
With the redesign, I offer more affordance to these cards by introducing an ‘Edit’ button. And particularly for the ingredient delivery service, I added a dynamic subheading that displays the number of selected ingredients. This serves as a cue that clicking on the box will allow users to view and edit their chosen ingredients.
Selection confirmation
Before
After
One user expressed a desire for confirmation that a meal/recipe was successfully added to their cart. This adjustment aligns with the usability heuristic of ensuring visibility of system status.
In the original design, the total was updated in the bottom banner, but this was very subtle and could be easily missed.
In the redesign, once the user adds an item, the current modal closes, and a drawer slides open. This experience is consistent with many e-commerce websites, providing a familiar interaction for the user. Unlike the original design, the 'cart' drawer in the redesign features two CTA buttons: 'Continue browsing' and 'Confirm selections' instead of the original single 'Confirm' CTA.