Challenge Summary
Welcome to Brivo Digital Reader iPod/iPad App Design Challenge. Task of this challenge is to come up with design ideas for “Brivo Digital Reader (BDR)” app that would be installed on either an iPod touch or iPad and the device would be mounted next to a locked door in an office environment. We have provided wireframes to help you get started with your designs!
We want to showcase how easy it is to engage the [topcoder] design studio community and demonstrate how well you can take ideas and turn them into great design and user experience concepts!
Round 1
Submit your initial designs for Checkpoint Feedback
0. Welcome/Start Screen (iPod Portrait + iPad Landscape)
1. Reader Name (iPod Portrait + iPad Landscape)
2. Display Reader Name/Photo (iPod Portrait + iPad Landscape)
3. Scan Panel barcode (iPod Portrait + iPad Landscape)
3.1 Scan Panel barcode - error (iPod Portrait)
4. Loading Animation.. (iPod Portrait)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
0. Welcome/Start Screen (iPod Portrait + iPad Landscape)
1. Reader Name (iPod Portrait + iPad Landscape)
2. Display Reader Name/Photo (iPod Portrait + iPad Landscape)
3. Scan Panel barcode (iPod Portrait + iPad Landscape)
3.1 Scan Panel barcode - error (iPod Portrait + iPad Landscape)
4. Loading Animation.. (iPod Portrait + iPad Landscape)
5. Choose Door (iPod Portrait + iPad Landscape)
6. Configure (iPod Portrait + iPad Landscape)
7. Test (iPod Portrait + iPad Landscape)
7.1 Test Error Screen (iPod Portrait + iPad Landscape)
7.2: Test Success (iPod Portrait + iPad Landscape)
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
This app will be installed on iPod touch and iPad devices and is mounted next to a locked door. An admin will be able to configure each of the doors by entering a specific Brivo digital reader name and scanning the panel would let user the select and configure settings..
IMPORTANT!! Designs Considerations:
- Looking for modern, intuitive user interface - application should be easy to use.
- Focus on the design being a great mobile experience - the application should be designed for iPod touch and iPad.
- We had provided a wireframe to help you get started, please DO NOT COPY.
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path so we can see how the interactions fit together in the application
- Make sure all your icons/graphics are vectors, so it helps us convert your storyboards to any required size as this will eventually be developed as a responsive app!
- Please go through the look and feel of the existing application and make sure to follow the look & feel from it!
- Please follow the branding guidelines from the attached the branding guidelines document and also you may use Brivo Labs wherever it is appropriate!
Required Sizes:
We need below designs sizes for this challenge
iPod Touch: 640 x 1136 (Portrait)
iPad: 2048 x 1536 (Landscape)
Required Screens:
We need below screens to be designed as a part of this challenge..
0. Welcome/Start Screen:
- This screen shows an introduction about the Brivo Digital Reader..
- This app shows the steps in the installation as a wizard flow and assume a user will have option to swipe left to move to the next step..
- Come up with a welcome screen design that helps user initiate the installation process
1. Reader Name:
- Enter a name that the reader will display in it’s resting state (see 00_ROOM_NUMBER_STATIC.jpg in Existing Application)
- This is a simple screen, come up with thoughts on how to design it.
2. Display Reader Name/Photo:
- Once the user has selected a name for the reader, we will have option to display either the name or photo of the mobile user (see a reference for how the name/photo will be displayed, 03_WELCOME.jpg in Existing Application)
3. Scan Panel barcode:
- As a next step, user will be required to scan the panel barcode to which the door is connected to.
- We need an area within the screen that shows use the camera view to scan the barcode. The installer will have an option to use the front or back camera.
- If the barcode is successfully scanned, then we show the loading animation followed by “5. Choose Door”
- If the barcode is not successfully scanned, then we show the “3.1 Scan Panel barcode - error”
3.1 Scan Panel barcode - error:
- If there is an error in scanning the barcode then we display an error.
- Come up with a design to show the error screen.
- Show an error message with “Yes” and “No” button.
- Clicking “Yes” goes back to the “3. Scan Panel barcode”
- Clicking “No” goes back to the “0. Welcome/Start Screen”
4. Loading Animation..
- Once the panel’s barcode is scanned, we need a design that shows the “loading” animation, while the search is in progress.
- We would like you come up with a designs that shows this.
5. Choose Door:
- User needs to choose which door needs to be opened upon activation by a valid credential. There will only be a choice between two doors.
6. Configure:
- User will need to enter the configuration by entering “Detection Distance” and “ Measured Power”
- These details specify the distance and power from which digital reader need to detect the mobile credentials for accessing the door.
7. Test:
- Once the specific door has been configured, it can tested.
- We will show a “Test” button that helps initiate this testing of checking whether the connection to the panel has been successfully configured.
- If the test is successful, then it show a success message
- If the test is failed, then it shows an error message
7.1 Test Error Screen:
- If the testing fails, then it shows a error message..
- We also show a button to allow the user to “Start Over”, clicking on which will take user to "0. Welcome/Start Screen"
7.2: Test Success:
- If the testing succeeds, then we show a success message
- Also we show a screenshot of this testing in a log, please add an image placeholder.
Target Audience:
- Admins and hardware installers of our existing security system.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile 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
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered 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. We may ask you to update your design or graphics based on checkpoint feedback.
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.