Dinnaco - Talent Advantage UI Prototype Challenge

Challenge Overview

Welcome to "Dinnaco - Talent Advantage UI Prototype Challenge". Recently, we finished the UI design concept contests for this project. In this challenge, we are looking for you to help build a working UI prototype using the outputs from the design challenge and data provided from clients..The main goal of this project is to allow system users to search and rank their global workforce for the best match for specific roles based on requirements. Organisations will benefit by ensuring that the best candidates are placed in global roles or projects resulting in enhanced overall performance.

Our client is very excited about this application and will be demonstrating this software to a large audience on June 28th. We’re facing a challenging timeline to get it polished up and ready. As you’ll see in the spec, there won’t be a back end at this demo stage, however there are still a lot of visual features involved and we only have two contests (this UI Prototype and following Code challenge), to get it polished and ready for demo. We also need to allow some time for feedback and fixes before the demo. For this reason we’re using some tighter timelines for the challenge. Please think outside the box and help us meet our goal and achieve a successful demo!

Platforms and Technologies

HTML/HTML5, CSS3, D3, Angular.js, Bootstrap, JSON, JavaScript, Leaflet JS

Important Expectations:

- Use Angular.js for any new element interactions you built.
- Please implement graphs/charts provided on all pages using some data.
- Please use data files provided. Please use a small sample of data from all the provided data and convert it into JSON format to use for prototype.
- You MUST make sure all graphic look sharp on Retina and Standard Size. Let us know if you need us provide you for some missing Retina design.
- Challenge winner will be responsible to fix any issues we found or exists on existing UI Prototype after updated based on this challenge spec.
- You are allowed to use graph and chart libraries that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
-  Please use AngularJS technologies as much as possible.
-  Please use .less files for CSS where possible and use clear variable structure so that it is easy to change/maintain.
- Use of bootstrap is highly recommended.
- Use Leaflet.js for maps

a. Desktop Size

- Set 1024px min-width for all desktop sizes
- Desktop sizes need to be fluid starting from 1024px and upper

b. Tablet Size

- Set 768px min-width for all tablet sizes
- Tablet sizes need to be fluid starting from 768px and upper
- You must adjust sizing for any elements to make they look proper with existing tablet look and feel.

The first sheet in the data “Summary” provides all information about the data available in other sheets.

Maps

Most of the pages of this prototype contains zoomable world map wherein we need to put callouts and circles at different locations to show the related details. But the map in itself does not need to show any location details or grid or coordinates. As you can see in design, it is static white map.

- Clients want you to use Leaflet for this. Please refer here.
- In case, you cannot get the required function with Leaflet, you can use other free open source API but after discussing in forums.

In such cases, please make sure to confirm in forums before using any API. Also, we still want a white map without any printed information on it as shown in design. Please try to choose an API which allows you  to have such a map as background.

Calendar

You are allowed to use any open source JS (try D3 if possible) libraries to implement calendar. Please make sure to  confirm in forums before using any such library. You can use any library as far as it is non-commercial, open source , free and publically available.

UI Prototype Page Requirements

- Please follow the design psds exactly and do not deviate from it except for points specifcially mentioned.
- Please note: We will provide you with basic bootstrap Grid PSDs. You should be able to get this directly from design psds but you can use basic ones if you find it difficult to pick up from design psds.
- Also, we will provide branding styles pdf just for your reference, You should be able to get all styles from design.psds.
- Many places require vertical scrollbars. These scrollbars MUST match storyboard and NOT browser default.
- There are many minute details in these prototype requirements as there are no wireframes. Please read spec carefully and ask questions as early as possible in forums to clarify any doubt.

01. Desktop-01.png to Desktop-07.png / Tablet-01.png to Tablet-07.png

