Challenge Summary
Welcome to TopCoder EOI Interactive Questionnaire Design contest. We want to design the scenario and workflow for an interactive questionnaire that will be highlighted in the new TopCoder EOI home page. We hope you find time to enjoy because this is a challenging and exciting contest – jump in now!
Round 1
For your R1 deliverables please submit all screens you consider necessary to show your solution.
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
Round 2
Final design will contain all screens you consider necessary to show your solution plus any updates from client feedback:
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
The primary goal of this contest is to design the look and feel of the TopCoder EOI Interactive Questionnaire. It will collect important user information while they’re WATCHING a video at the same time!
You need to design a solution for this interactive frame/popup to display a short video (~1.5m) that will be placed in the home page, at the same time a vivid/entertaining/flashy questionnaire will appear requesting information to the user in a smart way, small talk, funny, digest.
- The main goal is to get a user to watch the video and collect user data at the same time.
- The proposed workflow is the following: a user clicks a button on the TC main site. It triggers the interactive video popup/overlay that displays the video, some instructions below and the shiny/flashy questionnaire.
It’s a real challenge to keep a user’s attention to the video and to the questionnaire at the same time, that’s one of the multiple reasons why we need your creativity, we need creative solutions for this project.
It’s important you know we’re open to suggestions, we appreciate your ideas and creativity you put in your solution. Please use notes inside the design if you need to explain how your solution works, that way we can provide a thoughtful feedback.
Branding and Guidelines
- Use the new TopCoder look graphic guidelines (browse www.topcoder.com) as reference for your designs (icons, layout, colors, etc).
- Use web-safe fonts for the page/s content.
- Your design must fit 1024 pixels wide screen resolution.
- Colors are open to designers.
Storyboard Design Requirements
In your submission, you need to create the necessary screens to show workflows:
1) Link to questionnaire
- We’ll use the existing “Learn More” button for this purpose. Replace that text with “Watch the Video”. The questionnaire will be displayed in an overlay/popup after clicking the link.
- If you have a better suggestion for the link, go ahead and propose it.
2) Questionnaire
- It will be displayed inside the overlay/popup. It contains a short video with “Watch Video” or “Play” button to start the process. It also contains the mentioned questionnaire that will prompt questions during the video play.
- The location of the video and questionnaire is up to you. However, we recommend the questions to prompt nearby the video, above or below BUT keep in mind we don’t want this to seem like some “tab” outside the video that can easily be ignored.
- We attached content. This content is open to suggestions too. Keep in mind we’d like the content to have sense of humor, to be fun, smart, we want to catch user’s attention through clever questions/words. You need to show the interaction process, how the questions will show up (animated? how?), how they will look, step by step.
- It needs to shine, literally! When a user presses “Watch the video” They should immediately realize that the questoinnaire is ALIVE. Think of animations to call eye attention, maybe some glowing or pulsing of the frame itself to make it seem ALIVE.
- It has to look amazing, streamlined and futuristic. Colors are open but make it fit the new TopCoder color scheme, titanium, glowing blues, make it sharp.
Target Audience
TopCoder potential customers, business managers.
Judging Criteria
- Consistency with new TC site concept.
- Creativity.
- Quality of design.
- User Experience.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.