Challenge Overview
Welcome to “Revenue App Modernization UI Prototype Challenge”. We just ended an amazing RUX design challenge where members from design track conceptualized and designed a new tool to help customers advisory to generate more revenue.
On this challenge we are looking to create and develop the front end coding of this application. For now this application will be coded as a web desktop application but responsive pages can be updated in the future. So you will be using Bootstrap as your main and only framework.
Required Screens
1- Login
- Please use the following storyboard as reference "01-Login.jpg"
- Clicking on login takes to "02-1Opportunity-Selection"
2- Opportunity-Selection
- Please use the following storyboard as reference "02-1Opportunity-Selection"
- Clicking on “Filter” lined button takes to “02-2Filter-Opportunities.jpg”.
- Clicking on any “Select” yellow button takes to “03-1Opportunity-Dashboard.jpg”
- Revenue slider is clickable and draggable. (No need to update the amount).
3- Opportunity Dashboard
- Please use the following storyboard as reference "03-1Opportunity-Dashboard.jpg"
- Clicking on “Select Opportunity” lined button takes to previous screen.
- Provide an Open Source Library for chart on “Value Driver”.
- Clicking on bell at top bar opens this “03-2Notifications.jpg”.
- Icons and buttons are deadlinks.
4- Customer Profile
- Please use the following storyboard as reference "04-1Customer-Profile.jpg"
- Provide an Open Source Library for charts on this page.
- Icons and buttons are deadlinks.
5- Opportunity Details
- Please use the following storyboard as reference "05-1Opportunity-Details.jpg"
- Provide an Open Source Library for charts on this page.
- Icons and buttons are deadlinks.
6- Value Driver
- Please use the following storyboard as reference "06-1Value-Driver.jpg"
- Slider bars are clickable and draggable in 3 sections: High - Medium - Low
- Clicking on “Submit” yellow button opens “06-2Focus-Details-Popover.jpg”
7- Value Stream
- Please use the following storyboard as reference "07-1Value-Stream.jpg"
- Clicking on “Manage Data” shows this page “07-6Manage-Data.jpg” (there is also a dropdown action show on this: 07-8Manage-Data-Action.jpg)
- Clicking on “Launch classifier” under “Assessment Process” opens “07-2Classifier-Confirmation-Popover.jpg”
- On this modal, clicking on “Submit” yellow button show next modal: “07-3Launch-Successful.jpg”
- Clicking on “View Assessment Output” under “Assessment Process” shows “07-4Assessment-Process-Status.jpg” (Table on this screen under “Predictive Estimator” is just an image)
- Clicking on “MDM Modelling” under “Additional Analysis” takes to “07-5MDM-Modelling.jpg”
8- Admin Page
- This is a new flow screen. Not related to previous workflow. Please use this image as reference “08-1Admin-Page.jpg”
- Clicking on “Create Customer” yellow button opens side panel shows on “08-2Create-Customer.jpg”
- Clicking on “Create Opportunity” yellow button opens side panel shows on “08-3Create-Opportunity.jpg”
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=0Bza1qtSwQr8UX2p6eng2SVFwV1E
Possible FAQs on this challenge
- You cannot use just simple HTML + CSS3 + Javascript on this challenge. This should be developed using Bootstrap. Please have in mind that responsive behavior can be added later to some pages.
- You are allowed to use any Open Source Library / Plugin that allows you to match the designs as much as possible. Just remember to declare it on your declaration/readme file.
- Notifications slide panel, can be accessed from all screen by clicking on bell at top.
- Clicking on “Shutdown” button at top bar, takes to login page again.
- No need to provide any back end functionalities such like: Search and filters, form validations, chart updates, uploads functionalities, etc.
- “Customer logos” are images. No need to match the PSD on this case. Using a single logo and repeat them is ok.
- Pagination are deadlinks.
- Logo in top “Revenue Studio” is clickable. Takes to “02-1Opportunity-Selection.jpg”
- Top / Footer and Side menu items should be deadlinks if they don’t connect to any pages on the workflow.
- Top header is fixed at top.
- Footer is not fixed, is fluent with content at bottom.
- Try to match the storyboards as much as possible. If you don’t see a modal, a dropdown, or any extra interactions, no need to code it.
- This is a web application only. No need to focus on responsive behaviors.
- Storyboards and sources are not retina ready. So all icons and images can avoid retina behaviors.
- Storyboards use 1280px for content and layout. Please follow this guideline as well. If resolution is less than this, horizontal scrollbar is ok for now.
- For buttons sizes, hover effects and other guidelines, please refer to the branding folder on same drive.
- Font is “GT Walsheim Pro”. Attached on same drive.
- Single CSS and SASS are allowed on this challenge, any solution is ok.
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed (and encouraged) to use Bootstrap.
- You are allowed to use SCSS in the project.
- 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 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.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).
Final Submission Guidelines
REQUIREMENTSOn this challenge we are looking to create and develop the front end coding of this application. For now this application will be coded as a web desktop application but responsive pages can be updated in the future. So you will be using Bootstrap as your main and only framework.
Required Screens
1- Login
- Please use the following storyboard as reference "01-Login.jpg"
- Clicking on login takes to "02-1Opportunity-Selection"
2- Opportunity-Selection
- Please use the following storyboard as reference "02-1Opportunity-Selection"
- Clicking on “Filter” lined button takes to “02-2Filter-Opportunities.jpg”.
- Clicking on any “Select” yellow button takes to “03-1Opportunity-Dashboard.jpg”
- Revenue slider is clickable and draggable. (No need to update the amount).
3- Opportunity Dashboard
- Please use the following storyboard as reference "03-1Opportunity-Dashboard.jpg"
- Clicking on “Select Opportunity” lined button takes to previous screen.
- Provide an Open Source Library for chart on “Value Driver”.
- Clicking on bell at top bar opens this “03-2Notifications.jpg”.
- Icons and buttons are deadlinks.
4- Customer Profile
- Please use the following storyboard as reference "04-1Customer-Profile.jpg"
- Provide an Open Source Library for charts on this page.
- Icons and buttons are deadlinks.
5- Opportunity Details
- Please use the following storyboard as reference "05-1Opportunity-Details.jpg"
- Provide an Open Source Library for charts on this page.
- Icons and buttons are deadlinks.
6- Value Driver
- Please use the following storyboard as reference "06-1Value-Driver.jpg"
- Slider bars are clickable and draggable in 3 sections: High - Medium - Low
- Clicking on “Submit” yellow button opens “06-2Focus-Details-Popover.jpg”
7- Value Stream
- Please use the following storyboard as reference "07-1Value-Stream.jpg"
- Clicking on “Manage Data” shows this page “07-6Manage-Data.jpg” (there is also a dropdown action show on this: 07-8Manage-Data-Action.jpg)
- Clicking on “Launch classifier” under “Assessment Process” opens “07-2Classifier-Confirmation-Popover.jpg”
- On this modal, clicking on “Submit” yellow button show next modal: “07-3Launch-Successful.jpg”
- Clicking on “View Assessment Output” under “Assessment Process” shows “07-4Assessment-Process-Status.jpg” (Table on this screen under “Predictive Estimator” is just an image)
- Clicking on “MDM Modelling” under “Additional Analysis” takes to “07-5MDM-Modelling.jpg”
8- Admin Page
- This is a new flow screen. Not related to previous workflow. Please use this image as reference “08-1Admin-Page.jpg”
- Clicking on “Create Customer” yellow button opens side panel shows on “08-2Create-Customer.jpg”
- Clicking on “Create Opportunity” yellow button opens side panel shows on “08-3Create-Opportunity.jpg”
Resources
- You can download all assets and resources for this challenge on this drive folder:
https://drive.google.com/open?id=0Bza1qtSwQr8UX2p6eng2SVFwV1E
Possible FAQs on this challenge
- You cannot use just simple HTML + CSS3 + Javascript on this challenge. This should be developed using Bootstrap. Please have in mind that responsive behavior can be added later to some pages.
- You are allowed to use any Open Source Library / Plugin that allows you to match the designs as much as possible. Just remember to declare it on your declaration/readme file.
- Notifications slide panel, can be accessed from all screen by clicking on bell at top.
- Clicking on “Shutdown” button at top bar, takes to login page again.
- No need to provide any back end functionalities such like: Search and filters, form validations, chart updates, uploads functionalities, etc.
- “Customer logos” are images. No need to match the PSD on this case. Using a single logo and repeat them is ok.
- Pagination are deadlinks.
- Logo in top “Revenue Studio” is clickable. Takes to “02-1Opportunity-Selection.jpg”
- Top / Footer and Side menu items should be deadlinks if they don’t connect to any pages on the workflow.
- Top header is fixed at top.
- Footer is not fixed, is fluent with content at bottom.
- Try to match the storyboards as much as possible. If you don’t see a modal, a dropdown, or any extra interactions, no need to code it.
- This is a web application only. No need to focus on responsive behaviors.
- Storyboards and sources are not retina ready. So all icons and images can avoid retina behaviors.
- Storyboards use 1280px for content and layout. Please follow this guideline as well. If resolution is less than this, horizontal scrollbar is ok for now.
- For buttons sizes, hover effects and other guidelines, please refer to the branding folder on same drive.
- Font is “GT Walsheim Pro”. Attached on same drive.
- Single CSS and SASS are allowed on this challenge, any solution is ok.
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
- 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.
CSS Requirements
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed (and encouraged) to use Bootstrap.
- You are allowed to use SCSS in the project.
- 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 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.
Browser Requirements
- Desktop: IE11+, Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows).