Challenge Overview
Project Overview:
Welcome to the Galena Payment and Loyalty Mobile App Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Mobile App Prototype based on provided storyboards using jQuery Mobile framework.
NOTE: This application will be developed using jQuery Mobile (http://jquerymobile.com) and Titanium (http://www.appcelerator.com/titanium) in later stages. Please follow coding standards and write clean code using jQuery Mobile libraries.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop a Responsive HTML5 Mobile App Prototype based on the provided storyboard designs. Your prototype must work properly in all the required Mobile browsers. The MOST IMPORTANT browsers (what you should test in first!) being Safari Mobile (iOS) & Android Mobile (example: iPhone, Android Smart Phones).
Required Pages:
Below are the required pages in both Portrait and Landscape orientations.
1. Splash Page:
- Customer opens the application and will show the landing page (01_01 Splash Page).
- Make sure header and footer of the screens are fixed and content will be scrollable.
- Show carousal with configurable timing in JavaScript (refer screens 01_01 Splash Page, 01_02 Splash Page, 01_03 Splash Page).
- Click on "Install NOW", navigate user to install apps screen (02_01 Install Apps).
- Click on "I have an account", navigate user to install apps screen (02_03 Login).
2. Install Apps Page:
- Allow user to enter name and email with agreement checkbox as per screen (02_01 Install Apps).
- Use can choose to install from 'App Store' or 'Google play'.
- Once user selects 'App Store' or 'Google play', show user the modal popup (02_02 Install Apps Complete).
- On clicking close button, close the modal popup.
- On clicking open apps button, navigate user to scan QR Code page (02_04 Connect to Pump).
3. Login Page:
- Allow user to enter name and email to login app as per screen (02_03 Login).
- Click on 'Login' button, show the scan QR Code page (02_04 Connect to Pump) to scan the image using device camera.
- Once user scans the QR Code, show user the scanned image as per screen (02_05 Connect to Pump_Scan QR Code).
4. Dashboard Page:
- Once user logged in and scaned the QR Code, show user the dashboard page (02_06 Dashboard).
- Click on left nav menu icon at header, navigate user to the menu screen (08_01 Navigation).
- Show user the auto scroll advertise with some initial time congurations in JavaScript.
- Show four big icons with dead links for now except the first one.
- Show tap on state as per screen (02_07 Dashboard).
- Click on 'Start Pump & Saving' icon, show user the payment method to choose from modal popup (02_09 Payment Request Before Fueling) - payment options are PayPal, MC, Visa, Other.
- On cancel close the modal popup, but on continue show user the start fueling flash screen (02_10 Payment Request Before Fueling) and after sometime navigate user to purchage gap page (03_01 Purchase Gas).
5. Purchage Page:
- Once user selects 'Start Pump & Saving', navigate user to purchage gap page (03_01 Purchase Gas).
- Show user the auto scroll advertise images with some initial time congurations in JavaScript.
- Show speedometer progress with updated values like total GAL, total sale, total saving.
- After fuel is poured, navigate user to payment page (04_01 Pay at Pump).
6. Payment Page:
- Once fuel is poured, navigate user to payment page (04_01 Pay at Pump).
- Show the reading details with total puchase amount.
- Click on 'Pay Now' button, show user the payment success modal popup (04_03 Pay at Pump).
- On clicking close button, close the modal popup.
7. Navigation:
- Once user clicks left nav menu icon at header, show user the menu screen (08_01 Navigation).
- Show tap on state as per screen (08_02 Navigation).
- Once user selects 'Start Pump And Saving', navigate user to dashboard page (02_06 Dashboard).
- Once user click 'Logout', navigate user to login page (02_03 Login).
- Click on 'My Profile', navigate user to profile page (05_01 Profile).
- Click on 'Pump Locations Map', navigate user to pump locations page (06 Pump Locations).
- Click on 'Loyalty Cards', navigate user to loyalty cards page (07_01 Loyalty Cards).
8. Profile Page:
- Once user selects my profile, show user the profile details page (05_01 Profile).
- Show three tabs on this page (Programs, Points, Payment).
- Show programs in corausel as shown on screen (05_01 Profile).
- Show reward points on table with prev/next navigations as shown on screen (05_02 Profile).
- Click on 'Redeem Point' button, show user the redeem point modal popup (05_02A Profile_redeem) and click on redeem reduce the point and clode the modal popup.
- Show payment history on table with prev/next navigations as shown on screen (05_03 Profile, 05_04 Profile).
9. Pump Locations:
- Once user selects pump locations, show user the pump locations map page (06 Pump Locations).
- Use google map to show the pump locations map on this page.
10. Loyalty Cards:
- Once user selects loyalty cards, show user the loyalty cards page (07_01 Loyalty Cards).
- Show two tabs on this page (All Cards, My Wallet).
- Show loyalty programs in corausel as shown on screens (07_01 Loyalty Cards, 07_02 Loyalty Cards).
- Click on 'Add to My Wallet' button, Add the program to my wallet list.
- Click on 'Share' button, show the social account to be choosen as per screen (07_03 Loyalty Cards).
- Click on loyalty program, navigate user to loyalty app details page (07_04 Loyalty App Detail).
- Show three tabs on this page (Details, Rewards, Comment).
- Show rewards list as per screen (07_05 Loyalty App Detail).
- Show all comments as per screen (07_06 Loyalty App Detail).
- Click on follow button, allow user to unfollow as per screen (07_07 Loyalty App Detail).
- Click on 'Share' button, show the social account to be choosen as per screen (07_07 Loyalty App Detail).
Specific HTML/CSS/JavaScript Requirements:
- HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e. "main-content", or "mainContent")
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
Font Requirements:
Use font - Arial.
JavaScript Requirements:
All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. We would like to use following JavaScript libraries:
Browsers Requirements:
- Latest Smart Phone Mobile Browsers (Android, iPhone)
Documentation Provided:
Storyboard screens and PSD files: Storyboard.zip
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.