[72 hours] Anemoi - Train Capacity Dashboard UI Prototype

Welcome to the Anemoi Train Capacity Dashboard User Interface Contest. This is a UI Prototype contest where we would like you to create a user interface for our client’s Train Capacity Dashboard Project.

IMPORTANT NOTE:
We found out that members from certain countries are restricted from working on this challenge, due to the client’s company policies. Challenge submissions cannot be accepted from members registered in a country with a score of 37 or less according to Transparency International's Corruption Perception Index 2015.
 
If your country is highlighted in red in the following sheet your submission WILL NOT be accepted, unfortunately. This is NOT a new Topcoder policy or something that will become a normal part of future challenges. This is an isolated policy and requirement for this specific client and their challenges. Thank you for your understanding.

https://docs.google.com/spreadsheets/d/1MFZCGwIqgllzWBJuh2adC_BRCCG4kZwN1m8j4ZgbuLc/edit?usp=sharing

We apologize and are very sorry for the inconvenience and that this information was not made available when the challenge launched. Please ask any questions in the forum. Thank you

 

We have a third place payment for this contest of $175 which will be given out separately to the third place winner.

 

Project Overview

The Train Capacity Dashboard allows controllers (humans/ end users) to view Train related information such as:

1. capacity of their compartments (or units as they are referred to)

2. the demand at each train station

3. their Head Codes. Unique ID that identifies the route that the train journey comprises of

and other information that helps the controllers take an informed decision about which trains and units to ply on which routes and at what times.

 

Contest Overview

We ran a Design contest earlier where we created a screen for providing information associated with Head Codes and details about a Train journey.

 

As part of this contest, we would like you to take the screen that were created as part of the design contest and create a HTML / CSS Prototype for our client.

 

The designs are quite straightforward and simple. Some points regarding the designs that you need to note:

1. There is only one screen - a dashboard page.

2. In the dashboard page, the notification center at the top right can be expanded and collapsed by clicking on the notification numbers (2). The notification will slide from the right and overlap over the contents on the page. Note how it does not overlap over the Route Map or Traffic Information. Also note how it hides one of the slides of the carousel.

3. In the dashboard page, the notification center can extend beyond the length of the page. Thus, show a scrollbar here and limit the height of the notification section to the height of the browser.

4. In the dashboard page, certain train stations have an exclamation sign next to them indicating further information - clicking on them should show the additional information and clicking anywhere after that should close it. Show a hand cursor on hover over the exclamation sign (!).

5. In the dashboard page, show an additional listing on the left and the right to demonstrate that the carousel works. These new items are shown when clicking on the << and >> elements. Make the new listings distinguishable from the ones shown earlier to confirm that the carousel is indeed showing different items. You can use the same content as the existing items - just use different values in some cases so that it looks like a new item.

6. In the dashboard page, the Route Map section and the Traffic Information section display can be expanded and collapsed by only clicking on the Expand / Collapse elements at the top right of the section. Note that the user first needs to select the item in the carousel and then you show the corresponding items Route Map and Traffic Information.

7. In the dashboard page, no animation is expected when the donut chart loads. You may or may not provide them. Either approach is fine.

8. You can use an image for the Route Map and Available capacity - just for the lines and the station markers. For others, kindly use text.

9. When the page first loads, show only the headcode input field. Once the user enters the headcode, show the item in that section / carousel slide and then show the input field in the next section / carousel slide. If all 4 slides are filled, if the user clicks on right button in the carousel, show the new slide containing the input field.

10. Show dummy values (up to 3) in the Unit Type dropdown. Changing the value here should update the No. of Cars and the Capacity fields (random values but make sure you have less than 10 value for no. of Cars and less than 500 for the Capacity field respectively).

 

In addition to the above points, kindly note the following before you start creating the UI prototype:

1. You have to use SASS for your stylesheets. Follow best practices here and take advantage of it.

2. Use bower for any third party libraries. Your submission should not ship with these files. Only provide a bower.json file (and an optional .bowerrc file) mentioning the dependencies.

3. You only need to use HTML5 and CSS3 for your prototype. No Javascript framework is allowed. This means that you do not use AngularJS or any other javascript framework. Only HTML and CSS. For the charts and dropdowns and carousel, you can use any existing library to implement them. But DO NOT use any javascript framework for the templates itself. Basically jQuery is allowed. You also need not use any JSON data mappings.

4. Use texts wherever possible. Images are only for icons and logos. ANEMOI itself will be a text.

5. Use Arial font for the screens everywhere.

6. You need to target Google Chrome and IE 11+ only. The resolution you need to support are 1280x1024 and 1900x1080

Final Submission Guidelines

Before submitting, make sure that your HTML , CSS and Javascript codes have been validated and there are no errors. In case of any exceptions that the reviewer needs to make, specify this in your README file. Verify that it meets all the requirements mentioned earlier.

Upload your code as a .zip file to the Submit and Review tool for this contest.