Styx Dashboard New Look Configuration Updates Design Challenge

Welcome to the Styx Dashboard New Look Configuration Updates Design Challenge.

For this challenge, we need you update existing Configuration Modal and some required screens related to the Styx Dashboard Application Configuration.
We provided Application new look and feel as base of design updates.

Round 1

Your submitted design solution for client review:
1. First Time Configuration
2. Alerts/Notifications
3. Graph Mode
Note: It will be great if you can submit more pages for our review!

Round 2

Final design + updates from checkpoint feedback:
1. First Time Configuration
2. Alerts/Notifications
3. Graph Mode
4. Print Feature
5. Configuration Page

Styx Dashboard application will provide graphical representation of the various transactions and statuses of the OnGuard Enterprise AccessControl system .
Users will see page interface for interacting and analyzing important security data from all OnGuard, database and communication servers within the security architecture.

File Downloadables:
current-full-prototype.zip - Current UI Protototype(HTML/CSS/JS)
storyboard-new-look.zip -New Look and Feel Storyboard (Source created onAdobe Illustrator)
storyboard-old-look.zip - Old Design Storyboard (Source with Adobe Photoshop)

Important:
- Click around on attached UI Prototype pages to familiar with Styx Dashboard application pages
- Your submission design need to look as one set with New Look and Feel.
- All new design elements on Styx Dashboard application need mimic and follow  Google Material Design Guidelines.
- You can grab and re-use some design element from Old Design Storyboard
- Storyboard New Look not have all page design, some updates made directly into UI Prototype. You can take screenshots of current UI Prototype in your submission.
- But, make sure all submissions requirements editable in your design source files.
- Submission Screen Size: 1024px width and height up to designers
- FYI: This application supported Desktop and Tablet browser platform.

Submission Requirements:

1. First Time Configuration
The application will direct users to the main home page after initial successful log in.
Pre-conditions: the user has logged in to the application or returned back to the home screen of the application. The user has to be logged in to the application to perform this action.
- Post-conditions: The user can save any dashboard page as their homepage/landing page on the next successful login.
- All Thresholds and warnings must include simple alert configuration
-- Name – First and Last
-- Email Address
-- SMS number

2. Alerts/Notifications
- An alert configuration wizard should allow a user who has access to the system to create recipients for alerts for any of the graphs or data sections configured in the system.
- Show us a button that placed across the page to access this Alert and Notification
- We're thinking to use modal window layout for this screen. Any better ideas?
- Alert wizard for creating recipients and assigning alerts:

2.1. Create New Alert
- First and Last Name of the recipient.
- Allow user to select what type of alert delivery method they would like to receive:
-- Check either an SMS, email address or both – selecting both in the initial screen will allow the user to choose what type of method for each threshold. Warning or Error. i.e. a user can have an email sent on a warning threshold for a graph and both email and SMS for an error threshold for the same graph.
-- If a selection is not made for SMS or email the user will not have the ability to select the type of alert in the wizard.
- The wizard will then navigate the user through the different dashboard pages and allow each graph to be selected for alerts.
-- Each graph will have two separate thresholds to configure for a minimum value and a maximum value. The user can select none, one or both thresholds.
-- Under each threshold selected to receive the alerts the user can select to receive it via SMS or email.
- The notifications will be sent at most once a day; the first notification will be sent when the threshold is reached. subsequent alerts will be sent at an interval (in hours or days) which will be configurable through a configuration file.
- The email and sms text will be configured through a configuration file. There will be one template that will support all notification types.

2.2. Alert Notification Template
- Name
- The (warning or error) threshold of (actual threshold) for (data point) has reached its limit. You will receive an alert every (day or hour) until the (data point) drops below the (warning or error) threshold.
- Example: System Performance
 

Note: The wizard will guide the user through each page and allow the configuration of thresholds on all graphs or data sections represented.

System Overview
- Database Back-up - threshold in days
- Abnormal Hardware – No threshold, should be alerted on any abnormal condition
- System Performance
- Security KPI
- Area Utilization

Area Utilization Page
- Each configured area

OnGuard Server Page
- System Performance
- OnGuard Alarm – Separate page for configuring alarms.
- New Badges Created Counter
- Archive Counter
- OnGuard Credentials by type
- OnGuard Credentials by status
- Service Monitor
- Error log Monitor

Database Server Page
- System Performance
- Database Back-up
- Database Service Monitor
- Database Log Monitor
- Database Size Growth
- Database Connection Monitor

Communication Server
Note: Page A Separate page is required for each communication server configured.
- The ability to copy the configuration from one comm server to another one should be implemented.
- System Performance
- Hardware Counts (filtered by comm server)
- Communication Server Error monitor
- OnGuard Alarm (filtered by comm server) Separate page for configuring alarms.
- Service Monitor
- Comm Server Error log file growth
- Save alert

-- Show all recipients with active alerts configured in a console windows and allow edit of each.
-- Need a way to show details of alerts using a tree or similar.

