Design Diary — Online Grocery
I fell in love with Whole Foods Market, especially Amazon prime for free delivery service. One day, I planned to cook Sirloin tomato soup, I decided to buy some tomatoes, onions, and potatoes on Amazon Prime. However, the search results totally confused me.
Problem
There were three similar tomato pictures for different varieties. I have no idea about the difference between them from the pictures.
I clicked the first one, the page told me that the average weight for the type. But the information on the red rectangle was too complicated for me to obtain the exact weight of each tomato and frustrated me. There was no direct information about weight. Only the estimated total price I can see. I had to calculate one item weight by myself. It is cognitively overloaded for general customers with careful calculation.
Meanwhile, I have no sense about the exact size of a tomato. I felt frustrated about the exact size of each tomato, which would mislead me to order other materials size to finish my recipe. Finally, I got three small tomatoes, two small potatoes, and one big onion. It was totally impossible to make correct sirloin tomato soup without knowing material exact sizes.
Redesign
According to the problem mentioned before, then I redesigned the page for an item. By putting a direct description of the item and familiar size reference, it will reduce the cognitive load for users to obtain the weight and size of items.
For instance, a reference chart with a male’s fist is put beside the target item, it is easier for users to understand the exact size of the item directly. Thus, users will buy online grocery with their expectation!
