Improve UX/UI for card details page

[flaviadefaria]

Problem

We're getting to the point where the card details page features a bunch of information. Some of this information is either given prominence when it's a minor detail, and in other cases, seemingly disparate details are grouped close to each other making it hard to scan the page and find what you're looking for. Here's an example of where things stand today.

Solution

We'll clean up the card details page with following framework, for both Expensify Cards and Third-party bank cards (incl. corporate and personal).

[samranahm]

@flaviadefaria are we accepting contributors on it, I’m ready to work on this one.

[flaviadefaria]

@samranahm not yet. I'm still detailing the solution and will add the appropriate labels once it's ready.

[flaviadefaria]

End user view:

Personal Card

Current view

Improvements:

• Top section (Card artwork, name, action buttons)
  • Cardholder name atop the card artwork
  • Action buttons for Update card, Fix card, View transactions
• Middle section (Main card details)
  • Masked physical card number
  • Card name
• Middle section (Settings)
  • Mark transaction as reimbursable
  • Last updated
  • Transaction state date
• Bottom section (action rows)
  • Remove Card

Expensify Card - US

Current view physical card

Current view virtual card

Improvements:

• Top section (Card artwork, name, action buttons)
  • Cardholder name atop the card artwork
  • Action buttons for Freeze card, View transactions
• Middle section (Main card details)
  • Remaining limit
  • Limit type
  • Masked physical card number
  • If combo card: Masked virtual card number, with a Reveal button
• Bottom section (action rows)
  • Report physical card fraud
  • Report card lost or damaged

Expensify Card - UK/EU

Current view (mockup, still being implemented)

Improvements:

• Top section (Card artwork, name, action buttons)
  • Cardholder name atop the card artwork
  • Action buttons for View transactions
• Middle section (Main card details)
  • Card name
  • Card number
  • Remaining limit
  • Limit type
  • Masked physical card number
  • If combo card: Masked virtual card number, with a Reveal button
• Bottom section (action rows)
  • Change PIN
  • Report physical card fraud
  • Report card lost or damaged

Third-party Company Card

Current view:

I think we should also add a card details screen for this use case, but since it's a bigger change, let's leave it out of scope for now, and I'll get back to it once all the changes outlined here have been implemented.

Admin view:

Personal Card

• N/A (admins can't view personal cards)

Expensify Card - US/UK/EU

• Top section (Card artwork, name, action buttons)
  • Cardholder name atop the card artwork
  • Action buttons for Freeze card, View transactions
• Middle section (Main card details)
  • Remaining limit
  • Card limit
  • Limit type
  • Masked physical card number
  • If combo card: Masked virtual card number, with a Reveal button
• Bottom section (action rows)
  • Deactivate card

Third-party Company Card

Improvements:

• Top section (Card artwork, name, action buttons)
  • Cardholder name atop the card artwork
  • Action buttons for Update card, View transactions
• Middle section (Main card details)
  • Masked physical card number
  • Card name
• Middle section (Settings)
  • Mark transaction as reimbursable
  • Last updated
  • Transaction state date
• Bottom section (action rows)
  • Unassign Card

[JmillsExpensify]

Added the Internal label. Also this issue was originally started in #83304. We're creating a new issue to get crisp on the next steps.

[JmillsExpensify]

@flaviadefaria did you see the Figma file that we're working out of? @joekaufmanexpensify left a bunch of helpful comments that we need to make sure are incorporated.

[flaviadefaria]

No, I was focused on translating each use case using the framework design created. But I'll check and respond to all comments on Monday. Though a quick look suggests I've already incorporated some of his feedback in the detailed solution above.

[ShridharGoel]

@JmillsExpensify Can you assign me here for the frontend part, since the original issue has been closed?