Challenge Downloadable Available on Challenge Forum:
Storyboard.zip - Storyboard Design
- Build provided storyboard into best practice responsive UI Prototype
- Provided Storyboard using Adobe Illustrator format
- Use d3js to build the chart for this application.
- Use SCSS/SASS for CSS Pre-Processor.
- Data for each pages as possible need loaded from JSON files.
- Use font-face for this prototype submission. You can download the font from here: Open Sans: https://fonts.google.com/specimen/Open+Sans
- Responsive requirements:
- Provided storyboard using 1360px
- All sections background need covered browser screen, while the main content area centered.
- Provided storyboard using 768px
- Tablet Layout need show on 768px
- All sections background and content need use fluid width as device screen
- Make sure your prototype look good on Portrait and Landscape view
- Bermuda - Automotive Manufacturing Dashboard has a series of sliders that allows them to simulate the costs for running the plant.
- The graph shows the relative movement of costs is real-time as the sliders are moved. The movement of the graphs as sliders are moved (direction of costs, amount with which costs change, rate of costs change) is highly valued as it provides visual feedback.
- The work is for an auto-parts and services supplier. It’s a brutal business and he’s all over the map i.e. he does many different things all needed for the car. Needs control of costs and to understand production
- Obviously the manufacturer doesn’t want all his costs in the public. So many values have been altered.
- For example, each car that is manufactured has a brake lining component. By changing the Brake Lining Success Rate from 20% to 24% makes a saving of ~$4m i.e. just a 4% increase. Changing Costs per Back Seat Install has very little effects on Net Costs. See GIF below.
- Header background need use fluid width, and content remain centered on desktop.
- On Tablet, content need to be fluid as device width
- NET COSTS & CONTRIBUTORS need take to dashboard page
- Undo and Redo buttons can be dead links
- Graph 1, Graph 2 working as tab functions
- Notice there’s x button to remove the tab
- + button will load Add New Graph modal window. Check provided screenshot on Tablet folder 23_Tablet_Add_New_Graph.png, since this screen not exists on Desktop storyboard. Follow content like storyboard.
- Action dropdown placed on the right side. Click this need load the menu options (Screenshot: 01_2_Actions.png) of Load, Save, PDF and Hold Values button
- PDF button (Screenshot: 13_Save.png). There’s Download button and text input to allow user type the email address
- Save button (Screenshot: 12_Export_Pdf.png). Save button can be dead link
- Load button (Screenshot: 14_Load.png). This modal window displayed table list of all scenarios. Delete button need remove the related row.
- Compare button placed on the right side and take user to Comparison page view
- This is where chart/graphic, gauges and table placed
- Line chart will be change dynamically when user change some slider on the Body area
- Display grid background for the chart
- Need use different color for each line that are using same color with the gauges
- There are 4 gauges displayed next to chart
- Table have pagination on the bottom
- You can use same table content when navigate to different pagination
- This is where all boxes with the slider placed
- Chart button next to label are clickable
- Number next to chart button will captured value based on slider
- Match minimum and maximum values for each fields
- Notice there are also the lock icons on some rows
- There are also the toggle button in some boxes
- RESTORE TODAY DEFAULTS button will revert all slider values to initial value
- On Tablet view, Graph tab need changed to dropdown menu (Screenshot: 18_Tablet_Select_Graph.png)
- Action buttons need re-use dropdown like on desktop version
- Need add Comparison button on the right side like on desktop version. Ignore this storyboard screen (17_Tablet_Actions.png)
- Because of limited space on tablet, we need make the gauges and table accessible when click the gauges and pagination buttons. (Screenshot: 16_Tablet_2.png)
- If you have better ideas implement this, lets discuss on challenge forum
- For tablet version, we need set all boxes to use fluid width.
- Move each boxes to separate rows
- Only Body area is scrollable for tablet version. Header and Top area need to use fixed placement
2). Hold Values
- This is the feature to display threshold on chart or sliders
- User access this screen after click the HOLD VALUES on Action dropdown (Screenshot: 01_2_Actions.png)
- On chart there’s new Yellow colored line that will let user to adjust the values
- User can change the value by dragging up and down the yellow drag button
- On gauges, there’s new Yellow triangle indicator and triangle arrow
- Yellow indicator working as indicator of previous values
- On table, you need display new column for Delta, and there’s radio button with yellow color
- User can change the selected hold values by select different radio buttons
- Remain display 365D & 1000D for table column header when user select the Hold Values
- On body area, user can edit the number values and there’s yellow triangle as indicator of previous values
- User can drag and slide the slider, text input need capture the values
- You need follow existing layout like on Dashboard page for tablet version
- User access this screen after click the Compare button on the right side of header bar
- Re-click the compare button need take to default dashboard screen look
- Graph tab changed after user click Compare button
- User can change top header by click Graphs, Gauges (Screenshot: 04_Compare2.png), or Table (Screenshot: 05_Compare3.png) butons
- Save and PDF buttons placed on the bottom of each side
- Click both buttons need load the related modal windows. Re-use from these screenshots (12_Export_Pdf.png & 13_Save.png)
- On Main content area, you need displayed all boxes in separated rows
- User can switch to different graph, by click the graph name (Screenshot: 06_Select_to_compare.png)
- Selected graph marked with checkmark icon
- On this view, you can see the Hold Values are active, you can see yellow line and color show up
- Notice the dots on the separation line between Graph 1 & Graph 2. You need show different row background for that rows.
- Instead of the icons, re-use text format for Graphs, Gauges and Table buttons like on desktop view
- You will need reduce the chart to make it fits with the updated layout
- Need remain displayed Save and PDF button on the bottom of chart
- Parameter need remain use 2 columns layout. Ignore storyboard look
- No need to show up Parameters using tab format
- You need move the chart, text number and slider to separate rows
- Follow desktop version with fluid layout
- This is when user select Gauges button (Screenshot: 21_Tablet_Compare_2.png)
- This is when user select Tables button (Screenshot: 22_Tablet_Compare_3.png)
- You need follow existing layout like on Dashboard page for tablet version
4). Sensitivity View
- When user click on the chart icon next to parameters on Main body area
- You need display the Sensitivity Analysis on the left side (Screenshot: 08_Sensitivity_view.png)
- Close button need close the Sensitivity Analysis chart
- By default there’s only 1 line of the selected parameters on the chart
- User can drag the button on line chart
- Click the Sensitivity icon on another row need displayed another line on the chart (Screenshot: 09_Sensitivity_2_graphs.png)
- This is example when user add the 3rd line chart (Screenshot: 10_Sensitivity_3_graphs.png)
- User can click one the chart color line to change PARAMETERS slider/input value and vice versa
- Create random color when trigger the Sensitivity Analysis line chart
- Re-click the chart button on the left side of text need remove the related line on Sensitivity Analysis
- For tablet layout, Sensitivity chart need show up on top of other parameters
- Functions need remain same like Desktop version
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!
- 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.
- 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.
- 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 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.
- Firefox latest version
- Microsoft Edge Browser latest version
- Chrome latest version
- Safari & Chrome Mobile on iPad