- See the background image and make sure it does not look strange or stretched.
- Make all the contents centered on the page.
- Match the fonts and format exactly.
- The second line in the footer text has “Terms & Conditions”, “Privacy” and “Contact Us”. Make all of them clickable but dead links.
- Make the “Job Family” and “Skill” boxes as full width fields. That is span across that center length. Place “Job Family” first followed by “Skill” second row followed by third row which will be same as second row in current design. (DEVIATION)
- The “Search” button has transparency effect. Make sure to match it.
- See the dropdown box. Notice the bottom green border. Please match that and also match the overall design of the box.
- For each of the scroll downs, display max 5 items  at a time in the box. If there are more items, you must display the vertical scroll bar as shown in the designs.
- For “Location” scroll down, please implement two boxes as shown in design. You can choose to display city box only when a country is selected ( i.e. the mouse is rolled over a country). Note that again there are only max 5 items in this case. The header and All does not count in that 5. You should display them also.
- For “Skills” field, check the design and implement the right side round select box. Also, if you select more than number of fields that can fit in a full-width field box, please increase the box height by 1 row to accommodate more fields.
- Implement the calendar for “Start Date”.
- See the icon in each box  - Duration, Location, Experience and start Date. You need to show that.
- Pay great attention to size of box and margins for text and icon within it.
- You do NOT need to implement actual search function.

Data for various fields:

Please refer to provided data file Combined Matrix.xlsx - Sheet 7 (Sample Data).

Job Family: Use all unique values from Job Family Column.
Skill: Use all 20 values in Skills table.
Duration: 0-3 months, 3-12 months, 1-3 years and 3+ years
Location: Use some publicly available list or API to get all countries and their cities. Please confirm in forums if you use an API.
Experience: Use unique values from Experience Column.
Start Date: Calendar.

02. Desktop-08.png to Desktop-14.png / Tablet-08.png to Tablet-14.png

Header and Below Panels:

- Match the header and footer background.
- For the header, match the logo fonts exactly.
- The Global Matches number is dummy for now. You do not need to compute it.
- The Home icon should take you to the page Desktop-01.png/Tablet-01.png respectively. When you reach the first page using Home icon, the search fields should not contain past search and should be cleared.
- Carefully match the background of the whole page.
- The next panel (below the header) has three parts:
 

i.) Refine Search (Left Icon): Clicking the icon should open refine search panel.

- Note the change in the color of the icon itself.
- In this panel, all the fields should be pre-selected to the values that were entered that the user used to come to this page. For Job Family, just use bright white color to highlight the selected field.
- See the third column - implement it as accordian and allow to open only one field at a time.
- The whole bottom containing the text “Refine” should be clickable.
- Match the transparency of the overall Refine box.
- Clicking the icon again instead of Refine button should close the box without making any changes to the current results. Again the icon color changes back to original one.  
- You do NOT need to implement actual Refine function. You can use dummy data to show the change.

ii) Middle Skills Panel: This panel should display all the skills selected as a part of Skills field during search. If the number of skills are more than that can fit in the panel, show a semi-transparent vertical scroll bar such that you can only see one row of skills at a time. Please make sure not show half-cut rows for skills at any time.

- Clicking the close button on any skill should remove it from list and refine the current result accordingly. Again, you do NOT need to implement actual Refine function. You can use dummy data to show the change.

iii) Right Compare Panel: This icon allows to open another panel below this panel to add countries for comparison.

- When you open this panel, it should display a text “Select upto 3 countries” in the same style as shown currently for country names. (DEVIATION)
- Allow to drag the grey markers on map to this panel and display corresponding country name..
- Clicking on left close button should close the panel.
- Clicking on close button of any country should remove that country from comparison.
- Clicking on the right two-arrow icon should take you to page Desktop-15.png/Tablet-15.png respectively for comparing countries. Please check that at least two countries are added to panel or else show a simple modal with close button saying “You need to select at least 2 countries for comparison” (DEVIATION)

 

- Note the two flaps on the right border of the page “Top Countries” and “Top Tablets”. Clicking on them should open and close them. Show top 10 countries and top 10 (DEVIATION) talents during display. For better display, use vertical scroll bars whenever required.
- For the above two flaps, change the respective titles to “Top Countries by Score” and “Top Individuals”. (DEVIATION)
- For “Top Countries by Score”, display the score of the country on the right aligned of each name in each row. (DEVIATION)
- Clicking on a country in the above list should take you to Desktop-16.png/Tablet-16.png respectively.
- Clicking on a talent in the above list should take you to Desktop-17.png/Tablet-17.png respectively.

 

