Dear Apple Pay UI Team

Apple, Apple Pay Suica, Apple Pay Transit, Suica, Transit

Dear Apple Pay UI Team Members,

You seem to be having some trouble redesigning Apple Pay Suica transit cards in iOS 12.2 and iOS 12.3. As a daily Apple Pay Suica user since day 1, here’s some helpful criticism and feedback, just like Steve used to do back in the day. Here we go.

  • Regular Suica: no recharge problem here
  • Commute Plan Suica: where’s the recharge button?

1) Basic Layout: why is the card art so large when it serves no real purpose other than identification? It can be smaller and still do a good job while freeing up lots of space for more important functions and actions, and less round trips to other card preference settings.

2) Latest Transactions: the basic UI for this section is OK, but icon sizes are too large and waste valuable screen space. Make them smaller so that more transactions fit in the same area. This allows the entire transaction list area to move down and make display room for more important information when needed. More on that in #2. Icon colors need to differentiate between the 3 basic Suica function types: transit, purchase and recharge. ‘Credit’ is not a good English term to use for recharge here, it’s too easy to confuse with credit card. And why is the transaction location so important that it needs to be listed first in bold? It’s secondary information taking up precious screen space. Primary information such as store names and transit routes make more sense here.

3) Commute Plan: The 2 most important UI functions of Suica card are recharging Suica balance and renewing commute plan. These 2 critical functions must be front and center in the Suica card UI. The regular Suica card UI gets this right while the commute plan Suica UI gets it wrong: the layout hides both recharge and renew functions down a level. People cannot find them. This is a design failure that needs to be fixed…like this:

This is what the Commute Plan Suica UI needs to look like, Latest Transactions need to move out of the way because they are secondary information.

4) Card Info is another mess. First of all why is a pull down refresh there? All Suica info is local to the card and Service Mode is the only way to force a refresh when necessary. Right? If it’s not serving any purpose, delete it. Important user settings are not prioritized or grouped intelligently, and hard to find. They need to be easy to find. And lose the duplicated recharge and renew functions. Putting those in 4 different places, each with a confusingly different UI design, isn’t helpful at all, it’s confusing the hell out of Suica users, young and old, newbies and old hands.

  • Info Refresh

Condense all of the important items users need to find quickly onto the top half of a well organized screen…like this:

Remember that Suica is a prepaid transit card, not a credit card. It has very different functions, uses and feedback requirements. Focus on what Suica users need, anticipate what they want, eliminate everything else, and it will turn out well.

Love and Kisses,
Ata Distance

Published