Challenge Summary
Welcome to the Styx Dashboard Application Responsive Design Challenge.
The goal of this challenge is to create some storyboard screen to kick off Styx new Dashboard Application with Responsive Design Solution.
We are at the beginning of this project and would like to rapidly design and prototype this application.
The application must look awesome, modern, using “flat” design theme in the spirit of Apple’s iOS 7, Google’s Material Design, and Microsoft’s Windows 8 design.
Most importantly it must be simple, easy and hopefully fun for the users to use they are looking to drive a fantastic experience of dashboard application!
Round 1
Your submitted design solution for client review:
1. Login Page
2. System Overview
4. OnGuard Server
7. Configuration Page
Readme.jpg : contains your notes about your submission.
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback:
1. Login Page
2. System Overview
3. Area Utilisation
4. OnGuard Server
5. Database Server
6. Communication Servers
7. Configuration Page
8. System Overview (Mobile Version)
9. Graph Color Set
Readme.jpg : contains your notes about your submission.
Make sure all pages have correct flow! Use correct file numbering.
Styx Dashboard application will provide graphical representation of the various transactions and statuses of the OnGuard Enterprise AccessControl 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.
Supported Platform
- iOS, Android, Windows Phone 8.
Design Theme
- Present design feeling of Technology industry trends/benchmarks
- Modern, Flat and Professional
Design Considerations:
- You're encouraged to suggest and improve better User Experience than what you see on wirefreme, provided wireframe is just starting point to help you design better look and feel.
- We would like you to focus on the overall Styx Dashboard application and how a user would interact with its features.
- Application must need look consistent but cleverly adapted layout screen for each devices. Refer this site for best practice of responsive design website.
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- We need the screens only for Desktop - 980px as maximum content width and height as required
Submission Requirement
Wireframe: onGuard-WF.zip (This is just starting point, you need show us better UI/UX)
1. Login Page
- Show how Login Page designed for Styx Dashboard Application
- Application logo need show on this page
- Forms need show: Username, Password and Directory
- Directory field is a dropdown
- Login and Cancel button placed in the bottom
- Create separated screen that explains about Error Validation style
2. System Overview
2.1. Default System Information
- Header contains system information that will show up on all pages, they are:
Logo
- Put attached onGuard Logo (OG_logo.zip) in your submission design. Make sure logo looks prominent on your design
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.
- Current wireframe just show dummy text, how the actual content should design?
Schedule Event
- User will have ability to view upcoming events, like system upgrades, security patches etc. The best way is to display calendar format to view all upcoming event
- Current date/time should be viewable.
- There's list view and calendar view, how you design solution for those view options?
- These following form should show up when schedule an event:
-- Subject,
-- Location,
-- Start time,
-- End time,
-- Priority,
-- Reoccurrence
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 Percentage
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
-- New Badge Created
-- Readers
-- Communication,
-- Access Panel
-- Inputs Outputs
Setting Icon
- Click this Setting Icon will take user to Configuration Page
User Information
- How you design user information on header part
Main 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.
- Show different state for active and inactive style
- Navigation Menu needed:
-- System Overview
-- Area Utilization
-- OnGuard Server
---- Show some sub-menu
-- Database Servers
---- Show some sub-menu
-- Communication servers
---- Show some sub-menu
2.2 System Overview Content
Abnormal Hardware Conditions
- Hardware conditions tracked should include:
-- Readers
-- Inputs
-- Outputs
- Create separate screen that explains how user see quick information when click one of conditions
- Show us how detail condition look
SQL Backup
- This section will explains failed status of SQL Backup
- How you design failed status?
System Performance
- System Performance monitoring will show the real-time status of the some server represented on the dashboard.
- The items to show at a minimum are CPU and Memory, HD utilization, read/writes and peak usage, processor information
- Design how Synthesizer graph style would look
- You might need add way to navigate if graph need displayed exceed screen view
Security KPI
- Security KPI is a performance indicator of key items within the OnGuard system
- Each items will have a threshold configured and trend indicators based on the historical data
- Show us how tooltips look for information icon
- There's button to trigger quick chart information
- On quick chart information, user can adjust data need displayed
- You can see Chart and List View for Security KPI, how you design them?
Area Utilization
- 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.
Cameras
- This graph will track Camera status within the last 24 hours.
3. Area Utilization
- You need show 4 sample datas
-- Area Utilization Headquarters
-- Area Utilization Carrier
-- Area Utilization Lincolnton
-- Area Utilization Secure Printing
- Remember to show consistent graph style with Area Utilization on System Overview page
- There's quick information when click the bar. How you design them?
4. OnGuard Server
- This page display these items:
Server Performance Monitor
- Notice this Server Performance Monitor graph show more than 2 items need to show per server.
- You might need add way to navigate if graph need displayed exceed screen view
OnGuard Alarm
- OnGuard alarm will show the top 6 events and the total counts of each alarm type.
- User can access details by click the bar
- Details information will display full size version of graph and description
- You might need add way to navigate if graph need displayed exceed screen view
New Badges Created
- This section displayed timeline that contains number indicator per day
- The last day always displayed in the right side
Archive Counter
- This section show a counter that shows the amount of days that has passed since the last OnGuard successful archive.
OnGuard Credentials
- OnGuard Credential graph shows the amount of new credentials created.
- The user should be able to select a specific badge type and view the amount of new credentials created for that day.
- Details information will display full size version of graph and description
OnGuard Services monitor
- Ability to monitor all windows services that are required for OnGuard
- Show the memory usage of each of the services.
- There should be a means to report on service crashes and restarts.
- Show difference state for Service Health bar
OnGuard Log file growth
- Show the growth of the OnGuard log files with the ability to see 7 day trend for investigation purposes.
- The Lenel error log, DataConduIT, and DataExchange logs should be monitored
- System wide thresholds should be configurable for each log file
5. Database Server
- This page should display these items:
Server performance monitor
- Notice this Server Performance Monitor graph show more than 2 items need to show per server.
- You might need add way to navigate if graph need displayed exceed screen view
- Graph can updated by change the User dropdown
SQL server transactions
- Graph shows current SQL server transaction monitor
- Show the number of open connections along with user, application name and connection time.
SQL data file growth
- Graph that shows the SQL data file growth
- Graph can updated by change the dropdown
SQL log file growth
- Graph that shows the SQL data file growth
SQL Backup counter
- A counter that shows the amount of days that has passed since the last OnGuard database back-up
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.
- Click each chart will displayed full version graphs
6. Communication Servers
- Must support multiple comm servers and have dashboard pages for each communication server configured.
- This page should display these items:
Comm Server performance monitor
- Notice this Server Performance Monitor graph show more than 2 items need to show per server.
- You might need add way to navigate if graph need displayed exceed screen view
- Graph can updated by change the User dropdown
Comm Server Events
- Comm Server alarm will show the top 6 events and the total counts of each alarm type.
- User can access details by click the bar
- Details information will display full size version of graph and description
- Notice there's Next button to navigate other graphs
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.
7. Configuration Page
- This new Configuration Page will be required to do the following:
- Set system wide thresholds (per graph)
- Lowest priority alarm (per graph)
- Browse for text files to populate the file growth graph
- Provide the ability to set the dashboard into a past date range for all the data in the dashboard
- Configure logical areas and assign access readers
- Each tabs represents each page configuration. Is the value make sense and related to the table?
- Create legend on top of page
- Notice there's ability to Add New Monitor Item, how you design?
8. System Overview (Mobile Version)
- We need you create mobile version look of System Overview only.
- We need responsive solution for mobile version.
- How you arrange the layout for mobile version?
- Use 320px width for this mobile version requirement
- Think about how navigation works
- How System Check look on mobile version?
9. Graph Color Set
- Give us recommendations for graphs common colors
- For examples:
-- Use colors x, y, z for graphs so they are consistent
-- User colors a, b or c for normal, warning and error color
-- Any other colors should added?
- All graph style need look as one design set!
Target User
- Styx Dashboard Application Internal Employee
Judging Criteria
- How well you create/design Styx Dashboard Application in storyboard screens.
- 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.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.