ArgoPay Inc requires a design for a mobile payment app. Currently the app is built for iPhone and Android, with iPhone as the primary platform (iPhone 4 and above).
Some mockups are provided for current prototype to give an idea of the basic functionality and screen flow of the app (see reference site http://www.argopay.com/design/design.html and attached screenshots). The designer is free to present each screen in any layout they deem best, or even reshuffle the content of screens where they feel appropriate, but these should be discussed with ArgoPay to ensure it still meets the business requirements.
All the content should be designed in Portrait view.
The designer will need to provide assets to represent each of these screens plus a few more variations and details as noted below.
We will now cover each of the screens and their purpose & elements.
1. Home Screen – This screen has navigation buttons to go to these pages: account, wallet, settings, help, logout. The bottom navigation tab should have buttons to these pages: home, scan, offers, rewards, places. If you design any custom icons, they need to be the same in size.
The top navigation bar in the home screen should contain company name/logo. The bar height should be no less than bars on other screen.
UPDATE: The bottom navigation bar may contain only three buttons - combined button for scan/home depending on which screen is present, then offers and places. The idea is when user starts the app, scan could be the default "home" screen, then press one button toggles between scan and other pages.
2. Sign up/Sign in screen – This page is for a new user to sign up to ArgoPay or a registered user to sign in. Click the bottom tabstrip to navigate between “login (sign in)” and “sign up”. It should contain a branding banner on top and form fields to enter user information. For Sign up, the required fields on this page are: first name, last name, email, password, and the rest are optional (gender, birthday). After this page there are two more pages to complete the sign up. For sign in, the page only requires email(username) and password.
3. Error Screen - If there is any error, this page will show with error message, reason (if known) and suggested action for the user.
For example: user scans a QR code but transaction is not located on the server side. The error message may be “Sorry, there is a problem to complete the transaction.” The suggested action may be “Please try again”. Or “Please try another payment method.”
4. Help Screen – It has three sections. First, a static page instructing the user how to get started with the app (similar to the coach marks at http://pttrns.com/categories/21-coach-marks but do not have to be like those). Second, an option to set PIN lock. Third, a few frequently asked questions with link to ArgoPay site and contact support.
5. Places and Place Details screen – This displays current merchants accepting ArgoPay. It can be a list or a map, with search and filter function. Click any merchant brings up the place details screen. It shows the merchant name, address, a custom logo or image, an active reward program (if the merchant has one), and the user’s reward points. There is also a map showing the merchant location. There should be a back button to return to previous screen.
The final design artifacts should include all the screens & variation assets in separate files. Strong preference for output in HTML5/CSS3 format, where the CSS is in a separate file. Graphic format PNG is preferred, with transparent background. Custom icons need to be all of the same size and scalable, attached separately for each icon as an AI file (EPS acceptable if AI not available).