Challenge Overview
Welcome to Experian Opportunity Account Planning UI Prototype Challenge. The main task of this competition is to develop a HTML5 prototype based on the provided storyboard designs.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JavaScript code functions and make it easier for future developers and the client to understand what you have built.
General Requirements (All Pages)
- Please make sure to include the hover styles for links, buttons etc..
- Please match the storyboards.
Header:
- In the left side, we have the logo, for now link the logo to the "Opportunities" page
- In the right side, we have the user information - please follow the storyboard.
- Navigation: Follow the navigation from the storyboard - link the "Opportunities" navigation item to the Dashboard
Footer:
- Follow the storyboard
Required Pages:
We need the below pages and interactions in the prototype..
Dashboard: (01-1_Opportunity Dashboard page.png, 01-2_Opportunity Dashboard page.png)
- Follow the contents from the Storyboard
- We are looking for ideas to show an interactive circualr progress bar shown while loading the page.
- Each of the boxes shown has an edit icon, come up with a hover style for it.
- On clicking the "Edit" icon in "Buying Center Analysis", we need to show the "Buying Center Analysis" page
Buying Center Analysis (01-normal_view.png):
- Follow the contents from the Storyboard
- Have the breadcrumb as shown and link "Opportunities" to the opportunities page
- We are looking for ideas to show an interactive circualr progress bar shown while loading the page.
- On clicking "Add Contact", we need to show a modal window as shown in '02-5_Buying Centre Analysis page.png' (see more details on this page below)
- When the user clicks "Add Contact" in the modal window, a contact block (white color) is added in the Relationships section which is draggable and if more contacts are added then we need to show them, come up with slick scroll bar.
Relationship Section:
- For the contacts shown in relationships, you can follow the storyboard and implement them using http://jsplumbtoolkit.com/demo/draggableConnectors/jquery.html
- This section has a search bar, just have a text box with placeholder text as shown in the storyboard, no fucntionality is required as of now!
- Show the contacts as shown in the storyboard (01-normal_view.png).
- Each of the contact has a three icons in the right side (start), they are Positive ('+' green icon), Heirarchy (grey center icon) and Negative ('-' red icon) and in the left side (end points) we have three lines of colors green, grey and red.
- Positive Relationship: A user will be able to select the positive (green) icon in the right side and click on the same color in end point of another contacts, follow the color of the positive from storyboard. A contact can have any number of relationships with other contacts.
- Grey (heirarchical relationship): A user will be able to select the center grey icon in the right side and click on the same color in end point of another contacts, follow the color of the grey from storyboard. A contact can have any number of relationships with other contacts.
- Negative Relationship: A user will be able to select the negative (red) icon in the right side and click on the same color in end point of another contacts, follow the color of the negative from storyboard. A contact can have any number of relationships with other contacts.
- Each of the contact should be draggable.
- Implement the expand/collapse as show in 03-about-to-collapse.png and 04-collapsed.png. Clicking on the "up arrow" in each of the contacts will collapse it and clicking on the "down arrow" in a collapsed contact will expand them.
- 04-collapsed.png: Clicking on "Collapse All" button will collapse all the contacts and when "Expand All" button is clicked will expand all the contacts.
- We need the ability to allow a user to Zoom in and out using the slider, it will just zoom all the contacts in that section like shown. Zoom level at 0% will show similar to 02-zoom-to-fit.png and Zoom level at 100% will show 01-normal_view.png.
- 'Zoom to Fit' button on click will show all the conatcts in that section, you can see this in 02-zoom-to-fit.png.
"Add Contact" Modal: (02-5_Buying Centre Analysis page.png)
- Follow the contents from the Storyboard
- We need all the fields as shown in the storyboard.
- On click in "Add Contact", adds a new contact to the Relationship section and we need to hide this modal window.
Specific HTML/CSS/JavaScript Requirements:
- Your HTML code must be valid HTML5 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:
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.
You are allowed to use the JQuery JavaScript library for this contest. Document your JavaScript!
Browsers and Standards:
Your submission must works on browser in the list below:
- IE10+
- Latest Safari Mac
- Latest Chrome Mac and PC
- Latest Firefox Mac and PC
Final Submission Guidelines
Submission Deliverables
- A complete prototype with all required pages implemented.
Submission Guidelines
- Submit an archive file containing all HTML 5/CSS 3/JS/images and other required files into Online Review.