Zeek Shopping Cart Feature

Purchase multi-brand gift cards per transaction

For four years, since the beginning of Zeek, there was no shopping cart. This meant that users could only buy gift cards from one brand. If they wanted to buy from several brands, they would have to go through the checkout flow several times. If a user added an item to their cart and left the page, when they return to the page their selection would be nullified.

I was the lead designer of the shopping cart, working closely with the PM, and with the Marketing team to define this feature, the scope for phase 1 and phase two and how the requirements would translate to the design of the website and the mobile apps. Before beginning with the design, I presented a concept with what could be done with this feature, and what opportunities could it have for the marketing – such as smart pushes and tailored Facebook ads.

The Complexity

The shopping cart feature has inherent complexity as it affects many parts of the web app – the header, brand page, checkout, and purchase history, to name a few. All these had to incorporate the multiple brands purchase.

Working on this feature, my colleague and I focused mainly on the UX as the UI had to adhere to the styleguide of the product which hasn’t been changed for over four years. At the time of working on the cart feature, we had only two front end developers and so changing the styles was not possible.

The Process

When designing a screen, I sometimes like to place all necessary components on the screen and look at the possible ways it can be arranged, hierarchy-wise. I connect the screen to the rest of the flow and check if there are components that are redundant.

Once I had all components I consulted with the PM regarding information we did not need to present in the cart, and what information had to be accessible, but in a more subtle way. This is the final design of the cart – the explanatory text appears when hovering on the icons, and all the necessary information is presented in a clear, easily scannable manner.

The Challenges

One of the challenges I had was deciding in which order the items in the cart would be presented. One option is showing the items as they were added, chronologically. The second option was grouping the items per-brand.

The benefit of the first option was that the user could easily find the latest item they’ve added, and the benefit of the other solution was that they could easily understand what is the value of all gift cards they’ve chosen from one brand. Because the items couldn’t be summed up as there are physical and e-gift cards that are handled differently by the system, and we wanted the users to easily know the sum per brand, we went with the second option.

Error Handling

Another issue was error handling. Zeek has several restriction rules, some by the brand’s request and some because we had limited stock which could be purchased by another user up until the current user started the checkout flow. Checking the user’s cart for errors was done once the user clicks on the checkout button. We wanted to find the best way to present these errors.

The options were – to show the list before the available items, after the available items, or inline. Both for order purposes and because of dev limitations, we decided to keep the error messages inline. However, if we had the resources I believe the correct way to present it would be after the available gift cards, so the user could focus on what they are checking out with, as opposed to having to read carefully one item at a time to see if it has errors or not.

View Before and After Prototypes

Before CartAfter Cart