Challenge Overview

Project Overview
Welcome back to the MVA Mobile Voting Application!

We have redesigned the MVA Mobile Voting Application through previous challenges.  Now we'd like you to take the new designs and create a clickable UI Prototype (HTML, CSS, JavaScript, etc.) for the voting app.

Note: This application will be primarily viewed from an iPad (via a mobile browser wrapper), but may also be viewed from a desktop web browser.  A responsive implementation will be a huge plus.


Goals
- The design should work with fluid/flexible nature.
- We need clean documentation of the code. Please create detailed comments for the different sections of HTML/CSS/JavaScript code, as applicable.
- Please note, the main use will be on an iPad in portrait view, so we are expecting the UI Prototype to work on mobile.
- Remember, all pages should link where possible. Please help us show correct page flow.
- UI should be actionable, meaning if I click on a button, it goes to a new page or executes some JavaScript.

General Requirements
- Produce a front-end prototype that can be used to demonstrate all screens/functionality required.  You can use dummy text/data where appropriate.
- Required designs are for a mobile-optimized web application (think responsive design). Majority of user view from iPad.
- Storyboards are 1536 x 2048, so we should be able to support retina iPad resolutions in portrait orientation foremost.
- We will review in landscape (2048 x 1536) as well as with a non-retina iPad (768 x 1024), and the UI should be usable.  These orientations can be saved for Final Fixes.   
- You should cover all screens mentioned in the included user experience (UX) design (storyboard).
- We will provide you with a collection of back-end calls that you can imitate in your client-side scripts (see attached guidelines).
- You will create placeholder data for demonstration purposes, since there will be no back end.


Required Pages and Application Flow

1.) Home Page (01 Home.png)
- Starts with initially a list of 2 Meetings.  "Filter Meetings" search box is hidden (fist line of main section would then be the first meeting).
- If user clicks "Show More", 5 meetings are shown.  "Filter Meetings" search box becomes visible (the start of the meeting list drops down).
--- Users can use the "Filter Meetings" search box to enter text to further limit the meetings shown in the list of meetings (matching on name).
- Clicking on one of the right arrows (>) of a meeting takes the user to the the Agenda page for that meeting.

2.) Individual Meeting / Agenda Page (02_01 Agenda.png, 02_02 Agenda.png)
- Shows a list of Agenda Items, plus a Materials, Chairman Only, and Post IC Voting section
- Each Agenda Item has a plus sign (+) button to expand the details of the Agenda Item. After expanding, the plus turns into a minus (-).
- Each Agenda Item has a right arrow (>) button that takes the user to the Feedback page for that Agenda Item.
- Expanding the plus sign (+) button for "Materials" shows a list of attachments to download, usually 1 or 2 files.
--- Update file name / download link to be black.
- Expanding the plus sign (+) button for "Chairman Only" shows links to the "Pre IC - Feedback Summary" and "Post IC - Dashboard and Summary" pages.
--- Clicking on either link takes the user to the respective page.
--- Update link color to be black
- In the header, there is a left arrow (<--) to take the user back to the Home page.

3.) Agenda Item / Feedback Page (04_01 Agenda Item.png, 04_02 Agenda Item.png, 04_03 Agenda Item.png)
- Here, a user can enter feedback for a certain item and click "Submit".  Submit saves the comment and returns the user back to the Agenda page.
--- Center the submit button and use larger font size. Same style as the "Submit" button in the Print Section (see Post IC Voting Page).
- There is also an expandable "Materials" section that shows a list of attached files available for download, usually 1 or 2 files.
--- Update file name / download link to be black.
- There is also an expandable "Company Details" section that includes specific details for the related company.
- There is also an expandable "Feedback Entered" section, only visible to specific users, that shows a list of users and their feedback that have already submitted.
- At the top of the page, the user has the option of navigating to the previous (< Prev) or next (Next >) Agenda Item page, instead of going back to the Agenda.
--- There is a change request to how the Agenda Item header is designed.  See below.
- In the header, there is a left arrow (<--) to take the user back to the Agenda page.

4.) Pre IC - Feedback Summary Page (06_01 Pre IC Chairman Summary.png, 06_02 Pre IC Chairman Summary.png)
- This shows a list of all users who have submitted a comment via the Feedback Page, grouped by Company (Agenda Item).
- The left arrow in the header (<--) takes the user back to the Agenda page.
- On the bottom of the page is a Print section (See "Print Section" below)
- Update the font color of users' names to black.

