Nike’s Mobile Payment — Concept

The UI Challenge

There are two reasons that the most (in)famous basketball player is the focus of Day 2’s Daily UI Challenge.

  1. Kobe is Day 1’s focus.
  2. Day 2’s Challenge was to design a payment form, so I decided to redesign a mobile-payment form for Nike.

I initially wanted to make a stack of cards you could potentially flip though, like a stack of cards in your wallet. Something like this:

Imagine the card tilted forward. Too bad Sketch doesn’t have a 3D transformation option (yet).

Essentially, the screen would have pre-populated cards, and the user could flip through it. Here were some problems I ran into:

  1. I couldn’t find any sort of 3D animation to where the card could tilt forward, in the same way a stack of credit cards are in that random drawer in your house.
  2. Most people probably don’t have card pre-populated on any application, so it didn’t really make much sense from a usability standpoint (though I could be wrong, since 27% of online transactions globally are mobile)
  3. If there’s a stack of credit cards, then there needs to be options to edit each one, delete each one, or add a new one. Way too complex. Tryna keep it simple.

So, I went for a simple credit card in which users could input their card data.

Something I added was a feature where people would swipe their card after putting in their credit card information, the same way a user would swipe their card at any retail store.

Also, couldn’t forget about Lebron.

Let me know about your thoughts!


Follow my daily UI progress on Behance and Medium
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.