Fixing things #1: Starbucks app

2025/03/11 #uiux

Welcome to the first installment of "Fixing things", my new semi-regular mini-series where I'm planning to showcase and try to suggest fixes for those little UX/UI hiccups we come across in our everyday use of technology. I want to keep each entry in this mini-series as concise and to the point as possible so I can't use the excuse that it "would take too much time to write a blog post about every little thing that bugs me". So let's stop wasting any more time and let's get started!

Today's inaugural "Fixing things" is about the Hong Kong Starbucks app on iOS (turns out the UI of Starbucks apps in different countries differ from another!). The issue I want to fix about this app is the way it handles one small detail I recently interacted with: choosing a default card for payment. Starbucks let's you add multiple "Starbucks Cards" (for example gift cards) to the app that you can then use to pay for your orders. When I realized my default card was empty I wanted to switch to a different one right away but this is when I realized that the toggle to remove the empty card as my default was annoyingly disabled.

Why show me this toggle when I can't actually change what it is set to? I figured that I had to go back to the prior screen showing all of my cards in a list view. Surely there would be a way to switch between default cards there, right? Right? No, there was not. I was completely baffled by this but moved on to another card to check if something in the app was broken. Finally, I figured out that the only way to change your default card was to open the details view of a non-default card and tap the toggle there. Who knew?

How should we improve this interaction? In my opinion using disabled states is almost never a good idea. Users might not realize that the input is disabled which can make them think your input is broken, get frustrated and give up. This is why it is important to let the user remove a card from being the default by tapping the toggle. The idea that the app cannot handle not having a default card is not an excuse either. This could be worked around by showing a popup forcing the user to choose a different card as default. The more important change however is to lift this functionality entirely from the card details screen to the card overview screen. This makes way more sense as the mental modal for this particular interaction is that the user chooses one out of all their Starbucks cards as their default.

The mockup I've created shows one way how this could be implemented without changing the current overall design and layout of the app in question. If a bigger overall change of this screen was acceptable of course an even better solution could be found. One cleaner option for example could be to add a "choose default"-button to the bottom of the screen and only show the default buttons on the cards once this mode is active.

Funnily enough, I did stumble across a relevant screenshot of the Starbucks app in the US after writing this. Its designers seem to agree with my overall idea of moving this interaction to the card overview screen.