5.) Post IC Voting Page (07_01 Post IC Voting.png)
- A user can select a vote value, and enter a comment.  Upon clicking "Save", his/her votes + comments are saved for this meeting.  Users can make changes and click "Save" again as many times as they want.
--- The "Save" button should have the same style as the "Submit" button in the Print Section.
--- The success message "Votes saved successfully" will display below the Save button.  The page will not transition to the state shown in 07_02 Post IC Voting.png.  You can ignore that screenshot.
--- After clicking "Save", the bottom Print section becomes visible for print options. (See "Print Section" below)
There is a change request for how the vote circles are displayed.  See below.
- In the header, there is a left arrow (<--) to take the user back to the Agenda page.

6.) My Votes Page (08 My Votes.png)
- This displays a list of companies and the current user's votes + comments, both from the Feedback page and the Post IC Voting page.
- Clicking the back arrow (<--) in the header returns the user to the Post IC Voting page.
There is a change request for how the vote circles are displayed.  See below.

7.) Post IC - Chairman's Dashboard and Summary Page (09 Post IC-Chairman Dashboard Summary.png)
- This shows the vote + comments entered from all users from the Post IC Voting page, one company per page.
--- Update the font color of users' names to black.
- The back arrow (<--) in the header returns the user to the Agenda page.
- At the top of the page, the user has the option of navigating to the previous (< Prev) or next (Next >) company with voting results.
--- There is a change request to how the header is designed.  See below.
There is a change request for how the vote circles are displayed.  See below.

8.) Print Section
- Available on the bottom of certain pages (see storyboard).
- Users can pick a Round (e.g. All, Initial, Post, My Votes) and an Action (e.g. Email, Print, Screen).
- Upon clicking "Submit", the action is executed (e.g. displaying all feedback from the initial round on the screen by choosing "Initial" + "Screen").
--- Selecting Round = "My Votes" and Action = "Screen" would take the user to the My Votes page (#6).
- Update text color to be black.

9.) Overall
- Print Section should remain fixed on the bottom of the page (when it is visible).
- Header (Header + navigation + prev/next) should remain fixed at the top of the page.

Changes Request from Initial UX Design
1.) Update vote circles to be the size of those in "09 Post IC-Chairman Dashboard Summary.png", but using text values instead of numerical values.  E.g. "Yes" within the circle, instead of "3".  Background colors remain the same as they are in the storyboard.
2.) Update the "Previous" and "Next" navigation to be more prominent (similar to Amazon's result navigation), and include the related next/previous item name on a 2nd line.
3.) See http://i.imgur.com/XV9lgcv.png for examples.


Technology Guidelines

1. HTML
- Provide comments on the page elements to give clear explanation of code usage. The goal is to help future developers understand the code and break up the code into logical sections.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts
- Make sure all HTML files pass Validation without Error/Warning.

2. CSS
- Provide comments on the CSS code. We need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.

3. JavaScript
- Provide comments on the JavaScript code to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.  Use comments especially in areas that should be replaced with server-side AJAX requests.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
- You are welcome to use JavaScript frameworks such as Bootstrap, jQuery Mobile, AngularJS, etc.

4. Images
- For mobile development, images should be properly compressed while still having good visual quality.
- When possible, use background color properties instead of repeated background-based images.
- Use sprites technique for the image slicing.

Browsers Requirements
- Safari on iPad
- Chrome Browser on Desktop (Windows and Mac)


Documentation Provided
- "Voting App Specs.pdf" - Walkthrough of original application (old design), with notes.
- "MVA Storyboard.zip" - zipped Storyboard and PSD source files of new design.
- "MVA Mobile Voting App Back-End Requests.pdf" - List of existing back-end requests that a future developer will use with this prototype.  You can replicate with placeholder client side scripts and dummy data for this challenge.  The Back-End Requests PDF is meant to document existing back-end calls so you can get a sense of which placeholder data will be dynamic (results of the server calls) and which will be static. For the dynamic pieces, we ask that you use some form of JavaScript + mock data as a placeholder, so that a future developer could easily come in a plug in the existing server calls.

 



Final Submission Guidelines

Specific HTML/CSS/JavaScript Requirements

HTML/CSS Requirements
- Your HTML code must be valid HTML 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.

Javascript Requirements
We are open to using JavaScript libraries as you see fit (e.g. jQuery, Bootstrap, AngularJS).  The original application used jQuery mobile, but that is not required.

Fonts
Fonts should be Helvetica and Helvetica Light, with arial and sans-serif as alternatives.

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30041211