Challenge Summary
Welcome to the “ICOA – Responsive Web and Mobile Storyboard Design Contest”. The goal of this contest is to take the existing website design and plan, design and create a "Responsive" design that optimizies the user experience accross wide range of various devices like desktop pc, tablet and mobile phone. In this contest, we need your help to analyze our existing website design and design how it should be responsive by creating new "responsive" screens for tablet and mobile phone by re-organizing the layouts to properly fit into the smaller screens in a "responsive" manner.
Round 1
Submit your screens for Milestone feedback
- Make sure to show us how your going to break down the design into the different screen size requirements.
- Provide any notes or questions you might have
Round 2
Final Design and Files
- All requirements as stated in contest details with client feedback applied
Contest Details
The problem with the current website is that it only looks good when viewed on a desktop PC. If a customer opens the application using smaller screen devices like mobile phone or tablet devices, the user experience breaks down and isn't consistent. We are looking to modify our exsiting site design web to become more "responsive" and create new screens for tablet and mobile phone. In this contest you will need to analyze the proper "responsive" design breakpoints and re-organize any layout elements from our current screen designs.
If you are not familiar with “responsive" web design, do your research about it and you can learn from these links :
Wiki information : http://en.wikipedia.org/wiki/Responsive_Web_Design
Working Example : http://www.thismanslife.co.uk/projects/lab/responsiveillustration/, http://twitter.github.com/bootstrap/, http://foundation.zurb.com/index.php (try resize your browser screen)
Great Gallery Examples : http://mediaqueri.es/
Project Requirements
There are four (4) screens that needs to be modied and created in the different screen sizes:
1. Homepage Screen.
2. Forwarding Date Screen.
3. Mover Information Screen.
4. Identify Information screen.
Important:
- You need to analyze and modify the desktop design grid and makes it more responsive.
- When design new screen for tablet and mobile devices, make sure not adding new layout elements, use only elements from the current design.
- Total there are 12 screens needs to be made in this contest.
Design Requirements :
1. Download the provided AI files – it contains source files of the current website design.
2. Try to keep it clean and open while still using as many sections/elements as possible.
3. Focus on ease of use!
4. Consider individuals with large fingers and design accordingly
5. Use RGB color mode
6. Minimum width for mobile phone is 640px and the Maximum width is 767px. Create your design in minimum width but make screenshot showing how your design will looks like in both minimum and maximum resolution.
7. Minimum width for tablet is 768px and the Maximum width is 1024px. Create your design in maximum width but showing how the design will looks like both in minimum and maximum screen resolution.
8. Minimum width for desktop pc is 1025px. Create your design in 1280px but make screenshot in your submission showing how the design looks in 1025px and 1280px screen resolution.
9. Pay attention to your font choices, please use web safe font when design the screen.
Limitations and restrictions:
There are some things that MAY NOT change when creating/updating the design :
• Header links and logos
• All fields and names
• All written text and instructions
• Need a review step (side bar where entered information is displayed)
• Footer content
• Privacy Act notes and statements must remain the same
• VeriSign & Credit Card Logo image (we may need to use placeholders for these)
• Pre-populated old and address options
• 3rd address flow needs to be present
What may change:
• Layout/Grid
• There must be a progress bar – but look and feel may change
• Field size – presentation
• Flow – number of steps per page and presentation
References :
- We have provided a video link to see how the current application works and it can be found from this link : http://youtu.be/W4Mn2M5oAPE.
- The current application can be opened from this link https://mgopreprod.imagitas.com/icoa, Use the test data as presented in the video.
- coa-wide-ai-source-2012-05-17.zip, contains initial graphic design source files for the application.
- Screenshot.zip, contains screenshot of the current design being used in the application (there might be some differences between ai files with screenshot, for more accurates information about the current design being used in the application, use the simulation link mentioned aboves and try the application)
Target User
- Potential Customer
- Current Customer
Judging Criteria
- How well the three view (desktop pc, tablet and mobile) match (see examples on http://mediaqueri.es/)
- Cleanliness of your graphics and design.
- Buttons/link sizes
- Ease of use
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 responsive designs within it.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. You can create the design in illustrator or photoshop. However, our client's prefer the design to be created on PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. As part of final fixes you may be asked to fix or update your screens to meet any missed requirements, forum requirements or milestone requirements.
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.