Challenge Overview
Welcome to Styx Dashboard Responsive Application UI Prototype Challenge
The main task of this project is to create the Styx Dashboard Responsive Application UI Prototype based on the provided PSD Storyboard design.
This UI Prototype will use Responsive Design solution that will works within Tablet and Mobile Platform. You must use CSS Media Query so prototype can use different layouts when viewed on tablet and mobile.
For this challenge you will create mostly desktop layout, mobile version will be future releases.
Final Submission Guidelines
CODE REQUIREMENTS:
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.
- You’re encouraged to use HAML to make the HTML code clean, and provide source files on your submission.
- Each of the HTML pages need adapted both difference of tablet and phone layout.
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.
- Please use LESS/SCSS or SASS to make the CSS code clean, provide source files on your submission.
- You MUST use CSS media query for tablet and phone
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.
Documentation Provided
Styx-Dashboard-Applicatio-Storyboard.zip - Storyboard Design
PAGE REQUIREMENTS:
Notes:
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- Match All Fonts like on storyboard. Use @font-face technique.
- All forms input on every page MUST follow storyboard design look consistent across required browsers.
- For desktop Version, suggest how hover state look for every buttons and links. Make sure the style not far off from our current theme. Remember, hover state need disable in Mobile version. We need solution that can easy to updated in the future.
- First priority for this prototype is you need make sure all charts in all pages display consistent and correctly in all required browsers.
- 1st option to use to build the chart for this prototype is this chart plugin. Make sure style consistent with storyboard. If some chart not possible to build with that suggested chart. We’re looking your help create/suggest another chart library or your own custom codes that will fit with our storyboard design.
- Keep in mind, we need interactive chart display consistent and correct in all required browsers.
- Let us know if need some clarifications!
- You need define all colors used on your stylesheet. We need update the color easily in the future just by update single line. Refer this site to help you set the variables
1. Login
screenshot: 1-1-Login-Default.png
- This is login page look
- Logo placed on top, put dead link
- Match style for input and dropdown
- There’s default value, after user focus, value need to be blank
- Show us how dropdown menu look for dropdown
- screenshot: 1-2-Login-Error.png
- Press enter via keyboard or click the Login need submit form
- Show error validation state (screenshot: 1-2-Login-Error.png) with red border and error message
- After validation error show up, submit button will take to System Overview page
2. System Overview
screenshot: 2-1-System-Overview.png
- This is System overview page.
- Page background need use fluid layout as width as browser screen, while main content area has max 980px width
- Show animated charts on page load
- Layout of this page divided by:
Header
- Logo need linked to System Overview page
- The threshold condition icons should show a total count that are either in a “warning” or “exceeded” state.
- Numbers indicator should be able to filled with more than 2 characters
- When user click Error or Warning, need show the flyout list (screenshot: 2-6-Sub-menu--Error-list.png)
- Setting button will load the Configuration modal window.
Setting Icon
- Click this Setting Icon will take user to Configuration Page (screenshot: 7-2-Configuration-Edit-State.png)
- Configurations modal window will be required to set system wide thresholds (per graph)
- Each section have collapse/expand function
- You can see on each threshold, there’s 2 drag holder.
- Bar need reflect the color status
- When being drag, left area will always use green colored, same like warning and error area.
- When dragged there’s tooltips information of percentage, this need dynamically change and still show when holder being dragged.
- Each tabs represents each page configuration.
- Show sample data for each tabs, match active and inactive state for tabs
- Create legend information on bottom of modal.
- When click Edit button, checkboxes show up in the left side
- Match checkboxes style.
- User can checked on/off the checkboxes
- Click Save button on each section will hide the checkboxes
- There's ability to Add New Monitor Item by click “+” button
- Flyout will show after user click “+” button (screenshot: 7-1-Configuration-Add-Items.png)
- Add Items will be dead link
- User can type in the input field
- Add Item area need scrolling function
- User can checked on/off the checkboxes
- Show scrollbar that allow user scrolling to the bottom of modal window
- Click outside the Add Items area or “+” button will hide the modal
- Save button and “x” button will close the modal
Calendar
screenshot: 2-5-1-Calendars-Calendar-view.png
- User will see another flyout when click calendar icon
- There’s tab function to let user access List View and Calendar View
- You need reverse the active state colors to blue and inactive for grey
Calendar View
- There’s arrow up and down to navigate the month
- In the right side, there’s “+” button to let user add Event. Details information explained below
- Calendar must always load by current month
- Match all calendars properties
- Current date marked with transparent border
- Event marked with blue rounded
- Event list show in the button of selected date
List View
screenshot: 2-5-2-Calendars-Calendar-list.png
- This is List view look
- User See list view of current week
- You can see some separated section in flyout
- User can navigate tabs in the bottom to show related week
Add Event
screenshot: Calendar-Add-Event-01.png
- This is screen when user add new event by click the “+” button
- There’s input Event name
- Date need use calendar picker
- Show how date function
- Checkboxes for Weekly Reminder
- Cancel button will hide the flyout
- After click Save button, user will see Success Message (screenshot: Calendar-Add-Event-02.png)
- Close link will hide the flyout
- Add more events will load Add New Event flyout
User Information
- Put dead link for now
System Check
- The system check counter will contain a total count for each specific object/s on a per day basis
- System check will show the trend based on the previous day for all Counters
- Each counters will show: Up/Down trend indicator and Percentage also Total counts and %.
- See the difference color and icon for each state
- Show us easy way to configure these information
- Progress need show animation on page load
- This area has slideshow feature.
- Click Prev and Next arrow will slide content per 1 counter.
Main Navigation
- Match main navigation content
- Match active and inactive state
- Notice there’s arrow for OnGuard Server, Database Server and Communication Server tabs
- Click the arrow need show up dropdown menu (screenshot: Dropdown-Navigation-tabs.png)
- Show sample content for other tabs
Abnormal Hardware Conditions
- Hardware conditions tracked should include:
-- Readers
-- Inputs
-- Outputs
- Create flyout for each conditions. You can see design look here (screenshot: 2-2-System-Overview---Hover.png)
SQL Backup
- This section will explains success or failed status of SQL Backup
- Put deadlink for buttons
- Create separate page to show the failed status (screenshot: 2-1-System-Overview-B-SQLfailed.png)
System Performance
- System Performance show up filter on top date allow user set date range on datepicker
- User can check by date range or dropdown
- Unchecked radio will disabled the input
- Dropdown values are: By Hours, By Week, By Month and By Years.
- Match chart look, notice there’s line above chart to indicate yellow and red status
- Match chart content
Security KPI
- This section will use tabs function to navigate List View and Quick Chart
- Put empty content for Quick Chart tab
- Each items will have a threshold configured and trend indicators based on the historical data
- Show us how tooltips look for information icon on hover (screenshot: 2-2-System-Overview---Hover.png)
- There's button to trigger quick chart information on hover (screenshot: 2-2-System-Overview---Hover.png)
- Chart preview need to be build on chart plugin not image based
- Match content and color difference.
Area Utilization
- Area Utilization on the overview page will show the areas with the highest volume of utilization.
- Show us easy way to config the chart.
- Show animation progress on page load
- Need ability to show information and chart preview like Security KPI section
2. Area Utilization
screenshot: 3---Area-Utiliztion.png
- Show animated chart on page load
- Area Utilization show up on top
- You need show 4 Utilization Areas:
-- Headquarters
-- Carrier
-- Secure Printing
-- Lincolnton
- Make sure filter works for each section
- Match color difference for each charts
- hover on bar will show the preview, mimic for all bars
3. OnGuard Server
screenshot: 4-OnGuard-Server.png
- This OnGuard page display these chart
- Show animated chart on page load
- Re-use completed codes for System Overview chart
OnGuard Alarm
- OnGuard alarm will show the top events and the total counts of each alarm type.
- User can see details by hover on bar
- Match the content
New Badges Created
- This chart will show area type
- Hover on dot area will show toolttips
Archive Counter
- This section show a counter that shows the amount of days that has passed since the last OnGuard successful archive.
- Chart showing last archive day and today
- Hover on each timeline will show additional information
OnGuard Credentials
- Filters on top
- User need able to scrolling the charts
ls Services monitor
- Match table and chart content
Error Log file growth
- This chart need use Cumulative Line Chart Type. Refer sample: http://nvd3.org/examples/cumulativeLine.html
4. Database Server
screenshot: 5-Database-Server.png
- Re-use completed codes for System Overview chart
SQL server transactions
- This display table for all SQL Server Transactions
SQL data file growth
- Graph that shows the SQL data file growth
- Graph can updated by change the dropdown
Average time per user
- Filter displayed on top
- Graph that shows the SQL data file growth
- Graph can updated by change the dropdown
SQL size growth
- Graph that shows the SQL data file growth
SQL Backup
- A counter that shows the amount of days that has passed since the last OnGuard database back-up
- Put dead link for now
SQL server performance monitor
- Monitor additional SQL server performance indicators
- Indicators to monitor include: Live user connections, SQL Database size and free space, average lock wait time.
- User can navigate through each tabs
5. Communication Server
screenshot: 6-Communication-server.png
- Re-use completed codes for System Overview chart
Hardware Counts
- User can scrolling to the right side
- Show animated progress on page load
Server Throughput
- Use bar type chart
Server Load
- Use line type chart.
Comm Server Error Monitor
- Ability to monitor the Error for NAK Counter and FailedRPC Counter
- Show difference style for both services
- Need show clear number indicators
Comm Server Log File Growth
- Show the growth of the comm server log files with the ability to see 7 day trend for investigation purposes.
Comm Server Alarms
- Comm Server alarm will show the top 6 events and the total counts of each alarm type.
- User can access details by hover the bar
- Details information will display full size version of graph and description
- Notice there's Next button to navigate other graphs
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Documentation of your prototype
The following pages are required in your submission on tablet and phone by using Responsive Design solution
1. Login
2. System Overview
3. OnGuard Server
4. Database Server
5. Communication Server
HTML/CSS Requirements:
You're encouraged to use and take advantage of CSS3.
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 stylesheet.
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 Browser Requirements section.
Web Browsers Requirements
- IE10
- Firefox latest version
- Safari latest version
- Chrome latest version
Mobile Devices Browsers Requirements
- Safari Mobile on iPad
- Safari Mobile on iPhone
- Android Browsers on Nexus 5 & 7