Styx OnGuard Integration Application Wireframe

Welcome to the Styx OnGuard Integration Application Wireframe Challenge.

The objective of this challenge is to create the HTML wireframes for Styx OnGuard Integration Application based on provided guidelines stated on challenge details.

In this wireframe challenge, we need you create required pages that explained on detail specifications, at the same time implement existing User Interface and User Experiences into your wireframe solution

Have some questions related challenge requirements? Let's discuss on challenge forum!

Round 1

These are required initial wireframe screens for Checkpoint Feedback:
1. Login Screen
2. Panel
3. Panel - List
4. Panel - Add
5. Panel - Import
6. Panel - Find OnGuard User
7. Assign Access - Choose OnGuard User
8. Choose Panel for OnGuard User
9. Choose Level(s) for Panel
Feel free to submit more pages for early feedback!

Round 2

Your Final wireframe for all the required screens with Checkpoint Feedback implemented.  
1. Login Screen
2. Panel
3. Panel - List
4. Panel - Add
5. Panel - Import
6. Panel - Find OnGuard User
7. Assign Access - Choose OnGuard User
8. Choose Panel for OnGuard User
9. Choose Level(s) for Panel
10. Select Access Level(s) for Panel - Readers tab
11. Select Access Level(s) for Panel - Floors tab
12. Select Access Level(s) for Panel - Floors or Reader Detail
13. Select Access Timeframe
14. Confirmation Status - NEW Record
15. Confirmation Status - CHANGE Record
16. Change Access - Find OnGuard User
17. Change Access - Choose OnGuard User/Badge
18. Change Access - Choose Panel
19. Change Access - Make Changes
20. Integrate Events
Notes.jpg: Please note any comments about your design for the Client

OnGuard Integration Application Description
Access control customers using the OnGuard enterprise system usually have locally-managed, off-site locations that require an access control solution., being a small to mid-size market access control system provides an efficient, low-cost solution for securing these off-site locations. However, the OnGuard central location would like to have knowledge of events that occur at these off-site locations, especially during off hours. Also, personnel who are based at the central OnGuard location may be required to travel to the off-site locations. When doing so, they are required to have access to the location.

- This application provides a method for the OnGuard operator to select events, which occur at the locally-managed sites, and have those events appear in the Alarms Monitoring section of the OnGuard application. The operator may observe those events and take action if required.
- Also, this application will provide the OnGuard operator a method to assign access to OnGuard cardholders who may be traveling to the off-site locations.

Downloadable Files
OG-Integration-Specification.pdf - Initial Sketch of the required screens
UI-UX-Guidelines.zip - User Interface and User Experience need apply to your wireframe submission
onguard-full-prototype.zip - OnGuard UI Prototype as Reference
OG_logo.zip - OnGuard Logo
logo.zip - Logo
 
Wireframe Expectations:
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- Follow the attached design branding files for your wireframe submission (UI-UX-Guidelines.zip). We need all things look and works consistently like Styx OnGuard application.
- You can also check Guideline from client website:  https://lenelux.atlassian.net/wiki/display/UG/UX+Guidelines+Home
- Let us know if need clarification about the UI/UX Implementation in your submission
- Implement User Experience as close as possible like provided sample.
- Your submission will develop as responsive application. Make sure your submission follow Responsive Design solution.
- For this challenge, please submit on 1024px width and height up to your submission  
- You MUST cover all screens mentioned in required sections below, if any requirement is missing in final submission the client will not look at it, so make a checklist for the required screens to make sure you create all of them.
- You MUST use wireframes note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.

Submission Requirements
Note: For all "page" info for each section below, please check -OG-Integration-Specification.pdf for visual guideline

1. Login Screen
a. Default
page: 3
Note: Directory is used for AD/LDAP credential validation because Organizations IT administrators can create more than one directory
- This is Login Screen look and feel.
- User enters user name, password, directory
- Save default directory selected by user for future login (persistent directory)
- Application Name: text field – default text with Integration Application
- Please check how login screen looks and feel on provided onguard-full-prototype.zip

b. Error - Choose Directory
page: 4
- When user does not select a directory, “choose a directory” error appears

c. Error - Invalid Credentials
page: 6
- When user does not enter valid credentials (either user name or password), “Login failed” error appears

d. Error - Network Down
page: 7
- When user attempts to login, but network is not available, “Login failed” error appears

2. Panel
page: 5
- This is default screen after user logged in

- Top Bar: Application name shall be “Integration Application.”
- Left Navigation consists of these navigation menus
- Panels (default option opened at login)
- Assign Access
- Change Access
- Integrate Events
- Top Bar title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Integration Application”
- Left nav names should be an easily configured string (for localization and tailoring), initially defaulted to English as shown

3. Panel - List
page: 8
- When this application is initially installed, this list will be empty until panels are added or imported
- There could be up to 2000 panels added in this application. Number of panels is unlimited – could grow to ~ 15,000 in the future.
- Expectation of Infinite scrolling.
- Default sort order – alphabetically
- Page name should be a text field, initially defaulted to “List Panels”
- From the panel list, users shall have icons for the following quick actions:
-- Display/Edit– see tP config detail and have ability to edit information). When information is edited – it should be revalidated as is done for an ADDED panel
-- Retrieve all events from tP panel (one panel at a time)

