Challenge Summary
Welcome to NASA PDS (Planetary Data Systems) Infographic update contest.
We have a great infographic for NASA that shows how to process and prepare data so that it’s usable in creative ways. However, we need to add some informative information with some dynamic and interactive elements such as modal windows and hovers.
In this contest, we need you to update our current single screen infographic with 4 modal windows, one image carousel and an appealing hover state for the icons and special areas of the infographic. You do not have to code any functionality – just provide a static screen for each set of requirements below (screen 1, screen 2, etc.) showing how the new functionality will look when the user interacts with it.
We are providing the source files of the current infographic for you to use.
Round 1
Initial submission for client review
Round 2
All contest requirements as stated in contest details with client feedback applied
Primary Goal:
Companies have tons of data, but they struggle to understand how to even start using data to create real value from it. Many times, the data needs to be prepared and analyzed before anyone can even begin to be creative with it. TopCoder happens to be really good at helping these companies or government agencies take these steps - in the form of competition of course! In this case, TopCoder is helping NASA to actualize this.
Update Requirements:
1. Screen 1 - Hovers
Icons:
- We need you to show hover condition to the icons at the middle of the infographic (the 9 icons of the 3 phases).
- Upon hover any of these icon, we would like to see the icon "glowing" and the glowing icon will have a cosmic "ring" (think of ring of Saturn) around the icon, and should have a little moon circling the icon. (See the NTL logo at the bottom as inspiration).
- The colors are open, but please keep the look and feel of the current design. Your colors should compliment the current design theme, to make these icons look great and appealing, so it is obvious a user should click on it.
Call to action:
- We need you to provide the hover condition for the call to action "Connect with TopCoder Today!". Some ideas, perhaps the area glowing, font color changes, font size increasing etc. We are welcome to any ideas you have to make this appealing so the user knows this is clickable and they should click on it.
2. Screen 2 - Re-thinking step modal window
- Upon clicking one of the icon, We need a modal window screen to show more details of the process.
- On this screen, take example the first icon "Re-thinking".
Title:
- This modal screen should show the title "PHASE 1 Make Your Data Accessible" and the sub title "Re-thinking"
Contents:
- Provide area to put some copy to explain this section - you may use dummy text (lorem ipsum) for now.
- You may show the icon in this screen, feel free about the position but please make sure everything is organized and appealing.
- There should be a functionality for user to navigate to the next step which is the "Data" section. Perhaps a "Next" or "Go to Next Step" icons? or something you think best to show this?.
- There should be functionality to close this modal screen at the top. An "x" button or "Close", please use what you think best in your design.
3. Screen 3 - Output step modal window
- Upon clicking one of the "Output" icon from either Phase 1 or 2, we need a modal window screen to show more details of the process.
Title:
- This modal screen should show the title "PHASE 1 Make Your Data Accessible" and the sub title "Output"
Contents:
- You may show the icon in this screen, feel free about the position but please make sure everything is organized and appealing.
- Provide an images carousel functionality on this screen. Provide us with 4 images placeholder and the carousel function with arrows, etc.
- Above the carousel, there should be the larger image showing the details of the selected image from the carousel and short copy of the image details. Please use dummy text for the details for now.
- There should be a functionality for user to navigate to the next step. Perhaps a "Next" or "Go to Next Step" icons? or something you think best to show this?.
- There should be functionality to close this modal screen at the top. An "x" button or "Close", please use what you think best in your design.
4. Screen 4 - Watch Video modal window
- At the end of all the 9 steps from the 3 phases (it means after the "Applications" step) there should be a final modal screen to direct the user to watch the video. We need you to design this modal window.
Title:
-Make the title "Watch Video"
Contents:
- Provide some copy placeholder in this screen and, a Call to action "Watch the video of the Augmented Reality App!"
- There should be functionality to close this modal screen at the top. An "x" button or "Close", please use what you think best in your design.
5. Screen 5 - Contact TopCoder modal window
- At the bottom of the infographic you'll see a Connect with TopCoder today! call to action.
- Upon clicking this call to action, we need a small modal screen right above the call to action to ask the user's information.
Title:
- Make the title "Contact TopCoder right now"
Contents:
- Then we need to show the following fields on this small modal screen:
First Name: (and the text field)
Last Name: (and the text field)
Email: (and the text field)
Title: (and the text field)
Description: (and the text field)
and a "SUBMIT" button.
- For this modal screen, we need you to apply the TopCoder Branding Color (Red, Black and Grey)
- There should be functionality to close this modal screen at the top. An "x" button or "Close", please use what you think best in your design.
Important Notes:
- For the modal screen, we need a clean and creative design. Please keep the look and feel of the current infographic. Font size or colors are open, but keep in mind to make the modal screens appealing since this is going to show the important details of the whole process.
- You will need to download a non-standard font for the source file provided to be used in your design. YOU MAY DOWNLOAD THE FONT HERE.
- While designing the screens please keep in mind that user have to be very obvious to "get around" the content and icons.
- Provide a note or documentation if you need to explain of any elements you use on your design, interaction, hover etc.
Target Audience :
- Information and Technology Companies
- Government Agencies
Judging criteria :
Your submission will be judged on the following criteria:
- Cleanliness and creativity of your update infographic design.
- How engaging and interesting the infographic looks!
- The completeness of your update design based on the listed requirements.
Submission and Source Files:
Preview JPG/PNG Image File
- 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
- All requested contest requirements stated above - PNG or JPG files
Source file
- All requested Contest Requirements stated above, saved as layered AI files (Follow the current infographic source).
Final Fixes
- As part of the final fixes phase you may be asked to modify your update design.
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.