3. Graph Mode
- Show us a button that placed across the page to access this Graph Mode
- We're thinking to use modal window layout for this screen. Any better ideas?
- Graph mode will allow the user to select the desire graph mode next to any of the date pickers within the dashboard pages. The mode options will be “Live” or “Historical:

3.1 Live Mode
- The live mode option will set the entire dashboard in a live or current mode which will show data in a live view based on current date and the last 7 day range.
Live mode is invoked by selecting the “live mode” icon located next to the date range pickers. Every dashboard page and all the associated data should represent the date range selected.

3.1 Historical Mode
- The historical mode option will set the entire dashboard in a historical mode which will show data in the past based on a date range specified in any of the date pickers within the dashboard pages. Once the date range is set the historical mode is invoked by selecting the “historical mode” icon located next to the date range pickers. Every dashboard page and all the associated data should represent the date range selected.
- If the date ranges are changed but no mode is selected the specific page will remain in the user selected range but all other pages will remain in the current date range. If a user navigates away from the specific pages and then back,the date range should remain what the user configured the initial page for until either a mode change or user logout.
- The user should have the ability to visually see what mode the graph/s is in.

4. Print Feature
- Show us a button that placed across the page to access this Print Feature
- We're thinking to use modal window layout for this screen. Any better ideas?
- Function to allow the print function of all web pages to .pdf for report purposes. Both current date and/or historical data in a date range should be able to be printed. The pages will be printed based on the current graph mode selected.

5. Configuration Page
- You can click "gear" icon on attached prototype to see how Configuration works in current application
- For this challenge submission, Configuration page need moved into page layout instead modal window

