(See the attached document for the wire frames of the App, interleaved with this text)
- Transaction overview (Main entry point into the App. This screen lists all the running, canceled and finished transactions.
By tapping on the "+" a new transaction can be started. By tapping on the cog wheel the user gets to the settings.
One of the tabs at the bottom/top displays all transactions. By selecting another tab the transactions displayed are limited to the transactions in the state indicated on the tab.
For each transaction it is visible if the person looking at the data is the buyer or the seller in this transaction.
Contact and status are clearly visible. The state the transaction is in is indicated by the icon in front of the list entry. See the icons below to illustrate the states a transaction can go through.
The circle around the icon indicates the overall progress. As you can see below. Again colors and exact angles of the arcs must be defined.
If there have been status changes that demand action by the user the corresponding transaction in this list should be marked somehow (ribbon ?). If there is more than one transaction that requires attention and they don't fit on the same screen there should be an indication of some sort that the user need to scroll up down (Hint to scroll up/down?, A tab for the transactions requiring attention? ...).
Tapping a transaction leads to the Transaction details screen.
- Transaction details (Shows a timeline of the transaction. Most recent / Currently active state is shown at the top. If the transaction is not closed it is indicated that there are more steps following that are not completed yet (e.g. dotted line at the tops). For each step relevant data like date/time is displayed).
There might be actions required by the user in each step. Like illustrated in the mockup below, they could be displayed inline with the timeline.
The user must have the option to get back to the transaction overview from this screen.
- New Payment Request / Offer (This screen allows the User to setup and configure an offer/request. Therefore there are multiple sections on the screen. Sections with multiple alternatives (multiple payout variants for example) can be swiped left or right to select on of the alternatives. Users not familiar with swiping can also tap on the left and right arrows to navigate between the options. In the example below the user selects if he is sending or requesting money by swiping the first section to the left/right.
By tapping in the middle of the first section he can give the transaction a name (e.g. something that helps both involved parties to understand what this transaction is about) and specify the amount of money he wants.
In the mockup above the user is selling something (aka requesting a payment). This is why the next section is present where the user can setup where the money he receives from the buyer should be transferred to. The user taps in the middle of the section and a dialog opens (? … or maybe an inline form if it fits) where the user can type in the name of his bank, bank account number, iban etc.
Finally the user specifies in the example below from who he requests the payment (... the buyer in this case).
The button to start the transaction is only displayed if all required information in the sections above are provided.
Every transaction needs to be confirmed by entering a password (Android) or by fingerprint (iOS, if configured). Therefore there have to be be some intermediate dialogs that manage the setup of the password/fingerprint protection.
The mockup to the right shows where we might take this view in the future with multiple options for each section, different prices for each selection etc.
- Registration (If the Seller is not registered this screen is shown offering the Seller to Save his Bank Account information for future use. Therefore the seller has to provide an email adress or phonenumber, a password and a password confirmation. Optionally he can link to the fingerprint protection he might have already setup on his iOS device. From here the user gets to the Transaction overview.
- Delivery Confirmation (There might be the case that the Seller is handing over the goods directly to the Buyer. In this case the Buyer can go to this screen and press the Delivery Confirmation button. This screen is not available to the Seller.)
- Feedback (As soon as the Seller receives the Notification of Payment Transfer. He is asked to provide feedback on the Transaction and the Buyer. From this screen the Seller is lead back to the Transaction Overview.)
- Settings (Allows to change user registration data, Change the password, Forgotten password, Activate/Deactivate Touch ID etc.)