Challenge Overview
Welcome to Styx OnGuard Integration Application UI Prototype Challenge
The primary task of this challenge needs to create the Styx OnGuard Integration Application UI Prototype based on provided wireframe layout and function. At the same time, you must follow provided .ai Illustrator file to guide you of our expected User Interface and User Experience Design.
The result of this prototype need use responsive solution for desktop only.
Final Submission Guidelines
Downloadable Files
OG_logo.zip - OnGuard Logo
truPortal-logo.zip - truPortal Logo
UI-UX-Guidelines.zip - UI/UX Guidelines
styx_og_integration_wf.zip - Styx OnGuard Integration Application Wireframe
onguard-full-prototype.zip - UI Prototype as Reference (DO NOT USE this prototype as base of you submission. We need new clean set of HTML/CSS/JS)
Important:
- As possible we need all pages on this prototype linked each other. Please check how wireframe works.
- Use Roboto Fonts on your UI Prototype submission. Download font from here: https://www.google.com/fonts/specimen/Roboto
- For each screen explained below we need you build prototype by following wireframe layout and at the same time apply design theme based on provided UI/UX Guidelines
- Do not create custom styling, as possible we need you stick with Client UX/UI Guidelines. There are some separated files of UX/UI Guidelines; please review and check around the file content.
- Let's discuss if you need confirmation of any doubts of this challenge.
- Create responsive prototype that supports minimum 1024px width and use fluid solution on wider screen
- For all tasks explained below, you always need to follow the provided Styx OnGuard Integration Application Wireframe for required layout and functions.
1. Login
UI/UX Guideline: Login Page Reference - Storyboard_SC.pdf
- This screen is login page look and feel
- For your prototype, no need display the gray bar on the header. You just show Login box that vertically and horizontally centered on a browser screen.
- Page background color should be #f1f1f2
- truPortal and OnGuard Logo placed on top of Login box. Use the provided logo.
- Match style for text input and dropdown
- Login button by default is disabled and use gray color.
- After filled both text input and select dropdown, Login button becomes enable and then turn into blue color
- Match styling for text input and dropdown styling
- For drop-down menu option, follow this design styling (Confirmation Modal - Storyboard_UMM_delRole.pdf)
- Login success takes user to Panel page
- Create separated Login pages to show these following error scenarios:
Error - Choose Directory
- When user does not select a directory, “choose a directory” error appears
Error - Invalid Credentials
- When user does not enter valid credentials (either username or password), “Login failed” error appears
Error - Network Down
- When user attempts to log in, but network is not available, “Login failed” error appears
2. Panel Page
- This Panel page shows up after user logged in
- Panel page divided into these sections:
Left Navigation
- Left Navigation consists of these menus:
-- tP Panels
-- Assign Access
-- Change Access
-- Integrate Events
- Please re-use icons from Breadcrumbs Storyboard_APM_exemption.ai. We will swap with the correct graphic in the future updates.
- Blue background row is style for active menu
- Configuration and Collapse menu buttons always displayed at the bottom of screen
- Configuration can be a dead link
- Click collapse button need collapse the left navigation to show the icons without the label title.
- Please check this file for how to collapse and expand works: Example of open, closed left nav - Storyboard_UMM.pdf > page 24 & 25
Header bar
- Header bar needs use fluid width
- Header bar needs to be in fixed placement when user is scrolling the page content.
- “Integration Application” title display on the left side of header bar
- Jhon Smith is a drop-down menu
- Click the username and arrow need show the Logout option. Refer this file: Lef NavStoryboard_APM.pdf > page 20
- Click Logout button take user back to Login page
- Notification icons need show the list of Notification, re-use styling from the username dropdown
- On the right side, there's full-screen button. Click this button makes the page use full-screen mode.
- On full-screen mode, you need to hide the header bar and left navigation bar
- Then, the full-screen icon changed, refer to this file: Lef NavStoryboard_APM.pdf > page 22 & page 23
Content area
- Content bar needs use fluid width
a. Panel - Empty
- This page will show empty message until new panel added or imported
- For this screen, you need show "0 of 0" message next to the page title
- Search filter need works like provided UI/UX-Guideline: search-components.pdf
- Click the zoom icon and arrow need display drop-down option
- For the placement and sizing, please follow this UI/UX-Guideline: search-placement&sizing.pdf
- Match checkboxes, and scrollbar styling
- User can type in the Search text input
- Add and Import buttons placed on the right side
- Click Add button need add the new row on tP Panels table and show up a panel on the right side of the table. More information explained below
- Click Import button need show modal Import Panel Modal Windows. More information explained below.
b. Panel - List
- This screen shows how tP Panels look with complete table view
- Next to panel title, there're numbers of data, and then search and filter
- Quick Actions dropdown show up before Add button
- Re-use consistent styling for the Actions button. Refer this document: Confirmation Modal - Storyboard_UMM_delRole.pdf > page 1
- Match data on table
- Notice on the table header, you need to sort display arrow and underlined text
- Create sort function for table header with arrow icon. Make sure you apply for other table in another pages.
- In the right side of table, there's icons for Assign Access and Validate Connection
- Create tooltips for icons. Refer to this document: Breadcrumbs Storyboard_APM_exemption.pdf > page 1
- Click Assign Access icon need show up the modal window. Explained more details below
- Click Validate Connection icon need show up the modal window. Explained more details below
- Match styling for selected row like existing UI/UX Guidelines
c. Panel - Add
- User clicks Add button on Panel list to show the new Panel on the right side
- All forms are text inputs and password in the bottom
- Match form styling like existing UI/UX Guidelines
- The table width reduced when New Panel show up on the right side
- Match form content like existing wireframe
- By default Save button use gray colored style. While on this state, click the Save button need show up the Incomplete data modal window
- For every modal window on the page, use transparent gray background.
- Click Ok need to hide the modal
- After filling all form, Save button turn to blue colored style
- Click the Save button again need show connection failed modal window
- Click Cancel and Try again button need hide the modal window.
- Then re-click the Save button need show the success modal window.
- Add Another and Done buttons need to close the panel and show up the table list
- Click X button need close the New Panel area
- While user open the New Panel area, navigate to another rows in the left side need show up the Unsaved changes modal window
d. Panel - Edit
- When user click each row on Panel List, they will automatically see Edit Panel on the right side
- Display current values for each text inputs
- Save button use blue colored background
- Click save button need show the failed modal window first then after that re-click the save button need to show the success message
- X button needs hide the modal window
- While user open the New Panel area, navigate to another rows in the left side need show up the Unsaved changes modal window
e. Panel - Import
- Replace the placeholder with standard file upload field.
- Cancel button needs to hide the modal window
- Click Import button need display the Import Failed, then click the Import button again need show the success message
f. Panel - Retrieve Events
- This screen displays as modal windows
- On progressing, click Cancel button need close the modal and display the table list
- After progress completed you need show another modal window that informs user Events retrieved successfully
- Click Ok button need show the Panel List
g. Panel - Assign Access
- Click Assign Acces icon need show up the modal window
- Re-use existing layout and functions like existing UI/UX Guideline: Storyboard_APM_exemption.pdf
- Re-use the icons from the Storyboard_APM_exemption.pdf
- Search and filter displayed below the Panel title
- Assign Access contains these three steps:
Step 1: Select User Badge
- For this step, there's table content on the left side and panel on the right side
- No selected row and no panel show on page load
- Styling and function on this step need works like this screen: Confirmation Modal - Storyboard_UMM_delRole.pdf
- On the right panel, there's Profile and Badge row with expand/collapse function by click the arrow
- Make sure you create consistent styling.
- User need selected the Badge before click the Next button
- Next button takes user to next Step 2
- Cancel button needs to close the modal
Step 2: Select Access Level
- Each row on table need collapsed by default
- Notice there's checkboxes on 1st column. Follow styling from existing UI/UX Guideline
- When to expand the row, there's tab content for Readers and Floors
- Follow active and inactive tab styling from Example of open closed left nav - Storyboard_UMM.pdf > page 24 & page 25
- Readers Tab: This tab will contain all Reader Name
- User can expand each row
- Each row consists of these sub-tab:
- Intervals Sub-Tab: This interval contains rows of hours interval
- You need to display active and inactive days with black and gray colored text
- Holiday Group Sub-Tab: This Holiday contains rows of holiday groups
- Floors Tabs: will be a list of Floors
- Match content for both Readers and Floors tab
- Cancel button needs to close the modal
- The previous button takes user to next Step 1
- Next button takes user to next Step 3
Step 3: Set Expiration
- Function and layout for this step need works similar like Step 1
- This step divided by 2 column for Access Level and Expiration panel
- Expiration Panel only show up when user select the Access level row.
- Expiration panel, need display Start Date and End Date
- Click both dates need show up the date-picker
- Re-use datepicker from existing prototype (onguard-full-prototype.zip)
- Assign button need display the Record added modal window and took user back to Panel List
h. Panel - Validate Connection
- This screen displays as modal windows
- On progressing, click Cancel button need close the modal and display the table list
- After progress completed you need show another modal window that informs user Connection validated successfully
- Click Ok button need show the Panel List
3. Assign Access
- Show active state for Assign Access menu
- Search and filter show up next to the title
- You need display table list below the search and filter
- Match Assign Access table information
- Click each row need display the Assign Access Panel
- You can re-use Panel styling from Lef NavStoryboard_APM.pdf > page 5 & 6
- There are two expandable sections of Profile and Badges
- For Profile section, image needs to be placed on the right side
- All Profile information need to be divided into two columns layout
- Badges section, display search and filter below the title
Assign Access - Choose User
- Here's the flow to Assign Access - Choose User
- Assign Access need to disable before select the Badge row
- Click the badge need show the error information modal window
- Each row of Badge table is selectable
- Selected row using yellow background, then Assign Access button become enable
- Click the Assign Access button need show up the Progress Step Modal Window
- For Progress Step icons, please re-use icons from Breadcrumbs Storyboard_APM_exemption.pdf > page 2 (We will swap icons in the future updates)
Step 1: Select Panel & Levels
- For this step, there is a table information
- On 1st column, display the checkboxes
- User only able to select 1 row only
- After 1 row selected, other checkboxes on another rows need to be disable
- Each row needs able to expand and collapse
- On sub-row, another table needs display checkboxes and arrow toggle
- Checked on the checkboxes on sub row need auto select the checkboxes on parent row. Then, disable the other rows
- Also, each row need display the Readers and Floors tab
- Match content for the sub-tabs
- Cancel button needs to close the modal
- Next button takes user to next Step 2
Step 2: Set Expirations
- This step divided by 2 column for Access Level and Expiration
- Access Level display list of information
- Expiration column, need display Start Date and End Date
- Click both dates need show up the date-picker
- Assign button need display the Record added modal window and took user back to Assign Access page
- Back button takes user to the previous step
- Cancel button needs to close the modal
- Assign button need display the Record added modal window and took user back to Panel List
4. Change Access
- Table same like Assign Access
- When to click each row, under Badges button text is Change Access
- Click the button need display the modal window
- For this Change Access flow, on Step 1 after selecting the Panel name, you need to display new modal window for No Assignment message, click Select another button need take back to Step 1
- on Step 2, there's another Delete button
- Click the Delete button need show Delete confirmation modal window
- Click the Update button need show the Successfully updated message
- Ok button needs close modal window and take user back to change access
- Match the differences based on wireframe content
5. Integrate Events
- This is Integrate Events page
- On the right side search and filter, there's quick action buttons for Enable, Disabled, and Set Severity
- Click each option need to show up related modal window
- Follow checkboxes logic based on this file: search-checkboxfunctionality.pdf
- Follow how disabled and enable rows to look on this file: Example of open closed left nav - Storyboard_UMM.pdf
- Disable rows need to add new column for disabling icon and text for disabling rows need to be gray colored
- Click each row need show up panel details on the right side
- Each row in panel details needs able to expand/collapse
- Save button need take user Integrate Events list
Client Priorities
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Consistent, 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 the 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.
CSS3
- 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 to create all styling.
JAVASCRIPT
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your scripts or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
IMAGES
- Images must compress 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.
Web Browsers Requirements
- IE10+
- Firefox latest version
- Safari latest version
- Chrome latest version