tP Panel Columns:
- Panel Name – friendly name(must be unique)
- IP Address (service level – global address)
- DNS Name
- Quick Action ICONS
- Display/Edit
- Retrieve Events (account for connection failure)
- Assign Access (account for connection failure)
- Validate Connection

4. Panel - Add
page: 9
- Top Bar title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Integration Application”
- Application title should be an easily configured string (for localization and tailoring), initially defaulted to English, “tP Panels”
(denoting left nav option it launched from)
- Top Right Dialog Box when user selects ADD Panel, should be an easily configured string, initially defaulted to English, “Add Panel”
- When required fields are entered in the top right dialog box appears, SAVE option becomes available
- When SAVE is selected, application backend attempts to connect to panel – message:
- Connection successful (and add panel to database) or
- Connection failed (do not add to database – if this occurs through edit, do not alter the database)

Entry Fields:
- Panel Name (friendly – must be unique)
- IP Address (service level – global address)
- DNS Name
- Badge Type (LOV pull down list)
- User Name (clear text)
- Password (encrypted / not displayed – can only change)

5. Panel - Import
page: 10
- Top Bar title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Integration
Application”
- Application title should be an easily configured string (for localization and tailoring), initially defaulted to English, “tP Panels”
(denoting left nav option it launched from)
- Top Right Dialog Box when user selects IMPORT, should be an easily configured string, initially defaulted to English, “Import
Panels”
- When Import Option is selected, an import dialog box appears, enabling user to browse for the file
- User receives confirmation message – File Imported Successfully or File Import Failed (text fields that are revisable)
- Documentation Note: When CSV file is used, users guide and instructions will recommend encrypted / secure storage for file and/or
deletion upon import

Import Dialog
- Browse for file & Import File
- Confirmation Message
-- File Imported Successfully – delete imported file or
-- File Import Failed
- After successful import, page shall redisplay with imported panel information.

6. Panel - Find OnGuard User
page: 11
- Top Bar title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Integration Application”
- Application title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Assign Access” (denoting left nav option it launched from)
- Do not display x of y records to optimize performance
- Note: Use Open Access API to obtain users (validate all fields are available via API). OG credentials are stored encrypted at Installation

Columns:
- Last Name, First Name
- Title
- Department
- Location

7. Assign Access - Choose OnGuard User
page: 12
- Top Right Box when opens accordion for user, should be an easily configured string, initially defaulted to English, “Profile”
- Lower Right Box when opens accordion for user, should be an easily configured string, initially defaulted to English, “Badge Information”
- When user selects an OG cardholder, profile information and the cardholder’s list of badges appears in an expanded window (READ ONLY). User will select a specific badge ID.
- Cardholder data is NOT editable
- Filter options for finding a particular user. See search guideline for determining these options
- Select single user to reveals the details
- Profile info can populated as PM sees fit. It can read-only but extended for editing capabilities in the future
- Note: User cannot select multiple cardholders

Columns
- Last Name, First Name
- Title
- Department
- Location

Badge Columns:
- Badge ID
- Badge Type

Profile Info
- Picture
- First Name
- Last Name
- Location
- Title
- Cardholder ID
- Phone
- E-Mail

8. Choose Panel for OnGuard User
page: 13
- Top Bar title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Integration Application”
- Application title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Assign Access” (denoting left nav option it launched from)
- If User Credential’s badge type and Panel badge type are incompatible, when user selects Choose Levels, display message
“Badge Type not supported at Panel” User documentation will guide OG Admin through creation of correct badge in OG SA
- This is stepped wizard (the user walks through 3 steps to complete his task)
- Once a step visited, it can be returned to using this navigation
- Once a badge is selected from the list, the Add Access button becomes available. Once clicked a modal appears
- Depending on how much panel information must be available, each list item can expand
Note: User cannot select multiple panels – User must select ONE panel

Panel Columns:
- Name
- IP Address
- DNS Name
- Badge Type

9. Choose Level(s) for Panel
page: 14
- Top Bar title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Integration
Application”
- Application title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Assign
Access” (denoting left nav option it launched from)
- When user selects a tP panel and access level and opens accordion, access level reader and floor details are displayed
- Expanding box functionality for examining addition item details

Note:
- Reader – active readers only assigned to access level, with schedule (could be up to 64 readers)
- Floors – active floors only assigned to access level, with schedule (could be up to 124 floors)
- User can select multiple access levels

Access Level Columns:
- Access Level Name

10. Select Access Level(s) for Panel - Readers tab
page: 15
- This screen look for Readers tab
- Tabbed functionality segregating readers/floors
- Floors/Readers can again be expanded to reveal schedule/holiday information
- User cannot change any access level information for a panel (display only for validation)

Reader Columns:
- Reader Name

