PepsiCo - Mediafly Mobile App UI Prototype Challenge

Project Overview:

Welcome to the PepsiCo - Mediafly Mobile App UI Prototype Challenge! The goal of this challenge is to create a Responsive HTML5 Prototype application based on provided storyboards using AngularJS framework and Bootstrap for iPhone/iPad Safari Browsers.

This website application theme will be built on Mediafly Interactives Framework (http://www.mediafly.com, http://devdocs.mediafly.com/interactives).

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 Responsive HTML5 Prototype based on provided storyboard designs. You need to implement click through UI Prototype as per required pages documented below and follow the branding/theme from the provided storyboard designs. Your prototype must work properly in all the required browsers listed below.

Please ask questions in forum for any clarifications needed on the spec requirements or storyboard designs.

Note: Instead of using ngRoute of AngularJS, you could use ui-router framework for navigation (https://github.com/angular-ui/ui-router).

Required Pages:

Below are the required pages which will be developed to support responsiveness on both portrait and landscape views.

1. Landing Page:

• -User opens the application and will see the landing page (iPad-L-sales-kit-NEW-01-Default-First-launched.png).
• -Use responsive web and fluid layout design for all pages.
• -User can select only one region before proceeding to next page.
• -Click on view button, navigate user to main section view (iPad-L-sales-kit-NEW-02-Default-Main-sections.png).
• -Use deadlink for help icon/link click action for now.

2. Main Section View:

• -Once user selects region and click view from landing page, show user the main section view (iPad-L-sales-kit-NEW-02-Default-Main-sections.png).
• -User can change the selected region as per screen (iPad-L-sales-kit-NEW-03-select-region.png) and click view button to reload main section view.
• -User can filter/switch between 'current period' or 'previous period' to corresponding data on main section view.
• -There are three tab sections (Large Format Priorities, Small Format Priorities,Customer Priorities).
• -On iPhone view, make these tabs scollable to show hidden tabs.

3. Large/Small Format Priorities View:

• -Once user selects the large or small format priorities tabs, show user the corresponding views.
• -Both large and small fomat priorities tab content layout designs will be same, make sure to load different content items.
• -Make each logo/icon on thumbnail item as separate image.
• -Make each image at top section of thumbnail item is clickable.
• -User can click on any item or right arrow icon (at bottom) to see content view (iPad-L-sales-kit-NEW-06-Priorities-Content-view.png).

4. Customers Priorities View:

• -Once user selects the customer priorities tab, show user the customer priorities view (iPad-L-sales-kit-NEW-06-Priorities-Content-view.png).
• -There will be sub-level tabs and by default 'All' will be selected.
• -User can see corresponding items under each sub-level tabs.
• -Show all items under 'All' tab content.
• -Make each logo/icon on items as separate image.
• -Make sure whole thumbnail item box is clickable.
• -User can click on any item to see store document on content view (iPad-L-sales-kit-NEW-06-Priorities-Content-view.png).

5. Content View:

• -Once user selects any items from priorities view, show user the content view popup (iPad-L-sales-kit-NEW-06-Priorities-Content-view.png).
• -If user selects document item, show the first page content at top section and all pages at bottom section.
• -User can select any pages from bottom section to see page content at top section.
• -Make these pages are scollable to show hidden pages.
• -If user selects video item, show the first video at top section and all videos can be listed on pages section (at boottom).
• -Click on close icon, close the content view popup.
• -On iPhone view, show 'Jump to Pages' or 'Jump to Videos' with scrollable items at bottom section.

Specific HTML/CSS/JavaScript 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.

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:

• jQuery
• AngularJS
• Bootstrap 3

Browsers Requirements:

• iPhone Safari Browsers
• iPad Safari Browsers

Documentation Provided:

Please register to see attached documents.