Challenge Summary
Welcome to "Styx - OnGuard Visitor Management Module iPad App Wireframe Challenge". The objective of this Challenge is to create the HTML wireframes for Styx - OnGuard Visitor Management Module for different user role (visitor and admin) based on provided guidelines stated on challenge details. This application will be developed under tablet and mobile (in the future) platform.In this challenge, you just need focus on Tablet/iPad version as starting point to show the required interactions.
You are provided with a Application Requirements Specification document on how the client imagines the app workflow will look like but we are looking for your help to improve it.
Round 1
Initial wireframes design for client review, please submit the following workflow :
- Visitor Flow
Round 2
All requirements as stated in challenge details with client feedback applied.
- Visitor Flow
- System Administrator Flow
We want to create new visitor application that able to provide an easy to use multistep visitor sign in approach in our company. This is a new application that will run on Apple devices with portability to other devices (Android, Windows Surface Pro, etc.) in the future. This application which is called "OnGuard Visitor Application" is being built off the concept of OnGuard existing IDVM Kiosk application (existing system), easier to use, no hardware dependencies (camera, printer, keyboards etc.) besides what is built into the native base device type (iPad).
Wireframe Expectations
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- Your wireframes must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens mentioned in required new sections below, if any requirement is missing in final submission the client will not take a look at it, so make a checklist for the required screens to make sure you designed all of them.
- Please show us your proposal as a movie or series of wireframes that communicate the user's intended interaction with your proposed solution.
- 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.
Supporting Documents
documentation.zip, contains two documents :
* Visitor Management Module Only.docx, contains the apps purpose, workflow diagram and description of the apps flow).
* Concept_OnGuard-SecurityConsole.pdf, contains general concepts for all our apps layout, you needs to accomodates as much as possible the layout to your wireframes.
Wireframe Requirements :
01. Visitor Flow (check page 11 from "Visitor Management Module Only.docx" for the flow)
- Sign-In Flow :
* As an invited Visitor with an invitation in hand, I want to sign-in to the facility so that I can be let in. Visitor may present an invitation with either a barcode or a code that references invitation generated by the system on host’s behalf. Some or all information may already be pre-filled.
* As an invited Visitor without an invitation in hand, I want to sign-in to the facility so that I can be let in. Visitor may look up themselves in the system by the name, or e-mail. If visit invitation is found some or all information may already be pre-filled.
* As an unexpected Visitor without an invitation in hand, I want to sign-in to the facility so that I can be let in.
* Visitor may look up themselves in the system by the name, or e-mail, or some other field (like company name). If visitor information is found (perhaps from previous visit) some or all information may already be pre-filled.
* Visitor may look up Host record in the system by the name, or e-mail. Only the hosts that are allowed visitors will be displayed
* Visit may span multiple day For all sign-in stories
* Visitor may confirm or correct and extend information contained in the system
* Visitor may be required to read and or sign up to several documents before sign-in is complete via apps.
* Visitor may be required to capture a photograph of themselves
* Visitor may be issued a badge (freshly printed or from a pool of visitor badges) either by an automatic printer or a Front Desk Operator
Host may be notified with an e-mail after the sign-in is complete, message may include visitor photo and/or signed documents.
* "Wildcard" search result should only be available only after at least 3 name letters are entered. Only exact matches should be displayed for less than. For example: If Visitor enters “li”, it should match “Li, Brian”, but not “Smith, Liam”. If Visitor enters “bri” it should match “Li, Brian” and “Lake, Brigitte”.
- Sign-out flow :
* As a Visitor, I want to sign-out of the office/facility so that I can be let out from the office, so I need to perform the following actions :
* present an invitation with either a barcode or a code that references invitation.
* present a badge issued at sign-in with either a barcode or a code that references invitation.
* checking/look up themselves in the system by the name, or e-mail and sign out manually.
- Others Features for visitor:
* As a Visitor, I want to steal the tablet but it shouldn't contain too much host or visitor information to prevent identifying information or security information loss. Information on the device should be encrypted/have security elements inside it.
* As a Visitor, I want to request assistance so that someone can come by and help me check in or out. Message may be dispatched to a designated "help" contact
* As a Visitor, I want the system to return to welcome screen when I'm inactive for a configured period of time and abandon the data. System should warn 5 seconds before timeout to let user continue working and not return to welcome screen and lose their entered data.
* As a Visitor, I want the option to clear out all the entered data and return to welcome screen to be available on all application screens where practical.
* As a Visitor, I want the system to display a message and not allow further data entry when the server is not available/disconnected. Welcome screen should not be displayed in this case.
* As a Visitor, I want the system to display some information on every screen to indicate how far along I am in the sign-in/sign-out progress and how much work is left. This can be a progress bar or IOS page control dots. So that I know how much work is left or has been completed.
02. System Administrator Flow
- As a System Administrator, I would like to customize and configure the Visitor Sign-In experience so that it is representative of my company’s branding, visitor workflow, document collection, and verification requirements.
- Configure logo and welcome or all screen backgrounds
- Configure welcome message
- Configure list of documents they need to review and or sign (e.g. NDA)
- Configure list of images and documents we need captured (photo, passport.) at sign in.
- Configure list of fields we ask for and which ones are required (e.g First name, Last name, or Just one big name, Nationality, Date of Birth)
- Configure the name/location information for the tablet
- and many more
- As System Administrator, I would like to configure how and if visitors can find or add their visit : Only by confirmations code, By their searching based name/company, By enrolling/creating new visit at the kiosk
Target Audience
1. Visitor, are persons that visit facility. They have varying technical skills and cultural backgrounds and need easy to understand, use, fast and responsive system. They’d rather not spend time filling out forms in the lobby.
2. Host (Not requires for this challenge), either invite and schedule visitors to the facility or notified when visitor arrives. They have varying technical skills and cultural backgrounds and need easy to understand, use, fast and responsive notification system that is broadly accessible on their corporate network and may be even externally. Most likely over e-mail /SMS/push.
3. Front Desk Operator (Not requires for this challenge), in some facilities are tasked with monitoring upcoming visits and visitors that are currently in the facility. They are sometimes asked to help visitors check in and out and may give out various credentials (visitor stickers, access control badges). They have varying technical skills, but are trained in how to operate their visitor software.
4. System Administrator, configure and maintain visitor system. They are proficient computer users and familiar with access control and visitor domain terms and concepts. They would like to control look of the visitor facing systems to apply their corporate branding, determine data collected from the visitors and the forms they may need to sign/acknowledge as part of sign in. They configure connections to the access control system, messaging system, printers and other system settings.
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started : http://www.axure.com/learn
Design Guidelines
- Create it for iPad apps.
- Use "Concept_OnGuard-SecurityConsole.pdf" as base for your layout UX design, The default look for our Visitor app should make use of similar colors, general concepts where possible. This is to provide a unified experience between our apps. Obviously, this is a different app and different platform so some of it may not be applicable, so please feel free to modify or choose which function/aspect that still reasonable for the apps.
- Screen ratio must be 4:3 like ipad screen ratio.
- Portrait and Landscape for the orientation is needed.
- Your wireframe submission need able to drill down for all page flow.
- Feel free to suggest any tools/function that can bring good User Experience for this Application.
Judging Criteria
- User Experience of the application.
- Completeness and accuracy of the wireframe as defined in the attached requirements.
- How well your wireframes provide a consistent user flow
- Your wireframe possible to build as Responsive Design application
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
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.