11. Select Access Level(s) for Panel - Floors tab
page: 16
- This screen look for Floors tab
- Tabbed functionality segregating readers/floors
- Floors/Readers can again be expanded to reveal schedule/holiday information
Note:
- User cannot change any access level information for a panel (display only for validation)
- We may want to have list structured by elevator (future)

Floors Columns:
- Floor #
- Front/Rear
- Floor Name

12. Select Access Level(s) for Panel - Floors or Reader Detail
page: 17
- Tabbed functionality for segregating Intervals/Holiday Group
- Interval detail for Schedule assigned to Access Level
- Holiday Group for Schedule
- Su/Mo/Tu/We/Th/Fr/Sa needs to support localization
Note: User cannot change any access level information for a panel (display only for validation)

Schedule:
- Schedule Name
- Interval Detail
- Holiday Group Detail

13. Select Access Timeframe
page: 18
- A list of the selected Access Levels this provides a visual safety net and reduces errors. Details about these levels are only available in the previous step
- Once one or more Access level have been selected, the user can proceed to the 2nd step - configuring the expiration

Access Level Selection List:
- Access Level Name

Expiration
- Start Date: default to today’s date, can be changed
- End Date: default to blank, but valid date is required

14. Confirmation Status - NEW Record
page: 19
- If requested record does not exist in tP panel, add the record and return confirmation message

15. Confirmation Status - CHANGE Record
page: 20
- If the Badge/Panel combination does already exist in the system
- The rest of the modal is pre-populated with existing information including levels and expiration date
- User can update access level(s) and timeframe
- User can cancel, update, or delete
- User cannot change selected Panel or OG user

16. Change Access - Find OnGuard User
page: 21
- If user realizes they have made an access assignment that needs to be changed, user searches for OG User
- Top Right Box when opens accordion for user, should be an easily configured string, initially defaulted to English, “Profile”
- Lower Right Box when opens accordion for user, should be an easily configured string, initially defaulted to English, “Badge Information”
- When user selects an OG cardholder, profile information and the cardholder’s list of badges appears in an expanded window (READ ONLY).
User will select a specific badge ID.
- Cardholder data is NOT editable

Columns:
- Last Name, First Name
- Title
- Department
- Location

Badge Columns:
- Badge ID
- Badge Type

Profile Info
- Picture
- First Name
- Last Name
- Location
- Title
- Cardholder ID
- Phone
- E-Mail

17. Change Access - Choose OnGuard User/Badge
page: 22
- User selects badge for chosen user
- Top Right Box when opens accordion for user, should be an easily configured string, initially defaulted to English, “Profile”
- Lower Right Box when opens accordion for user, should be an easily configured string, initially defaulted to English, “Badge Information”
- When user selects an OG cardholder, profile information and the cardholder’s list of badges appears in an expanded window (READ ONLY).
User will select a specific badge ID.
- Cardholder data is NOT editable

Columns:
- Last Name, First Name
- Title
- Department
- Location

Badge Columns:
- Badge ID
- Badge Type

Profile Info:
- Picture
- First Name
- Last Name
- Location
- Title
- Cardholder ID
- Phone
- E-Mail

18. Change Access - Choose Panel
page: 23
- Top Bar title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Integration
Application”
- Application title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Change
Access” (denoting left nav option it launched from)
- User selects panel for chosen user, badge
- This is stepped wizard (the user walks through 3 steps to complete his task)
- Once a step has been visited it can be returned to using this navigation
- Once a badge is selected from the list, the “Add Access“ button becomes available. Once clicked, a modal appears
- Depending on how much panel information must be available, each list item can expand

Panel Columns:
- Name
- IP Address
- DNS Name
- Badge Type

19. Change Access - Make Changes
page: 24
- Existing assignment information is retrieved from Panel and is
displayed to a user
- If assignment information is not available at Panel – “No
Assignment Found message is displayed.”
- User can update access level(s) and timeframe
- User can cancel, update, or delete
- User cannot change selected Panel or OG user

20. Integrate Events
page: 25
- As an OnGuard Administrator, I want to be able to configure events that I want to see and be able to save what I enter, so
that I can see those events from tP panels to OG Alarm Monitoring.
- My selection of events applies to all tP panels
- Top Bar title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Integration
Application”
- Application title should be an easily configured string (for localization and tailoring), initially defaulted to English, “Integrate
Events” (denoting left nav option it launched from)
- Initially, a standard list of events available for selection is displayed, with all events being disabled. If a event has
been mapped to an OnGuard event (denoted in the event file for the application), the severity shall default and
cannot be changed. If the event is not mapped to an OnGuard event, the user can set the severity as shown.

Event Columns:
- Event Name
- Event Number
- Event Severity
- Event Status

page: 26
- Actions menu can be used on 1 or more items
- You can bulk select events to be enabled or disabled by the actions menu

Event Columns:
- Event Name
- Event Number
- Event Severity
- Event Status

Target Audience
- Styx OnGuard operator

Judging Criteria
- User Interface and User Experience for Styx to OnGuard Integration Application
- Completeness and accuracy of the wireframe as defined in the spec requirements.
- How well your wireframes provide a consistent user flow.

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 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.