Applause Dynamic Infographic Generator UI Prototype

Project Overview

Develop an infographic for web and print publication that provides information and review information from the ten captured categories of app testing that Applause Analytics gathers through their platform.  This information is made available through a standard web based API call and is returned via a JSON payload.  

Message to convey: “We understand your app and we know how to help you make it better.”

The goal of this project are to create an infographic targeted towards generic Apps, eventually the infographic may be targeted towards specific app types, currently this project is meant to be more generic.

Competition Task Overview

This challenge should convert the infographic to a HTML + CSS prototype.

Key Requirements

• Test in all the required browsers.
• Replicate the design of the approved Storyboards (PSD Files) for all pages.
• Your pages 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.

Detailed Requirements

This is a single page to show an infographic.

From top to bottom, it has following parts:

1. Header (static) - PATH TO 5 STARTS, WINNING APPS ...
2. Users are saying / Test in the Wild / Uncover issues in real time
   • The three section icons are fixed but the text can be changed. 
3. Icon / Name / Scores
   • The layout is fixed, the logo image, text and score can be changed.
4. Listen to your users - static
5. Review
   • The layout is fixed, each review includes three dynamic parts - good or bad, review comment and review score.
6. Best attribute and spider graph
   • The layout is fixed, the best attribute name is dynamic and other texts are fixed.
   • The spider graph is implemented by client and we should use an iframe to load it from following url:
     • e.g. https://mjohnson.applause.com/radarchart?appids=333903271&width=500 ),
     • the infographic web page will embed the Spider Graph in an iframe with proper CSS style to hide borders and scroll bars. Please also note that the "width" of the iframe should be set as the value of "width" query parameter in the Spider Graph URL, so that the iframe can fit to the infographic web page best.
       e.g.
       <iframe src="{{data.spider_graph_url}}" frameBorder="0"
                    style="width:500px; height:500px; overflow-y: hidden; overflow-x: hidden;">
       </iframe>
7. The Token Graph
   • The Token Map and Token Position are fixed. But the Token Content is dynamic (multi images, use which one is depends on the actual content from server).
   • The Card Content is dynamic. (Name, Icon, Tip, Review, Score, etc.)
   • Note, the token has positive token and negative token. The positive token has green score and green background button and the nagetive token has red score and red background button.
   • You should provide positive score style and negative score style to support any score and for each kind of the button, you should provide green background for positive style and red background for negative style.
8. Footer is static

Specific HTML/CSS/JavaScript Requirements

• 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.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Libraries/Plugins

It's an infograph and the spider graph is implemented by client so I assume we don't need any JavaScript here.

If you need to use JavaScript Libraries, please let us know in challenge forum.

Browser Requirements

• IE8, IE9
• FF Latest
• Safari Latest
• Chrome Latest

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.