Challenge Summary
Welcome to Brivo Labs - VMS iPad Application Design Contest. This contest is focused on creating the iPad screens based on the available resources (wireframes and documents). For this contest, you will be creating the iPad Screens designs (require only the iPad Standand Ver.(Landscape) screens to be created) for Visitor Management Applications (Proper name of the App is called Rändivoo).
About the Client:
Brivo Labs is an Internet of Things company leading the emerging Social Access Management market space. Using social identities, Brivo Labs is focused on developing innovative applications that connect virtual communities with physical spaces.
Round 1
-All required iPad Screens in Landscape mode.
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
Round 2
- Make all required updates to your designs as per Client's Checkpoint Feedback.
- All required iPad Screens in Landscape mode.
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
About the Project:
VMS acronym stands for Visitor Management System and the Proper name of the App is called Rändivoo. This iOS application will allow invited guests to simply check in/out using a QR Code. For those who were not invited or had lost their QR code the ability to sign/check-in. The backend that powers this application is Salesforce.com and SAM (which is Brivo Labs API). When the guest completes the check-in, the sponsor of the guest gets a notification via Chatter (Salesforce version of Instant Messenger) that their guest has arrived. The other cool thing is that the SAM API will allow the QR Code to act as a key to open an electrified door.
The main of this contest is to create the screens for an iPad application, please go through the attached documents to get an idea on how the application works.
IMPORTANT!! Design Considerations:
- We are looking for a creative and modern looking application while keeping it professional.
- Client has envisioned having a white background with accents of the color of the Randivoo logo.
- Your designs should be simple and eye catching.
- Please take a look at the attached reference video link (which shows the screens of the belly card app), client likes the look and feel of that app. (please do not copy anything from it.)
- For this contest, you are required to design only the Landscape (1024 x 768 px) screens for standard iPad Ver.
- Note that – your designs will be later be converted to Retina display (i.e. images will be scaled) – so please make sure all required design UI elements being created are scalable vectors.
- Make sure “Welcome Screens” (including Welcome screen > Checkin/Checkout) has a larger logo and rest of the pages have a smaller version in the bottom right hand corner in the footer area.
Required Screens:
Screens that need to be designed are listed below. Below description, gives you an idea on what elements are required in the individual screens. Please see the attached wireframes for to get an idea on the flow of the application.
1) Welcome Screen: (mockup_Checking In.png)
- This is first screen of the application
- This screen has shows two options “Checkin and Checkout”.
- This page will have a larger logo.
2) Welcome Screen > Checkin: (mockup_Checking In.png)
- When a user chooses the “Checkin” option they are directed to this page
- This page almost looks like the welcome screen but with the below options
- We show the user with a question “Is someone expecting you?”
- Followed by a drop-down with options as “Yes” and “No”
- On Selecting “Yes” in the Drop-down, we show 2 buttons with labels “Scan QR Code” and “Look Me Up”.
- On Selecting “No” in the Drop-down, we show 2 buttons with labels “Register” and “Look Me Up”.
- Come up with any cool ideas for showing the above drop-down and options
- In this page, we need to have an information icon with – something as “i" as a blue button – onclick in this would describe more about the use of above options/buttons being displayed on choosing Yes/No.
- This page will have a larger logo.
3) Welcome Screen > Check Out: (mockup_Checking In.png)
- When a user chooses the “Checkout” option they are directed to this page.
- This page almost looks like the welcome screen but has two options to choose from, they are “Scan QR Code and Look Me Up”. Please see below on what happens on when a user chooses any of these options.
- Come up with some design ideas on how to show the above 2 options.
- This page will have a larger logo.
4) Scan QR Code: (mockup_Checking In.png)
- Users scans the QR Code using their iPad.
- We are looking for something like as shown in the attached reference app (please note that you should not copy the designs from these reference – it is something that client likes).
- If the QR Code is scanned well, it display a Success Message (See below) or shows an error.
a) Scan QR Code > Error: (mockup_Checking In.png)
- If there is an error in reading the QR Code or if it is a invalid QR Code, then we need to display an Error “Invalid QR Code”
- Come up with ideas on, how this page need to be designed.
5) Invitee Lookup: (mockup_Invitee Lookup.png)
- This option is chosen if the user has lost his QR code.
- Have a title as “Invitee Lookup”
- Have a text “Enter Email Address associated with you Salesforce Account”
- Show a textbox to enter the email address
- Show a “Submit” button
- Have a “Back” button in the top left which takes the user back to the previous screen
- On click in “Submit” button, it will show either of the below options (see wireframes to get an idea on the flow).
a) Invitee Lookup > CheckIn - Confirmation (Entered email address were correct – flow initiated to Check-In): (mockup_Invitee Lookup.png)
If the entered email address were correct then display a Confirmation screen with additional details about the member. The following additional details are shown
-First Name, Last Name, Company, Title, Email, Phone Number, Address (Please see the wireframe for sample values for the above fields)
- Show two buttons “Cancel” and “Check In”
b) Invitee Lookup > Check Out - Confirmation (Entered email address were correct – flow initiated to Check-out): (mockup_Invitee Lookup.png)
- This is similar to “CheckIn – Confirmation” screen except that instead of “Check In” button, we will have “Check Out” button (See wireframes to get clarity on Check-out flow).
c) Invitee Lookup > Error (Entered email address was invalid): (mockup_Invitee Lookup.png)
- We show this screen, if the entered Email Address was invalid.
- This screen is similar to “Invitee Lookup” except we show a message “Entered Email Address did not match records”.
- and also have two buttons with label “Try Again” and “Register”.
6) Register: (mockup_Register Guest.png)
- This is chosen if the user is not sure on Email associated with Salesforce.
- Have a title as “Guest Register”.
- Show five text fields “First Name, Last Name, Company, Email and Phone Number”.
- We need to point out somewhere that ‘All fields are required’.
- Have a button with label “Sign In with Salesforce ID”. Provides Social Sign-On to login through Salesforce ID.
- Have a "Check In" button
- Have a “Back” button in the top left which takes the user back to the previous screen.
a) Register > Error (Entered Details were invalid): (mockup_Register Guest.png)
- We show this screen, if the entered Details are invalid.
- This screen is similar to “Register”
- We need to highlight the fields that are erroneous and provide a label to explain why it has an error.
7) Social Sign In with Salesforce ID (pop up): (mockup_Invitee Lookup.png)
- This option is chosen, if the user clicks on “Sign In with Salesforce ID” button in the "Guest Register" Screen.
- Have the Page Title as “Salesforce”
- We will need a place for “Salesforce” Logo (provide a placeholder for logo).
- Have two text fields Username and Password
- Have two buttons with labels “Cancel” and “Sign In”
a) Social Sign In with Salesforce ID (pop up) > Error (Entered Salesforce credentials were invalid): (mockup_Invitee Lookup.png)
- We show this screen, if the entered Salesforce credentials is invalid
- This screen is similar to “Check In with Salesforce ID” except we show a message “Invalid Username or Password”.
8) CheckIn - Success Message: (mockup_Checking In.png)
-Once the User has revealed their identity through any of the 4 options in “Welcome Screen > CheckIn” Screen, then we need to display a Success message.
- In this page, we need to show the following messages:
Sign In Successful“
A Chatter message has been sent to your Sponsor
- Since the content on the page is less, think on how well the above message can be incorporated in the screen.
- This message will be shown for 5 seconds and then the user is redirected to the “Welcome Screen”.
9) Check Out - Success Message: (mockup_Checking In.png)
-Once the User has revealed their identity through any of the 2 options in “Welcome Screen > Check Out” Screen, then we need to display a Success message.
- In this page, we need to show the following messages:
Sign Out Successful “
A Chatter message has been sent to your Sponsor
- Since the content on the page is less, think on how well the above message can be incorporated in the screen.
- This message will be shown for 5 seconds and then the user is redirected to the “Welcome Screen”.
Please find the following in the attached documents.
Wireframes: Wireframe mockups describing the flow of above screens.
Logo: Logo (Rändivoo) that needs to be used in your designs.
Branding Guidelines:
- Client has envisioned having a white background with accents of the color of the Randivoo logo.
- Please use the attached logo (Rändivoo) in your designs as per the instruction mentioned in “IMPORTANT!! Design Considerations”
References:
http://www.youtube.com/watch?v=oMqfpVX8MrM
The above video shows screens from Belly Card Application. Client has a liking of the look and feel from this app.
PLEASE design wisely and do not copy the above reference.
Target Audience:
- The target audience will be Business Users and their Customers
Judging Criteria:
- How well you create iPad screens.
- Cleanliness of your graphics and design.
- Design looks and User Experience.
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (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.