Styx Access Control Mustering Reader Storyboard Design Challenge

Welcome to the Styx Access Control Mustering Reader Storyboard Design Challenge.

We received wireframe solution of Mustering Reader feature within Styx Access Control application and would like to continue see how the application look in storyboard design.

We are looking for you to provide design solution and click-paths. We want to focus on iPad interactions and creating a modern and up-to-date tablet application. We are open to creativity for the best User Experience as possible.

 

Round 1

Your submitted design solution for client review in iPad Landscape Screen Size (1024px x 768px)
1. Reader configuration
2. Area configuration
3. Operator roles configuration
4. Mustering Mode
5. Mustering History
Make sure all pages have correct flow! Use correct file numbering.

Round 2

Final design + updates from checkpoint feedback in iPad Landscape Screen Size (1024px x 768px) &  iPad Portrait Screen Size (768px x 1024px)
1. Reader configuration
2. Area configuration
3. Operator roles configuration
4. Mustering Mode
5. Mustering History
Make sure all pages have correct flow! Use correct file numbering.

Styx customers who are monitoring off site locations from a common control station, want to be able to muster cardholders in the event the off-site location experiences an emergency situation. Mustering is a real-time account or listing of the credentials/persons who have "scanned in" on selected readers since a defined event has occurred.

Design Requirements:
- We provide old storyboard of TruPortal application. Your task for this challenge need dig and grad different design elements that scattered around provided design and make sure storyboard to follow latest app look and feel. Pay attention to every single differences.
- In most part you need update provided storyboard to follow latest app look and feel like header, sidebar and main content area
- Pay attention to all small differences and always stick with site look and feel
- Here's the app link for your reference:
https://truportal.asuscomm.com:10002
Username: admin
Password: demo
- You're encouraged to suggest and improve better User Experience than what you see on wireframe.
- Required Sizes (Read Challenge Round Requirements!)
-- iPad Landscape View: 1024px x 768px
-- iPad Portrait View: 768px x 1024px
- Supported Platform: iPad

File Downloadables
Wireframe.zip - Mustering Reader Wireframe
Download Files via Google Drive Link - Old Styx Control Reader Storyboard

Submission Requirements:

1. Reader configuration
Wireframe: System Administration > Devices > Controller > Door > Reader
Storyboard: Source-Landscape/System_Admin.psd
- A new reader configuration parameter is available in the System Administration > Devices > Controller > Door > Reader (“Muster reader” checkbox).
- Only one configuration of mustering is available (i.e. “safe” and “unsafe” areas, mustering readers etc.)
- Show us different state for checked on/off

2. Area configuration
Wireframe: Access Management > Areas > Area Definition > Area
Storyboard: Source-Landscape/System_Admin.psd
- A new area configuration parameter is available in the Access Management > Areas > Area Definition > Area (“Unsafe location” checkbox).
- The parameter is used on the initial phase of the mustering only.
- All persons occupying the unsafe locations when the muster is starting will be moved to “unsafe list” of the muster report.

3. Operator roles configuration
Wireframe: System Administration > Operator Roles > Role
Storyboard: Source-Landscape/System_Admin.psd
- Two new features/permissions are available in the System Administration > Operator Roles > Role (Mustering (Execution), Mustering (Manipulation) features).
-- Mustering (Execution) - allow to enable/disable muster mode of the system,
-- Mustering (Manipulation) - allow to see the muster report (View Only permission) or manipulate persons of the muster report (Modification permission).
- Predefined operator roles will have the following mustering permissions:
-- Administrator: Mustering (Execution) - Execute, Mustering (Manipulation) - Modification,
-- Operator: Mustering (Manipulation) - Modification.

4. Mustering Mode
Wireframe: Mustering
- Need new menu for “Mustering” mode, which is equivalent to Mustering Execution; this should be a toggle to allow the user to start and stop mustering mode, only users with Mustering Execution permission are allowed to control the behavior of this function.
- Show “Off” state by default
- Click Start Mustering need enabled the Mustering Mode
- Show Unsafe and Safe list in table layout
- Need able to search both Unsafe and Safe list. How design flow look?
- Show table list with clear action button
- How the Export list works in your design?
- Need able to move from or to Unsafe or Safe list
- Need pull up to refresh function above the table to sync with server data
- The muster report page can be printed from the iPad’s configured printer

5. Mustering History
- Display Mustering History in table layout in your design
- Need Search function for history
- Show us separate screen to show the flow for this screen

Target Audience
Styx Customers

Judging Criteria
- Completeness and accuracy of the wireframe as defined in the spec requirements.
- 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.