A fridge, some bread,
and a lightbulb, please!

I worked as a UX researcher and designer on this project for Auchan Hungary. They wanted to introduce non-food products to their long-working webshop. This sounds deceptively simple, but the previous site was not designed with the storage, delivery, and availability constraints of non-food products in mind. The challenges become apparent at checkout.

Say you want to buy a fridge, some bread, and a lightbulb in a single order. You would like the fridge to be delivered to your home. It can arrive five working days later at any time from 8:00 - 16:00. Bread delivery needs to be scheduled in a two hour time slot this week. It might be possible that your chosen bread is not available since it is an FMCG (fast-moving consumer goods) product so you should also pick acceptable substitutes. The light bulb is small and standardized, but since it is in a different storage facility and a different delivery company is responsible for it, there is no promise it can be scheduled to arrive with your bread. Auchan wanted to know how to communicate all that without losing their customers.

To begin with I restructured the information architecture of the available products and their categories. I had the constraint that I couldn’t change the UI framework, so I had to fit a mix of food and non-food products into relatively few categories.

User interviews and in-person card sorting tests helped a lot here. I watched users group the categories and name them. We learned a lot how users think, how it might be better to rename some categories, and how their overall background effects the way how they think about certain labels. Housewives with children are a great example: many times they created broad groups like “Kids” or “Children” including things like “Books” or “Games”, which are clearly not exclusively children's products. These insights helped me put together a strong architecture for the new site.

Turning to the checkout process, my main idea was to allow multiple carts per user by delivery type. In the real world, you would be pushing three carts in front of you and placing items into them based on their delivery status. Of course online the system does this for you automatically. Users can check their carts, including delivery notes, on every page using a cart preview popover. I experimented with different color codes and icons for carts in the prototype. In the desktop version a calendar for expected delivery is always close at hand.

Another twist in the story was that payment had to be different across carts. For food products you could use your Auchan loyalty card, while for other types of goods you cannot pay in cash. At the payment page I had to emphasize the differentiation and make it as smooth as possible since the user sometimes had to pay more than once.

User research helped a lot to iterate on the initial ideas and after several rounds I could finalize the wireframe. It was a good experience to see that even such a complicated process with lots of limitations can be made clear to users. I tested with very different people from all social classes and backgrounds and did my best to make it work for everyone.