Challenge Overview
We need your help to build best practice responsive UI Prototype for Desktop.
NOTE: This challenge is focussed on creating UI prototype only for the desktop, we will be adding tablet and mobile layouts in the later stages of the project, so need to make sure your solutions are wrapped around bootstrap responsive framework.
We would also like you to use angular 2 for this challenge
As part of this challenge you will need to comments HTML/JavaScript/CSS/etc code. We need clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
Final Submission Guidelines
IMPORTANT UI Prototype Considerations
- Build provided storyboard into best practice UI Prototype
- Provided Storyboard is in sketch.
- Use third party plugin (d3js) to build the chart shown in the dashboard.
- We would like to use bootstrap for the responsive framework (not required to use bootstrap, based on the confirmation in forums).
- Please use Angular JS 2.
- Use SCSS/SASS for CSS Pre-Processor.
- Lato fonts can be found here: http://www.latofonts.com/lato-free-fonts/
- Desktop layout: Provided storyboard is 1366px.
Screen Requirements:
00 Header & Navigation:
Reference: 01 Dashboard@2x.jpg
- Clicking on the “Dealer POS” logo should take the user to dashboard (01 Dashboard@2x.jpg)
- In the header, we need to have the main navigation:
- - - My Dashboard: This will take the user to 01 Dashboard@2x.jpg
- - - Create Quotation: This will take the user to 02 1 Quotation STEP1@2x.jpg
- - - Profile Menu: When user clicks on username, we show this 03 26 Profile Menu@2x.png / marvelapp link
- - - - - - Help will be a dummy link
- - - - - - Contact takes the user to 04 Contact@2x.jpg
- - - - - - Logout will be a dummy link
01 Dashboard:
Reference: 01 Dashboard@2x.jpg
Application Status Chart:
- In the top, we have the doughnut chart which needs to be dynamic i.e. this chart gets updated when the user chooses between date, this week and this month.
- - - Clicking on “Date” will allow the user to choose a date range, please see this reference (01 DGM - Date filtered@2x.png / marvelapp link) or user should be able to choose “This week” or “This Month” / based on the user choice the chart gets updated.
Dealer Work Queue:
- This shows the list of applications in the dealer work queue.
- User will be able to click on any of the “application ID’s” and it will take the user to "04 Application from Dealer Work-Queue (Viewing of an appllication) - please see use-case 04 point below.
- In the right side we have a “Search by” drop-down, have the value as “Customer name (default), Proposal number and License Plate” (please see the drop-down style as shown here: 05 2 Search by@2x.png / marvelapp link)
- Next to the drop-down include a search textbox, when user clicks on the search text box, and starts typing the text, they see auto-suggestions as shown in 05 3 Search Typed@2x.png
- Based on the search, the results get updated below as shown in 05 4 Dashboard - List Updated by Search@2x.jpg
- User will be able to view the filter for each of the columns by clicking on the sort icons in the column header, for prototype purpose - show the filter pop-up for the “dealer site” column by clicking in the column header and this will show the fly out as in (01 Popup - Filter@2x.png / marvelapp link)...within the the pop-up filter, user will be able to sort the table by A-Z or Z-A and clicking on “Cancel or Ok” will hide the pop-up (please implement the checkbox options / styles)
- In the last column within the table, we have the “Stage Process” column, this shows a red alert for some of the rows...when mouse hover on these alerts, we show a text “Action Required”, clicking on this text will show the alert message as shown in 01 Popup - Action Required@2x.png / marvelapp link. Clicking on “Cancel or Ok” will hide the pop-up modal window.
- Make the pagination a dummy link (in the storyboards , all blue links will be dummy links).
02 Quotation:
Reference: 02 Quotation STEP1_0.png
- “Cancel Creating Quotation” will take the user back to dashboard (01 Dashboard@2x.jpg)
Step 1: Vehicle Selection
Reference: 02 Quotation STEP1_0.png
- In this first step, user will be required to select the car, they will be able to choose between “New or Used”
- Initially the car image is dimmed as shown in 02 Quotation STEP1_0.png but once the car model and variant are chosen from the drop-down, we show the car image as shown in 02 Quotation STEP1.jpg
- Also the text below the car image “Choose a car” in the 1st step changes to “Chevrolet Cruze” along with the list price as shown in 02 Quotation STEP1.jpg
- Clicking on “Next” in each of the step will open up the next step (02 Quotation STEP2.png)
Step 2: Select Plan Proposal
Reference: 02 Quotation STEP2.png
- In this step, user is presented with list of term plans, and user will be able to choose one of the plans
- Clicking on “previous” should take them back to 02 Quotation STEP1.png
- Clicking on “next” will take the user to 02 Quotation STEP2.png
Step 3: Get Quote and Modify:
Reference: 02 Quotation STEP3.png
- Clicking on “previous” should take them back to 02 Quotation STEP2.png
- Follow the form / fields from the storyboards.
- - - Clicking on ‘PreApproval’ will show the modal window 02 Quotation STEP4@2x.png / marvelapp link and user will enter the customer id or enter details to create a new customer and once the required details and “Accept” button is clicked it takes the user to 03 1 Appl from Quotation.png, Clicking on “Cancel or the ‘X’ (icon in the top-right with the modal window)” will hide the modal window.
- - - ‘Print, Email, Save, Amortization Table, Payment Schedule, Full Application’ will be a dummy link
- - - ‘Previous’ will take the user to 02 Quotation STEP2.png
03 Editing of an Application:
Reference: 03 0 Appl from Quotation.png
- Follow the storyboards for contents, note this should be read-only by default (it should be editable, please see forums for confirmation)
- At the top, clicking on ‘more details’ below the name would show more details about the quotation (please see 03 1 Appl from Quotation Applicant.png).
- At the top, we have three tabs “Applicant, Co-Applicant and Guarantor”, these will be just dummy links. By default only the applicant tab will be selected.
- Clicking on appropriate sub-tabs icon would take them to corresponding tab (please refer screens from 03 1 to 03 8) to grab the contents for all the tabs.
- Note: User will be able to collapse or expand a particular sections within each of the tabs.
03 1 Appl from Quotation Applicant.png
- In Screen “03 1 Appl from Quotation.png”, under “VAPs and Fees” we have “+” icon which needs to be dummy link and for the “financed / no financed” column based on where the amount is we show either right or left arrow to move the amount to the other side. For example: in the first row amount is in “financed” column and if we click on “right arrow” it moves to the “No financed” column.
03 2 Appl from Quotation Applicant.png
- In this screen, we have an example on how the error will be shown if a field is not entered.
- Clicking on “Save updates” will show an error as shown in 03 2 Appl from Quotation.png
- When user clicks on Birth Date field, we show a date-picker and follow the styles as in 01 DGM - Date filtered@2x.png.
03 7 Appl from Quotation Applicant.png
- Under “Documents required to analysis credit decision”, we have three icons..initially only the upload icon will be active as shown in the 1st row in 03 7 Appl from Quotation Applicant.png, clicking on upload icon will show
- Clicking on upload icon with the upload the file.
Actions:
In the bottom, we have few buttons - position of these will be fixed:
- - - “Save Updates” will be a dummy link
- - - Clicking on “Edit / Cancel” will show a warning message as shown in 03 16 Warning@2x.png and this warning pop-up is shown with two buttons “Cancel and Ok, Leave this”.....clicking on “Cancel” will hide the modal window. Clicking on “Ok, Leave this” will take the user to 03 9 Appl from Quotation - Edit@2x.jpg
- “Copy” will be a dummy link
- “Print” will be a dummy link
- Clicking on “Submit” will show 03 17 Save Quotation@2x.png
- “Amortization table” will be a dummy link
- “Paymente Schedule” will be a dummy link
- “Print Contract” will be a dummy link
- Previous and Next helps with navigating between the tabs...Note: in the last tab (History), we don’t need to show the “Next” button and we will be just showing the “Previous” button. Also in the first tab, we don’t need to show the previous button, just need to show the next button.
04 Application from Dealer Work-Queue (Viewing an Application):
- These are similar to screens from 03 0 to 03 8 but they will just be read-only, user won’t be able to edit it.
- You can have all the fields as it is, for some fields like drop-down: we can remove the drop-down arrow and just the value need to be shown (we can still have the underline for all the fields), for other fields like checkbox, radio buttons..you can just have them as shown in the storyboard just need to make sure that user is not able to edit them.
- Main and Sub tabs will not have the tick icon or the alert icon as this just a read only pages.
- In these pages, we won't have the link above the name "Back to Quotation".
- In this just the status is changed to “qualified” instead of "PreApproval"
Actions:
In the bottom, we have few buttons:
- - - Previous and Next helps with navigating between the tabs...Note: in the last tab (History), we don’t need to show the “Next” button and we will be just showing the “Previous” button. Also in the first tab, we don’t need to show the previous button, just need to show the next button.
- - - Clicking on Edit / Cancel will take the user to 03 0 Appl from Quotation.png
- - - Copy button will be dummy link
- - - Clicking on “Submit” will show 03 17 Save Quotation@2x.png
- - - “Amortization table” will be a dummy link
- - - “Paymente Schedule” will be a dummy link
- - - “Print Contract” will be a dummy link
05 Contact:
Reference: 04 Contact@2x.jpg
- User will be able to type the subject and message
- Clicking on “Send Message” will show a modal window with a success message similar to 03 17 Save Quotation@2x.png...message headline will be “Message Sent” and below that have it as “Your message has been sent” and then followed by “Ok” button clicking on which will hide the modal window.
- Other details will be below the contact form as shown in the storyboard.
~
TECHNOLOGIES
CSS, HTML, JSON, JavaScript
Final Submission Guidelines:
Challenge Downloadable Available on Challenge Forum:
Storyboard.zip - Storyboard Design
Marvelapp Prototype Link
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient UI Prototype 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.
- Responsive Web Design solution!
CODE REQUIREMENTS:
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.
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
- 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.
- It is fine to use GPL/MIT/Open Source code.
- 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 look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Browsers Requirements
- IE 10, 11
- Firefox latest version
- Microsoft Edge Browser latest version
- Chrome latest version
- Safari