MIC App Mobile Device Storyboard Contest

Welcome to the MIC App Mobile Device Storyboard Contest. Objective of this contest build storyboard design for iPhone/Android Browsers based on current screenshot of the application. You will need redesign the looks and feel and at the same time leverage the User Experience of the application. In the end of this contest we are looking for a process flow and layout design of the pages mentioned below that are part of the whole application. This application must be user friendly, intuitive, and easy to use.

Round 1

Initial MIC App Mobile Device Storyboard Design
1. Login
2. Project Overview
3. Development Target
4. Hardware Support
5. Detailed Specifications
6. Summary
Notes : Any comments about your solutions!

Round 2

Final MIC App Mobile Device Storyboard Design
1. Login
2. Project Overview
3. Development Target
4. Hardware Support
5. Detailed Specifications
6. Summary
Notes : Any comments about your solutionse!

Contest Details
MIC mobile application is an application that runs on Mobile devices for use by internal users to capture orders for mobile applications to be created.  

Platform support
The term “Mobile devices” covers a wide range of devices and they vary in terms of size and capability, we can refer to these devices as Small and Large
- Small mobile devices - screen is less than 5" - Often used in public, on the go, with one hand, while standing for very short periods of time. These are often phones, so users expect to be interrupted on the device and need to return quickly to what they were doing on the device or otherwise.
- Large mobile devices - screen is 5" or larger without a physical keyboard (i.e., not a laptop. Usage is prolonged and uninterrupted with browsing and reading being typical tasks.

The application for now should be designed for small devices using the definition above. Eventually we want this application to be supported on all of the devices that fall in the definition of a “mobile device” including the large devices.

Requirement is to create a cross-platform application so that there is one single development effort will result in a set of native application that looks and feels the same while running on different operating systems. A cross-platform app can use many of the hardware features on each device.

Notes:
- There will be a logo placeholder in your design. 
- This application will be developed on iPhone/Android Browsers using HTML5 and Worklight
- You only need design on vertical layout..
- Suggest what fonts we should use on this application. Make sure you declare font information properly to avoid failed screening. 
- We attached MIC Screen Shots.docfor design referenced need designed on this contest.
- Existing layout just for reference. Feel free to improve, or should we just use current layout?
- We are looking for a clean and professional design 
- We need your ideas about the color theme will be use the new design. No restrictions.
- All text need editable in your storyboard design.
- DO NOT copy/crop image from provided design reference.
- Remember when create graphics for mobile site, all UI elements must have fluid width, so it will support at landscape and portrait layout.
- Graphics are extremely limited on the mobile version of the website.
- Research related "cool" web based Safari Mobile and Android browsers applications and how they work/interact/navigate.
- There must be a clear way to navigate through the application from screen to screen and the screens themselves should flow together in a logical manner.
- Buttons and links should be large enough and spaced out enough to ensure that the correct item is selected each time.
- Please research the Safari on the iPhone or in Android browsers guidelines for size and best practices, here's some web to help you begin design the application for mobile site:

Best Practices To Develop Perfect Websites for iPhone and Mobile Devices
http://woorkup.com/2010/01/10/best-practices-to-develop-perfect-websites-for-iphone-and-mobile-devices/

Mobile Web Design: Tips and Best Practices
http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html

Mobile Web Design: Tips & Techniques
http://www.cameronmoll.com/archives/000577.html

General
- On this contest, you need redesign these following pages/steps:
1. Login
2. Project Overview
3. Development Target
4. Hardware Support
5. Detailed Specifications
6. Summary
- The progress steps need presents on on every top of pages
- Need clear difference for active and inactive step. How about the completed step looks?
- Feel free to improve the layout or any UI element placement.
- As part of your task, need create validation error style for any UI elements on all pages/steps.
- On every page, quick help information placed below the title.
- Show any additional pages to explains your design solutions

1. Login
Screenshot Reference: screenshot #1
- This page will contains username and password
- How the error validation style looks?
- Click submit button will take to project overview page.

2. Project Overview
Screenshot Reference: screenshot #2
- This is Project Overview page
- Match the form content
- As possible, use standard browser style for form elements.
- How new design of datepicker icon and calendar gonna looks?
- In the right side, Menu Items consist group of radio button. Remember, in the future there will be more radio button will be placed on this page.
- Next Step button need prominent. Click this button will take to next step

3. Development Target
Screenshot Reference:screenshot #3
- This is Developement Target page
- At the top side, there's questions that will give some quick information for user
- Need some high quality icons represents the options
- In the right there's some groups of option buttons.
- Match same content like provided screenshot
- Previous and Next step placed in the left and right side. How you improve this?

4. Hardware Support
Screenshot Reference: screenshot #4
- This is Hardware Support page
- User will need answered these following sections by select the radio button or checkboxes
- Need some high quality icons represents the sections
- Layout need improved.
- Match same content like provided screenshot

5. Detailed Specifications
Screenshot Reference: screenshot #5
- This is Detailed Specification page
- Match content in the left side. It will contains some checkboxes options and dropdown. And text area in the bottom
- Checked on/off will let user to upload some required files
- There's quick information on top side of the right side. How you make this more better?
- Data box will contains some notes.
- Click "Add Note" button will show the modal. Check (screenshot #6). The modal need match current design.
- You also need how the "Add file" looks. How the boxes looks after files uploaded?
- User also have ability to delete the Note and File. Need confirmation modal
- After click Next step it will take use to Summary page

6. Summary
Screenshot Reference: screenshot #7
- This page contains all summary from previous steps.
- There will be "Edit" button on every sections.
- You will also need design "What to do next" section, like showed in the right side.

Target Audience
- Internal Users

Judging Criteria
- How well you design storyboards for MIC App Application
- 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 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 any source graphics you created in Adobe Illustrator and saved as 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.