Kohl’s Pay let users quickly and conveniently pay for their in-store purchases through the Kohl’s App. Anyone can use Kohl’s Pay to apply offers and Kohl’s Cash from a digital wallet with a single scan of a QR code.
Customers are able to select the offers, Kohl’s Cash and Gift Cards beforehand. In this way when they arrive to the register the clerk only needs to scan a QR code.
Users need to activate an account to start using this feature within the Kohl's App. Once logged, they will be prompted with the welcome screen that will let the user know about next steps.
The following set of 3 screens could be considered as the main flow once the user had scanned the selected products in the store, which basically consist on the selection of the offers, gift cards or Kohl's Cash, which is part of a reward system where accumulated points translate into cash stored in the user wallet.
Once the payment method is selected, the app will generate a QR code that allow clerks to validate the payment.
Finally, the order confirmation screen will show the status of the transaction and earnings or accumulated points that will translate into Kohl's Cash that can be used in the next purchase.
The main intention of this feature is to incentivize customers to experience a contactless payment.
As mentioned above, Kohl's Pay will allow users to purchase through Kohl's Cash, Offers and Gift cards stored in their digital Kohl's wallets. The easiest way to access directly to this information without opening the wallet was to create drawers that appear from the bottom of the screen and will show the user the option they choose from the "Selection screen".
At the top right side of the "Selection" screen there is a "more menu" that allows the user to access additional actions.
Here I'm presenting the transaction history screen where the user can review previous purchases in order to keep track of the Kohl's Pay feature usage.
Additionally The loading screen was created in order to reduce open interpretation from development teams. We decided to implement the animated spinner icon because it gives the user the impression that the action is actually happening in the moment. If the process takes too long, the animation will provide a trust factor to the users that will understand that the transaction is still in progress.
As part of the additional actions from the "more menu", the "Help" section will allow the user to consult common questions and a set of tips that will guide users completing their Kohl's Pay account. This set of tips are normally videos that explain every process in a clear and visual way.
This is an example of the videos presented in the "How it works" from the "Help" section.