5.1 All Pages
- All graphs must have a threshold configured for both warnings and error conditions. Each section should correlate to the specific pages they are located on and the flow should be similar to the flow of the actual web pages where the graphs are represented.
- The correct data (% or # value) should be represented based on the graph data.

5.2 General Settings Page
5.2.1 Thresholds
- Thresholds will be configured for all data points configured in each graph or data content area
- The threshold configuration should allow the System Admin to configure the duration of the set threshold. The duration can be set in hours or days or none.
- Each threshold (Warning and Error) for each data point must include a duration for the threshold. The default will be set to 1 day for data points that require a duration and none for items that do not. i.e. Abnormal Hardware would be set to None and database back-up would be set to 1 day by default.
- We need NEW design for all threshold bar. Suggest us the new look.

5.2.2. Trend Configuration
The trends configuration should allow the System Administrator to configure the trend length in days.
- Trend configuration should be selectable in the comparison in the last “X”
-- Trend algorithm should be developed as part of the development
-- The trend duration is user configurable in days.
-- The system should allow the configuration of the “historical” graph mode to over-ride the configured trend threshold. If the “historical graph more is set to 30 days the trend algorithm will use the 30 days as the trend duration.

5.2.2. Alarm Configuration
- Alarms must have a separate configuration page due to the high number of types of alarms to be configured (1800+).
-- The system should track all the alarms that can be generated in the OnGuard system immediately after install.
-- The user should be able to configure a duration for the “evaluation” mode. Configured in days
---- After the “evaluation” time the system should provide a recommended warning and error threshold based on the data captured during the “evaluation” mode.
---- Only alarms that have a numerical count generated during the “evaluation” mode will have thresholds configured
---- The alarm configuration page should categorize the alarms into two categories
------ Active Alarms with configured Threshold
------ Unused alarms will have a pre-configured threshold of 1 (so that the user is always notified the first time the alarm occurs and can then adjust the threshold as desired).

5.2.3. Error Log Configuration (OnGuard Server, Database Server and all configured Communication Servers)
- The OnGuard log monitor should show a live representation of the growth of the logs actively being monitored
- All logs that reside in the “logs” directory of the OnGuard installation directory should be monitored .
-- A list of actively monitored logs should be captured in the configuration screen for each server.
-- Each line should allow the user to view the actual value of the data and the date/time by hovering over the bars.
-- The hover over should display all data for the line graphs, and the date/time.
-- Each data point will have a numerical value in megabytes. The mb symbol should be displayed.
-- The date time format for the hover will depend on the duration of time being viewed in the overall graph.
---- If the duration is 1 day or less the smallest increment of data points should be in minutes and date time should include minutes. Example: 12/20 1:20PM
---- If the duration is more than 1 day, the smallest increment of the data points would be an hour. Example 12/20 1:00PM
-- The date and time on the X-axis should be: (month/day time) example: 12/20 11am
-- The Y-axis should be from 0 to the highest mb value of the log file per day that is being displayed on the active graph. The increments should be adjusted based on that number.
-- The legend below should be removed and not part of the “free” version.
-- New log files to monitor can be added within the configuration pages of each server.
-- A wizard should allow the user to select the server, browse to the file and provide a discriptive name.
-- Once the new log file monitor is created the service will begin tracking the growth and displaying it on the corresponding graph.

5.2.3 Create new Area Utilization Monitor
- A System Administrator user must be able to create new Area via a wizard
—- A wizard is required for configuring Areas
—- Create new Area
—- Name the Area
—- Assign Accesscontrol readers to the area via a search window and a selection box.
—- Save the area
- Show all current areas configured in a console and allow edit of each.

- The following data items within the configuration screens should have specific measurements as outlined below: require thresholds to be configurable. The graphs within the pages should - show the specific measurements as well.
NOTE: Abnormal Hardware conditions do not need thresholds, if there are any abnormal conditions it should be an alert.

5.2.3.1 Total Systems Count – Top banner that resides on all screens.
- Visitors – Numerical Count
- Visits – Numerical Count
- Access Panels – Numerical Count
- Readers – Numerical Count
- Inputs – Numerical Count
- Outputs – Numerical Count
- Cardholders – Numerical Count
- Badges – Numerical Count

5.2.3.2 System Overview Page
- Database Back-up - threshold in days

- System Performance
-- CPU – threshold in %
-- Memory – threshold in MB
-- HD – threshold in MB
-- Peak Usage – threshold in %

- Security KPI
-- All Events – Numerical Count
-- Door Forced Open - Numerical Count
-- Door Held Open - Numerical Count
-- Alarm Active - Numerical Count
-- Line Error Active - Numerical Count
-- Temp Badges created - Numerical Count
-- Lost badges created - Numerical Count
-- New badges created - Numerical Count
-- NAK Errors - Numerical Count
-- FAILEDRPC errors - Numerical Count
-- Database size in MB
-- OG Application Server memory – Memory usage in MB
-- SQL server memory – Memory usage in MB
-- OG Application server Lenel error log – file size growth in MB
-- DataConduIT error log growth – file size growth in MB
-- DataExchange error log growth – file size growth in MB
-- Duration since last successful SQL database backup – In days
-- Duration since the last successful archive – In days

- Area Utilization
-- Each area should be measure with a numerical count

5.2.3.3 Area Utilization Page
-- Each area should be measure with a numerical count
-- Each individual reader could be measured separately. An option to have granular thresholds should be configurable. If selected for one logical area you can set thresholds for each reader configured.

5.2.3.4 OnGuard Server Page
- System Performance
-- CPU – threshold in %
-- Memory – threshold in MB
-- HD – threshold in MB
-- Processor – threshold in %
-- Peak Usage – threshold in %

- OnGuard Alarm
-- All alarms are measured with a numerical countNew Badges Created Counter

- New Badges
-- New badges are measured with a numerical count

- Archive Counter
-- Archive data is measured in days

- OnGuard Credentials
-- Credentials are measured in days for each credential outline. Credentials can range from anywhere from 1 to 100.

- Service Monitor
-- All LS OnGuard and WATCH services should be monitored
-- Each monitor is measured in multiple thresholds
---- CPU threshold measure in %
---- Memory threshold measured in MB
---- Crashes threshold measured in days

Error log Monitor (Each error log configured with be measured in MB)
-- Multiple error logs can be monitored
-- A wizard is required for configuring error logs
-- Show all active error logs configured and allow edit of each.

5.2.3.5 Database Server Page
- System Performance
-- CPU – threshold in %
-- Memory – threshold in MB
-- HD – threshold in MB
-- Peak Usage – threshold in %

- Database Back-up
-- Threshold in days

- Database Service Monitor
-- Each monitor is measured in multiple thresholds
- CPU threshold measure in %
- Memory threshold measured in MB
- Crashes threshold measured in days

- Database Log Monitor
-- Each error log configured with be measured in MB
-- Multiple error logs can be monitored
-- A wizard is required for configuring error logs
---- Create new Error log
---- Name the Error log
---- Browse to select the error log
---- Save Error log

- Database Size Growth
-- Threshold should be configured in mb.

- Database Connection Monitor
-- Connections threshold in numerical value
-- Lock Wait times threshold in numerical value

5.2.3.6 Communication Server Page – Each communication server will have its own page.
- System Performance
-- CPU – threshold in %
-- Memory – threshold in MB
-- HD – threshold in MB
-- Processor – threshold in %
-- Peak Usage – threshold in %

- Hardware Counts
-- All Hardware counts are measured with a numerical count

- Communication Server Error monitor
-- Communication Server Error monitor is measured with a numerical count

- OnGuard Alarm
-- All alarms are measured with a numerical count

- Service Monitor
-- Each monitor is measured in multiple thresholds
-- CPU threshold measure in %
-- Memory threshold measured in MB
-- Crashes threshold measured in days

- Comm Server Error log file growth
-- Each error log configured with be measured in MB
-- Multiple error logs can be monitored
--A wizard is required for configuring error logs
---- Create new Error log
---- Name the Error log
---- Browse to select the error log
---- Save Error log
-- Show all active error logs configured and allow edit of each.

- No alarms generated in x mins/sec
-- Each communication server will be measure in seconds or minutes and depends on the configured threshold.

Target User
- Styx Dashboard Application Users

Judging Criteria
- How well you update and suggest Updated Configuration Flow.
- Cleanliness of your graphics and design.
- User Experience.

Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
All Requested Challenge Submission Requirements stated above.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Adobe Illustrator and saved as layered PSD or AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.