Map:

- For the map, implement the zoom in and zoom out function and the two buttons (+) and (-) on the left side of map should be used for that function.
Please note: These buttons should zoom towards the center and map should be draggable.

- On the map, we have three types of markers:

Grey Circles with varying size: The size signifies the amount of talents available.
Colored Circles: When a mouse rolls over a grey circle, make it colored.
Hexagon black box over the circle: Provides information about matching talent number for that country and the score. You do NOT need to compute score or matches number. You can use dummy data to display information.
Clicking on the Hexagon should take you to Desktop-16.png/Tablet-16.png respectively for the corresponding country details.

Please note: Markers are just country based and not city based. Also, we need only 10 markers for top 10 countries on the map. The size of the markers should vary according to the match number as mentioned above.

- Use the white plain map as shown in the design. Any other display of map is NOT acceptable.

Score Meters:

- The last row on the map pages show the score meters for top 3  countries.
- The score meters itself has three rings: Speed, Cost and Difficulty.
- You do NOT need to compute the score or other three numbers. But you need to use dummy data to display information and show a working meter.
- You can use any graph library (preferably D3) to implement score meter. Please make sure that it is non-commercial, free and publicly available. One suggestion is to use this one. Here is  another one.
- These are just suggestions - feel free to use any other library after obtaining confirmation in forums.
- Match the color of the rings exactly.

Footer:

- Match the footer text exactly.  
- The three texts ( Terms, Privacy, About Us, Contact Us) in second row are clickable dead links.

03. Desktop-15.png to Desktop-18.png / Tablet-15.png to Tablet-18.png

Compare Page (Destop-15, Tablet-15):

- Notice that this is a modal with a close button on top right.
- Match the overlay effect.
- Use the data provided as sample and use dummy data if some data is not available.
- Make sure the small map matches countries map. You need to get all countries map so that any selected countries can be displayed here.
- If only two countries are compared on map page, only two columns should be shown. Distribute the width equally in this case.Do not change width of first column.
- Close button should close the modal.

 

Country Details Page (Destop-16, Tablet-16):

- Header and Footer are same as above pages.
- Notice two panels.
- You must match the map background of left panel. You need to have map of all countries of that size to display with any country.
- Match the font in the left and right panel.
- See the three small meters at the bottom of left panel. They must exactly match the amount as displayed in score meter on the search result page for that country.
- This is not a modal but another page. Use all the effects to match the design.
- In the right panel, each talent name is a link. Clicking on it should take you to Destop-17.png/Tablet-17.png respectively. Last column in right panel is Individual Score of the talent.
- Use vertical scrollbars for contents that cannot fit in right panel but match the height exactly.
- Back to Search Results should take you to search results page.

Talent Details Page (Destop-17,18, Tablet-17,18):

- Header and Footer are same as above pages.
- Notice two panels again. This time, the left pane is much smaller in width.
- Back to Search Link should take you to Search Result page and not the Country Detail page.
- You can use dummy photograph for display.
- Make links of website, phone icon and message icon clickable and dead.
- Match the display style of details in the right panel.
- Use vertical scrollbar to display content that does not fit in right panel but match the height exactly.
- See small icons accompanied in each section like Experiences and courses. You need to include all of them.

- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.

Code Requirements

Please make sure all pages load quickly. If there is any lagging on the page for any valid reason (e.g. long running processes) then please sure that user feedback is provided (e.g. progress bar).

HTML/HTML5

- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Please provide IDs for as many HTML elements as possible
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.

CSS3

- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.

Javascript

- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

Images

- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission looks sharp for Retina and Standard devices

Browsers Requirements

- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- IE 11 and above
- Chrome, Firefox and Safari on iPad (Landscape & Portrait View)
- Android Browser

Final Submission Guidelines

Submission Deliverables:
- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tuorial

Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool