Analytics Dashboard UI Prototype Challenge

Welcome to the Analytics Dashboard UI Prototype challenge.

 

Project Overview

The Analytics Dashboard site will serve as a tool for users to build, configure and monitor a dashboard of data, statistics and analytics for their specific industry. It will be used by industry professionals and will contain charts, graphs, analytics, statistics etc that will allow the user to make more informed decisions and monitor trends throughout their specific industry. The dashboard will be designed around a series of user configurable widgets.

 

We are focussing on the aspect of the dashboard that allows the user to see their dashboard and add, configure and edit a new widget.

 

Challenge Overview

We ran a Design contest to get the initial designs for the display of the dashboard and the widget. We are now looking to create a UI Prototype. We will provide you with the winning design of the earlier challenge. Your task is to convert that to a HTML5/JS/CSS prototype (desktop and mobile) and match the design as much as possible.

 

Challenge Details

After registration, in the challenge forums, you will find the designs for the prototype. It contains the image as well as the PSD files that you will need to slice through to build the HTML5 based prototype. We are also sharing the wireframes. Follow the instructions in the wireframe to know about the workflow for the website.

 

You can find the main specification in the challenge forums.

 

Points to Note:

1. AngularJS: You need to use AngularJS for your front end framework. jQuery is allowed as well. If you are using both, make sure that the jQuery code resides inside a directive.

2. Validation: Make sure that your submission passes HTML / CSS / JS validation without any errors or warnings. In case of any exceptions, mention why in the submissions README file.

3. Fonts: You can embed fonts in your submission. Make sure you match all font properties as close as possible. If there are any proprietary fonts used in the design, you are free to use fonts that are similar. Just make sure that you get the spacing / padding and positioning correct and you maintain the existing look and feel of the designs.

4. Guidelines: Follow best practices while naming classes, indenting code, choosing the correct HTML tags etc. Do not use images in place of text, unless it is a logo or an icon.

5. License: If you are using any third party libraries, they should be MIT licensed.

6. Compilers: You can use SASS or LESS, however, your submission need not contain these files. Provide the compiled CSS stylesheets only.

7. Responsiveness / Browsers: Your submission should work for both Desktop and Mobile based browsers. The Design uses 1280px width for Desktop and 640px for mobile displays. Make sure the site is responsive. Both landscape and portrait orientations need to be supported. You need to support the following browsers:

   1. IE11

   2. Google Chrome

   3. Firefox

    and their mobile equivalents. Latest versions only.

Final Submission Guidelines

1. Before submitting, make sure that all requirements mentioned above (and in the document shared in the challenge forums) have been met and also check out the “Points to Note” section above.

2. Submit your application via the Submit and Review tool for this challenge.