Groceries Cart
When shopping groceries, you have different needs and concerns than when ordering a pizza for dinner. At PedidosYa we had to face this whole new experience when expanding our product to groceries shopping as well, the journey was similar to food ordering but different at the same time with its own needs.
By taking part on this new focus of the company, me and my team were given the task to review the cart experience for the groceries flow in order to facilitate the purchasing for our users.
🥑 The groceries cart
In our shopping journey, the Cart screen is set between the Ordering flow (shop profile and its sections) and the Checkout screen (payment and delivery options). This screen sums up all the items added to the order and the amount to pay, so users can review it and make some final changes like adding units or deleting products.
When we took this project the cart used for groceries orders was the same used at the moment for food ordering, and we needed to know what peculiarities made this experience different.
What the Data told us
When analyzing the data we found out that for the groceries orders the time users spend on this screen was higher than in food orders, which was correlated to the fact that the average cart size and the edits on it where also higher as well. Here we could inferred our firsts two hypothesis:
- As users had bigger carts the list of items was larger as well, and it took them more time to scan it all to review and continue.
- As groceries carts are more likely to have some edits, the edition flow may be taking longer than needed for larger carts.
Once we had this assumptions, we compared it to some users insights gathered by another team before on a project about the Cart & Checkout experience. In some deep dive interviews they found two major points that validated our hypothesis.
First that users take their time on this screen to review what exactly are they buying, and that the current UI component for the list item was kind of just plain text and hard to quickly scan when having too many items.
The other point was that they see the edito flow kind of frustrating and long, specially when they need to edit more than 1 or 2 items. Many users stated that they would just delete the whole cart and start from scratch.
Framing the problem
After collecting all information we understood that we were making it difficult for our users to accomplish the main goal of this screen: review, edit and confirm. We needed to improve the edition functionalities to assure a seamless editing flow, and work on the cart list UI to help the scanning and reviewing of items.
Even if these issues were not exclusive to the Groceries experience, they never came up on carts from food orders since edits are rarely made and its average size is of 2 or 3 items. This new focus exposed the flaws in our cart screen and urged us to improve the experience we deliver at this point of the journey.
🛒 New cart experience
When solving this two issues, the editing and the list UI, we realized that both goals could be met by redefining the cart item component.
Recognizing at a glance
On terms of the scanning and recognition of items we knew relying on reading some text description was not efficient, specially on groceries products that have larger names. We needed to make them easy to identify with just a glance, switch from reading to seeing. In order to do so, we redefined the item card by focusing on a photo of the product rather than the name.
Editing with a tap
On the other hand to fix the editing issue, we knew that editing needed to be intuitive, fast and in context with the products to edit instead of a separate mode. Here we opted to use the number of units already displayed on each item and make them editable right on the same card, avoiding so sending the user to another screen o switching them to an edition mode.
Output & outcome
By combining these two elements on the same component, the output was a much complex card but at the same time a more efficient one, by giving the right information and interactions needed to the tasks to be done on this screen. The overall list of the cart seems larger than the old one, but more recognizable when scanning and intuitive to interact with.
After being implemented on the product, the outcome of the solution was significantly positive:
- Time to order dropped considerably, exposing the issues this screen had for the users before.
- Carts with deleted products were reduced abruptly. Our hypothesis here is that on the old edit mode, users struggling to edit units of a products ended deleting it and adding it again instead.
- At the same time, the sessions continuing to the checkout screen increased, which tell us that this screen is no longer an obstacle for users to place their orders.
🎒 Take aways
The cart exercise was an interest one since there were no problem with this screen until we introduced groceries shopping on the app. Only on this context the flaws and issues on it started to urge on our customers and reflect on the data, leading us to analyze and design a new solution to smooth up this step of the journey.
Once again, the key to solve this issue was to focus on the tasks the users goes through on this screen: we only needed to frame it and work towards that direction to success.
