Challenge Overview
Welcome to Styx Dashboard Configuration Flow UI Prototype Challenge
For this UI Prototype challenge, we need your help update existing prototype by create additional “Configuration” page flow. FYI: Existing prototype use fluid layout on Desktop and Tablet Platform. As part of this challenge task you need make sure every pages running okay in required browsers.
Read more details requirements below
Final Submission Guidelines
Attachment Files
full-version-prototype.zip - Existing UI Prototype as Base Updates
storyboard.zip - Configuration Flow Storyboard (Source file use Adobe Illustrator Fomat File (.ai))
UI Prototype Requirements:
Important!
- This UI Prototype challenge tasks are only described in this specification
- Ignore how header bar look inside storyboard design, we need stick with current header in existing prototype
- Make sure your submission still run okay in required Desktop and Tablet platform
- You can ignore existing CSS and HTML validation error
- There are some updates not captured in storyboard look and just described in this challenge spec. Let us know if you need clarification!
- There might be final fixes for winner about add/remove alert in some sections after client review
0. Before you build Configuration Flow
- Need set active state after user click the “Alert” icon when flyout out still show
- System Overview page > “Security KPI”, on 1024px width and “Alert” flyout opened, we need progress bar show fluid width and always placed inside the box
- Alert flyout, hover above “Error” and “Warning” list need show white color text for time information
- We add 1 button below “System Counts” slider, that is for “Print”
- Home icon can be removed
- Print icon need let user go to Print Preview for related page. Read more detail information below
1. First Time Configuration
screenshot: styx_p1-1-1.png
- After user logged in, we need show “Personal Configuration” on page
- This is how form look after user type each field (screenshot: styx_p1-1-2.png)
- There’s a dropdown, here’s the options need displayed:
-- System Overview
-- Area Utilization
-- OnGuard Server
-- Database Server
-- CommServerWC1
-- CommServerMA1
-- CommServerEC1
- System Overview need selected by default.
- When user change the dropdown, another time user logged in, need take to related page based on selected option.
- User can change “Personal Configuration” when click the User icon and username in right side of header bar (screenshot: styx_p1-8.png)
- You need build function to capture data for all field
- Update “Email name” into “First Name”
- When user type different “First Name” and “Last Name”, need captured in the right header bar across the page
- Click “Save” and “Cancel” button need hide the modal window
2. Live and Historical Mode
screenshot: styx_p1-2.png
- We need keep same placement and style of date picker like existing prototype look above blue light bar
- Update existing icon in prototype with “pulse” shape icon
- Use icon with rounded shape like this screenshot (00.New-Look.png)
- By default the icon will be in live mode which is not greyed. The date range will be today -7 days by default.
- In this mode all pages can have different dates selected by the user as they navigate through the different pages.
- Activating the “historical mode by selecting the icon which will turn grey causing all pages to remain in the same date range duration.
- When a user navigates to other pages the dates stay in the same range allowing for analysis of data in the same range to look for similar trends.
- Deselecting the icon back to live mode will change back to today -7days
- Icon active state turning off (screenshot: styx_p1-3.png)
- Use existing style when user click datepicker (screenshot: styx_p1-4.png)
3. Alert/Notification Flyout
screenshot: styx_p1-5.png
- We need keep use existing “Alert” icon (bell shape icon) inside provided prototype. Ignore storyboard look
- By default all “Alert” icon and text need show grey color
- Once user set up the Alert for any option, then “Alert” icon and text turn into green colored
- This “Alert flyout” look when user click for “Alert” icon next to “System Performance” title
- By default “threshold” graph, “warning” and “alert” row show grey colored icon and text by default. Also Threshold need use transparent style
- Each icons need use toggle function
- Once every icon turn on, the threshold need become active (not transparent) (screenshot: styx_p1-6.png)
- Match different text color like storyboard look, yellow for warning and red for error states
- All the configuration of the actual alerts will be done in the configuration screens which we are still working through.
- Save Alert need close flyout and change the “Alert” icon into green if there’s selected notifications (screenshot: styx_p1-7.png)
- Cancel button need hide the modal and the “Alert” icon remain use grey colored if there’s no selected notifications
- You also need add for “Abnormal hardware” and “Database backups”. icons need placed in the right side of title Check across the page
- Click the icon need show different flyout content (screenshot: styx_p1-9.png)
- This flyout just need show 1 threshold
- Only need toggle 2 icons
- Save alert need turn to green, if user select some option
- Cancel button need hide the flyout
4. Print Preview
screenshot: styx_p1-10.png
- We need create “Print Preview” for main content of each pages
- Need to make sure the preview takes into consideration the historical graph mode and captures the data in the range specified.
- Feel free use any plugin to build this “Print Preview” function
- Print preview only capture main content area
- You need make sure click print preview in every pages render correct screen.
- Is page thumbnails possible to build? Let us know.
- Let us know if storyboard guideline not possible to build.
5. System Configuration
Important: New Navigation should be performed in a modal window and be sized 80% of the actual screen size. (00.Configuration-Modal-Window.png)
Important: Follow these sidebar menu navigation:
-- General
-- Threshold Configuration
-- Error Log Configuration
-- Trend Configuration
-- Alarm Configuration
- System Configuration triggered from the “Gear” icon in top of page (screenshot: styx_p2-1.png)
- We need show System Configuration as modal window format instead of page like storyboard look
- You can see page use multi level tab solution
- Match different active and inactive style for multi level tab
1). General Tab
- General tab consist of these sub-tabs:
a). Alert Recipient Sub-Tab
screenshot: styx_p3-1-1.png
- Icons for the Alert Recipients should be replaced with the current icon used for the alert (Bell shape icon). Re-use same icon everywhere in your prototype
- Search input placed on top of this screen
- User can remove each alert by click “x” button next to icons
- When user click “x” button in the right side of row, need remove related row
- User can click “Edit” link in every row, then show up the User Alert modal window (screenshot: styx_p3-1-2.png)
- Inside the modal window, there’s toggle links for “Show only Users alert” and “Show Full List”
- “Show only Users alert” as active link, you can put dead link for “Show Full List”
- User can collapse/expand each bar click the title bar
- On User information, show form input like storyboard look
- For page related alert you can use same data for simulation
- Make sure toggle function for the mail and message icons
- “Cancel”, “Save” and “x” buttons need hide the modal window
b). Alarm Configuration Sub-Tab
- This is alarm Configuration sub-tab
- You need show another children tabs, they are:
Evaluation and Setting Children Tab
screenshot: styx_p3-2-1.png
- This tab need displayed dropdown on top
- Show dummy content for now
- Progress bar placed below dropdown
- Use animation effect when load the progress bar
- Red text message displayed in the bottom
- User can change Setting options by click the radio buttons
Evaluation with Threshold Children Tab
- For this tab, you can re-use same layout like this (screenshot: styx_p3-2-2.png)
- Show different content for this tab
Evaluation without Threshold Children Tab
screenshot: styx_p3-2-2.png
- This tab show table layout
- User can scrolling the table
- User can checked each checkboxes
- Click Checkbox on top need select all checkboxes
- See buttons on top is disabled by default
- Once user checked the checkbox, each checkboxes need enable (screenshot: styx_p3-2-3.png)
- All buttons on top of header can be dead link for now
Inactive Alarms Children Tab
- For this tab, you can re-use same layout like this (screenshot: styx_p3-2-2.png)
- Show different content for this tab
c). Area Utilization Monitor Sub-Tab
screenshot: styx_p3-4-1.png
- This tab show table list format
- User can remove related row by click “x” button
- Show alternating row in page
- “Edit” can be dead link
- Click “Add” links need show up the modal window (screenshot: styx_p3-4-2.png)
- User can type on title input
- Also there’s multi-select below the input
- User can add selected option to the right side
- Also click “x” button need revert back to the left side
- “Cancel”, “Add New Area” and “x” button need hide the modal
2). Threshold Configuration
- Threshold Configuration tab consist of these sub-tabs:
a). Total System Counts Sub-Tab
screenshot: styx_p4-1-1.png
- When user focus/click in both input or dropdown, you need show grey background color
- For the top row, focus/click input or dropdown, need show “Warning” tooltip in the left side
- For the bottom row, focus/click input or dropdown, need show “Error” tooltip in the left side (screenshot: styx_p4-1-2.png)
- “FYI” Reader with grey color threshold mean that device in disable state
- These inputs just need support numbers format
- User can slide Duration time, and need reflected to the input in the left side
- User also can type in the input and reflected in the slide bar
- below the slider, there’s toggle option to change time duration
- Click “x” button need hide the flyout
- Apply same solution for all sections (screenshot: styx_p4-1-3.png)
- Change the value need change dropdown text into blue colored (screenshot: styx_p4-1-4.png)
b). System Overview Sub-Tab
screenshot: styx_p4-2.png
- For this tab, each section need collapsible functions
- For “System Performance” section, inputs need show “%” in the right side of input
- Also show different “MB” in the right side of input for sections in the bottom
- Also, threshold show rounded bar placement above the threshold
- When change the the input, need reflected to related threshold.
- Show correct placement from 0% to 100% range that’s mean in threshold, you need build from left to right
- User also need able to drag the rounded bar in threshold
- You need show same function when user click/focus on “Error/Warning” row
- Match data for each threshold
c). Area Utilization Sub-Tab
screenshot: styx_p4-3.png
- Important!: We need put Area Utilization tab of the general tab be implemented to this tab. You can place the table on top of this tab look
- Important!: We also need “Add New” link in the right side of collapsible “Area Utilization” tile as it is on the Error Log Monitor. (screenshot: styx_p4-4-1.png).
- This tab only need show 1 collapsible section
- You need show same function when user click/focus on “Error/Warning” row
- Match data for each threshold
d). OnGuard Server Sub-Tab
screenshot: styx_p4-4-1.png
- Each sections are collapsible
- Re-use completed “System Performance” threshold function
- For “OnGuard” alarm section, user can click each links to show up modal windows (screenshot: styx_p4-4-2.png)
- Show table list format
- Click “close” link need hide the modal
e). Database Server Sub-Tab
screenshot: styx_p4-5.png
- Each sections are collapsible
- Re-use completed “System Performance” threshold function
- Match every threshold content like storyboard look
f). Communication Server Sub-Tab
screenshot: styx_p4-6-1.png
- Important!: “Processor” threshold can be removed.
- Important!: “Server Throughput” and “Server load” can be removed from the threshold configurations
- Important!: On the communication server page/s, a setting needs to be configured for the “No events generated in xx sec/mins. User should be able to select seconds or minutes and then assign a numerical value. This was left out of the storyboard.
- Notice “Comm Server Log File Growth” show different content format
- Click Add New button need show flyout (screenshot: styx_p4-6-3.png)
- Browse button need open browser upload form
- User can type on Title input
- Add New Error Log need show additional threshold and form configuration
- Cancel button need hide the flyout
- Click Edit button need show editable flyout (screenshot: styx_p4-6-3.png)
- Simulate how user can remove related threshold
3). Error Log Configuration
screenshot: styx_p5-1.png
- This is Error Log Configuration look and feel
- There’s dropdown placed in the top side
- You need build the chart by re-use existing chart library
- Match how current chart look in prototype
- Below the chart, there’s 3 columns for “onGuard Server Log”, “Database Server” and “Communication Server”
- All list need show rounded with border, ignore solid button look
- When hover need show “x” and “edit” button
- Click the “x” button need remove related list
- Add Log button need show the flyout (screenshot: styx_p5-1.png)
4). Trend Configuration
screenshot: styx_p6.png
- This is Trend Configuration look and feel
- User can change the duration by click dropdown menu
- You can re-use completed function for slide bar
- Show checkbox in the bottom
- Click the label also need checked on/off the checkbox
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
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.
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
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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. 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.
Windows & Mac OS
- Safari latest version
- Firefox latest version
- Chrome latest version
Tablet/Mobile
- Safari Browsers on iPad (Landscape and Portrait View)