Bermuda - Automotive Manufacturing Responsive UI Prototype Challenge







    The challenge is finished.
    Show Deadlinesicon-arrow-up

    Challenge Overview

    Welcome to Bermuda - Automotive Manufacturing Responsive UI Prototype Challenge
    Our customer Bermuda just completed storyboard design to get the look and feel of Bermuda Automotive Manufacture application. For the next step on this challenge, we need your help to build best practice responsive UI Prototype for Desktop and Tablet as the devices target

    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

    Challenge Downloadable Available on Challenge Forum:
    Storyboard.zip - Storyboard Design

    General Tasks
    - Build provided storyboard into best practice responsive UI Prototype
    - Provided Storyboard using Adobe Illustrator format
    - Use RequireJS for this UI Prototype Javascript Module Loader
    - 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:

    Desktop layout
    - Provided storyboard using 1360px.
    - All sections background need covered browser screen, while the main content area centered.

    Tablet layout
    - Provided storyboard using 768px.
    - Tablet Layout need show on 768px to 1360px.
    - All sections background and content need use fluid width as device screen
    - Make sure your prototype look good on Portrait and Landscape view

    Design Problems:
    - 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.


    1). Dashboard
    Screenshot: 01_1_Dasboard.png

    - 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

    Top Area
    - 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

    Body Area
    - 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

    Screenshot: 15_Tablet_1.png

    - 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)

    Top Area
    - 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

    Body Area
    - 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


    Screenshot: 02_Hold.png
    - 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

    Screenshot: n/a
    - You need follow existing layout like on Dashboard page for tablet version

    3). Compare


    Screenshot: 03_Compare1.png
    - 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.

    Screenshot: 20_Tablet_Compare_1.png
    - 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


    Screenshot: 07_switch_to_sens_view.png
    - 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
    (Screenshot: 11_Sensitivity_3_remove_graph.png)

    Screenshot: 19_Tablet_Sensitivity.png
    - 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.

    - 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 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
    - IE11
    - Firefox latest version
    - Microsoft Edge Browser latest version
    - Chrome latest version
    - Safari & Chrome Mobile on iPad

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.


    2017 TopCoder(R) Open


    Final Review:

    Community Review Board


    User Sign-Off