Driven Mobile App Prototype Challenge

Project Overview

The client for this project is looking to expand its automotive brand. Their current automotive digital strategy lacks an industry-specific marketing brand/platform, resulting in low viewership of digital content and low quality/quantity of contacts in the database.
The goal of the DRIVEN project is to introduce a sustainable automotive-specific application that aggregates content across the firm, digitally delivers that content to stakeholders worldwide, and can evolve with advancements in mobile technology and digital communications.
This project is expected to produce a mobile app supporting iPad and Android, with strong backend service support.  
This challenge is responsible for implementing UI prototype.

Challenge Requirements

The purpose of this challenge is to build the ptototype for the app. We will provide the wireframes and all storyboards and screen flow diagram / documents to help you understand the workflow.

The prototype needs to work for both iOS (ipad) and Android (Kindle Fire)

Key Requirements

• Test in all the required browsers (make sure you test on mobile browsers).
• Make sure the layout is fluid and work in both landscape and portrait mode.
• Replicate the design of the approved Storyboards (PSD Files) for all screens.
• Your screens must match the colors and structure of the provided storyboards.
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
• Ensure you submission clear of HTML and CSS Validation error and warning.
• The background should be fluid and the content should be fixed horizontally and fluid vertically.
• Implement hover state for all buttons and links.
• Make sure the prototype is compatible with PhoneGap
• The prototype must support localization (i.e. strings / texts should be read from an external resource file, instead of hardcoded into the HTML pages), you can use the plugin for this

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS3
• 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 stylesheet.
• 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.

1.2.1    UI Prototype Implementation
The frontend of the application will be built with Phonegap and AngularjS, for both iOS (ipad) and Android (Kindle Fire) platforms.
The UI will consist of AngularJS controllers and partial views (HTML fragments/templates), and they're tied together using AngularJS routeProvider service.

1.2.2    Implementation Considerations/Suggestions
The frontend of the application will be built with Phonegap and AngularjS, for both iOS and Android (Kindle Fire) platforms.
The UI will consist of AngularJS controllers and partial views (HTML fragments/templates), and they're tied together using AngularJS routeProvider service.

1.2.3 REST API Access
The frontend will follow standard AngularJS application convention to use $http module to access backend REST APIs. For the prototype challenge, please use local json data for REST API calls.

1.2.4 Local Cache
Once the REST API response is received and extracted, the frontend will cache the data (categories, contents, etc.) locally using lawnchair library (which is a cross-platform/browser JSON store). The local cache will be used if the device isn’t online.

1.2.5 PDF Viewer
The following PhoneGap plugins will be used to support in-app PDF viewer:
•    https://build.phonegap.com/plugins/896 (for iOS)
•    https://github.com/cyberkatze/pdfViewer (for Android)

1.2.6 Video/Audio Playback
HTML5 <video> tag will be used for video/audio playback, which is supported by both platforms.

Challenge Inputs

• Storyboard files
• Wireframe files
• Architecture document

 

 

Final Submission Guidelines

• The complete prototype that covers all screens.