Challenge Summary
Welcome to the Styx Access Control App iPhone Storyboard Contest. We just completed HTML wireframe in previous contest. Right now we need you create the storyboard design of the Styx Access iPhone Application. In the end of this contest, we're looking for clean, professional, and have great User Experience of the application.
If you have any question, please raise in the forum, Let's discuss anything!.
Round 1
Your submitted design solution for client review (Submit Portrait Orientation)
1. Login/Logout
2. Home Screen
3. Event
4. Door Monitor & Control
5. System Status & Diagnostics
6. Favorites
Notes.jpg: Make sure all pages have correct flow!
Round 2
Final pages of wireframe (Submit Portrait and Landscape Orientation)
1. Login/Logout
2. Help
3. Home Screen
4. Event
5. Door Monitor & Control
6. Input/Output Trigger & Control
7. Reports
8. System Status & Diagnostics
9. More
10. Favorites
Notes.jpg: Make sure all pages have correct flow!
Contest Details
The client is looking for a solution for security equipment installers and end users to monitor their facilities in terms of controlling access and monitoring status of physical security devices. The mobile phone application should allow users to manage the following functions:
- Event Monitoring
- Door Monitoring & Control
- Input/Output Triggering & Control
- System Status & Diagnostics
- Limited Reports Management – Access History, Roll Call, Mustering
- Video Integration based on Events
- Enforce existing User Roles and Permissions when accessing UI screens
- Help System
- The resulting technical solution needs to be usable from iPhone & Android device.
IMPORTANT
- Please refer the provided wireframe (iPhone-Android-Styx-Access-Control-App-Wireframe.zip). You need capture iPhone flow only in your stoyboard design. Ask us any questions in forum if you need confirmation.
- We also attached Styx Access for "iPad" version storyboard (iPad-Access-Storyboard-Landscape.7z, iPad-Access-Storyboard-Portrait.7z, iPad-Access-Storyboard-Source-Landscape.7z, iPad-Access-Storyboard-Source-Portrait.7z) as reference design for this contest.
- You must re-use UI elements and color theme from iPad version for this contest.
- Results of this contest need combine color theme from Styx Access for "iPad" version storyboard and goEntry application (goEntry-Screenshot.zip)
- Required design area are for iPhone 4 and iPhone 5(Retina Display). Make sure your graphic display consistent on those different sizes.
- You need create Landscape and Portrait Orientation design.
- Put your design on the iPhone GUI Kit so we can compare how well it looks in different sizes.
- Remember when create graphics for mobile site, all UI elements must have fluid width.
- Graphics are extremely limited on the mobile version of the website.
- Buttons and links should be large enough and spaced out enough to ensure that the correct item is selected each time.
- Create correct numbering on your submissions to explain the storyboard flow to us.
Required Pages/Flow on your submission:
1. Login/Logout
- Put Logo placeholder on top side
- User will enter Controller IP address/name
- User will provide login/password information
- “Remember Me” selection available from Login screen
- How error message looks?
- Use of keyboard “Next/Previous/Done” should be provided
- There will be ability to clear input by click the "x" button that placed in the right side of input.
2. Help
- The app will have a simple Help set of instructions
- Help page displayed as rows, click on it will take to details page
- Suggest better typography on details page
- More button placed on top left.
3. Home Screen
- Home Screen will display icons of:
i. Event
ii. Door Control
iii. Input/Output Control
iv. Report
v. Status/Diagnostics
vi. Help
vii. Favorites
viii. Logout
- This page should be a very intuitive and user friendly home screen experience
- Create the icons that match with page purpose.
- Notice there's alert and error icons in the top right side
4. Event
- Sort option placed on top left side
- User can do search event
- How select date looks?
- There will be sorting placed on top of table.
- Suggest us color theme for 3 different priority "High", "Warning" and low
- There's icon in the left side, you can re-use exsting icons on "events" folder or suggest us how the new icon looks.
- On the bottom sides contains all icons that can easily clickable based icons at home screen
- Click the row will take user to Event details page.
- On the details page contains Photo and Video section
- Video need move out on separate page, video need in fullscreen. On this page maybe just use icon/button for vide indicator?
- "Send Email" button placed on top right. Click this will open email page.
5. Door Monitor & Control
- On top left side, it show "All" and "Favorite" button. Need clear design for active and inactive state.
- On top right side, user can change Modes.
- On table row, you will need create different icons for open, unlock, lockout, reinstate a single door
- User can also change status of specific row
- User can select star icon to set "Favorite" and deselect "Unfavourite" the door
6. Input/Output Trigger & Control
- On top left side, it show "Input" and "Output" button. Need clear design for active and inactive state.
- On top right side, placed "All" and "Favorite" button
- On table row, you will need create different icons for "Offline" and Online Status
- User can also change status of specific row
- User can select star icon to set "Favorite" and deselect "Unfavourite" the door
7. Reports
- Match content like provided wireframe
- You might need create how page looks when scrolling
- By default, page will show these following menu
7.1 Access History Report
7.2 Credential Report
7.3 Reader Access Report
7.4 Roll Call Report
7.5 Roster Report
8. System Status & Diagnostics
- This is new pages for iPhone, no iPad version reference attached, need your help create the pages
- Need numbering for "Error" and "Warning".
- You might need create icons in the left side of row
- Match content like provided wireframe
- By default, page will show these following menu
8.1 All Errors and Warning
8.2 Power
8.3 Hardware
8.4 Resources
8.5 Device Capacities
8.6 System Capacities
9. More
- This is new pages for iPhone, no iPad version reference attached, need your help create the pages
- By default, page will show these following menu
9.1 About
9.2 Help
9.3 Favorites
9.4 Logout
10. Favorites
- This is new pages for iPhone, no iPad version reference attached, need your help create the pages
- This page contains all starred icons from some section on aplication
- Click Search buton on top left need show filter area below the title.
- Tab show these options "All", "Inputs", "Outputs" and "Door"
- Create proper icons/graphic that represents State
- Create separate screens for each tab
- How edit page looks?
Target Audience
Current Customer.
Potential Customer.
Judging Criteria
- How well you design storyboards for Styx Access Control App iPhone Storyboard
- Cleanliness of page layout and all UI elements in every page.
- User Experience of the application.
- Consistency Design for any UI elements.
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
Submit JPG/PNG image files based on contest submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable 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.