Styx Dashboard Application Wireframe Challenge

Welcome to the Styx Dashboard Application Wireframe Challenge.

The objective of this Challenge is to create the HTML wireframes for Styx Dashboard application based on provided conceptualization document and guidelines stated on challenge details.
Styx Web Dashboard application will be developed under desktop/tablet and mobile platform.
But, for this challenge you just need focus on Desktop version as starting point to show how each page look and feel.

There will be more wireframe series of Styx Dashboard application, looking forward your solutions on this first challenge to impress client!
Have some questions related challenge requirements? Let's discuss on challenge forum!

Round 1

Your initial Styx Dashboard Application Wireframe solution for client review, contains these following screens:
1. System Overview/Homepage
2. Area/Building Utilization
3. OnGuard Server
Any comments about your wireframe, make sure all pages have correct flow!
 

Round 2

Final Styx Dashboard Application Wireframe frame contains these following screens:
1. System Overview/Homepage
2. Area/Building Utilization
3. OnGuard Server
4. Database Server
5. Communication Servers
Any comments about your wireframe, make sure all pages have correct flow!

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

For this wireframe challenge, we need you create Styx Dashboard Application Wireframe solution of Desktop version Only. Read more data need show up below

Notes
- You need make sure Styx Dashboard desktop version will be easy to convert into tablet and mobile version using Responsive Design Solution
- For desktop version, with much data/graphic on dashboard need displayed we need you use fluid layout solution.
- We need you suggest colorful graphic on your wireframe to indicate warning/error/success or some chart needed on wireframe design
- Best Practice Design Reference of Dashboard Look and Feel
Reference #1
Reference #2

Wireframe Requirements:
These following pages are required on your wireframe solution. Refer details concept doc (Web Dashboard - Final v5.docx) for each sections below:

1. System Overview/Homepage
Conceptualization spec: page 9

1.1 Default System Information
- This system information will show up on all pages, they are:

1.1.1 Schedule Event
- User will have ability to add/view upcoming event, like system upgrades, security patches etc. The best way is display calendar format to view all upcoming event
- Current date/time should be viewable
- These following form should show up when schedule an event:
-- Subject,
-- Location,
-- Start time,
-- End time,
-- Priority,
-- Reoccurrence

1.1.2 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:
1. Up/Down trend indicator and %
2. Total counts and %. The counters could range from 1 to over 10000 additional objects each day and the total counts could be in the 100000s.
- Counters need show:
-- Visitors,
-- Visits,
-- SQL Backup
-- Panels with Communication Issues,
-- New Badge Created
-- Access Panel
-- Readers
-- Inputs
-- Outputs

1.1.3 Navigation
- User should easily navigate to other dashboard pages through use of a navigation menu or sidebar.
- Navigation must also show the threshold condition icons for each object that is currently in a threshold condition.
- Navigation Menu needed:

- System Overview/Homepage,
-- Events
-- Access Panels
-- Readers Video
-- Servers
-- Cameras
-- Inputs
-- Outputs

- OnGuard Server,
-- Events
-- Access Panels
-- Readers Video
-- Servers
-- Cameras
-- Inputs
-- Outputs

- Communication servers
-- Comm Server 1
---- Events
---- Access Panels
---- Readers
---- Inputs
---- Outputs

- Area Utilization
---- Headquarters
---- Carrier
---- Lincolnton
---- Secure Printing

- Video Servers
-- Video Server 1
---- Cameras
-- Video Server 2

- Camera

Note: Under each navigation hierarchy you should be able to navigate to each graph or set of data outlined on each page.

1.1.4 Threshold Condition Icons
- The threshold condition icons should show a total count of all configured thresholds that are either in a “warning” or “exceeded” state.
- The user should be able to drill down on the threshold condition icon to see the list of specific items that are in threshold condition.
- You need show “warning” or “exceeded” to indicate overall system conditions
- Also remember, some navigations and content need show these threshold conditions icons as well.

1.2 Data Content Area

1.2.1 Abnormal Hardware Conditions
- Hardware conditions tracked should include:
-- Readers
-- Inputs
-- Outputs
- Need show threshold icons for each conditions

1.2.2 Area Utilization
Details information: please read page 10
- Area Utilization on the overview page will show the top 6 areas with the highest volume of utilization within the last 24 hours. 
- The standard usability metrics for graphs would apply.

1.2.3 Security KPI
Details information: please read page 11
- Security KPI is a performance indicator of key items within the OG system
- Each items will have a treshold configured and trend indicators based on the historical data
- Insert Security KPI's stated on concept doc. 

1.2.4 CPU Performance
- Research how chart should designed for this CPU Performance section

1.2.5 Memory Usage
- Research how chart should designed for this Memory Usage  section

2. Area/Building Utilization
Details information: please read page 11
- You need show 4 sample charts on this page:
-- Area Utilization Headquarters
-- Area Utilization Carrier
-- Area Utilization Lincolnton
-- Area Utilization Secure Printing
- The standard usability metrics for graphs would apply.
- Thresholds should be tracked on a per day basis

3. OnGuard Server
Details information: please read page 11
- This page should display these items:
-- Server Performance Monitor
-- OnGuard Events
-- OnGuard Credentials
-- OnGuard services monitor
-- OnGuard log file growth
-- Archive Counter
- Research how each section layout should designed?

4. Database Server
Details information: please read page 13
- This page should display these items:
-- SQL server transactions
-- SQL data file growth
-- SQL log file growth
-- SQL Backup counter
-- SQL server performance monitor
- Research how each section layout should designed?

5. Communication Servers
Details information: please read page 13
- Must support multiple comm servers and have dashboard pages for each communication server configured.
- This page should display these items:
-- Comm Server Performance Monitor
-- Comm Server Events
-- NAK counter
-- Comm server log file growth
-- FAILEDRPC counter

Target Audience
Styx Dashboard Application Internal Employee

Judging Criteria
- User Experience of Styx Dashboard Application.
- Completeness and accuracy of the wireframe as defined in the attached requirements.
- How well your wireframes provide a consistent user flow
- Effortless build tablet and mobile version based on your Desktop version wireframe?

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
Wireframes should be built in HTML or Axure. The resulting files are not critical in this Challenge. The most important point is that all the content is listed and the pages are linked together to show page flow.
Keep your source files out from this submission folder.

Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.

Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.