Challenge Summary
TopCoder.com has gone through much iteration over the years but one thing has remained the same - the focus on how we do what we do. Now we want to change that message and we are looking for you, the TopCoder community, to show us how. Our new focus is no longer how, but "what we can do for you".
Now that we have a new look and feel for the TopCoder home page, we are looking for some design updates to make the page ready to be developed.
We want an innovative and engaging design - a layout that grabs the user, shows them "what we can do for you" and encourages them to do it.
Overview The message of the new TopCoder home page will be "what we can do for you". It must equally engage the client and the competitor, easily showing them what they can do and quickly move them in the direction they want to go. Design Updates For this contest, you will be updating the provided home page design (TC_Homepage.psd) and make the following changes. 1. Main Message: - Update the look of the "What could you..." question and the "Our clients are..." answer. Currently, the question looks crowded into the upper left corner and does not correspond with the answer. We would like to see it more fully designed and placed more effectively in the page. - You are free to update this as you wish, but please make good use of white space, typography and design. - The "Our clients are..." answer should be located below the people and question popups, so it answers the main question and the various popup questions. - You are not restricted to the main question being on top of the people. If you feel it is more effective to have the people and question popups above the main question and answer, feel free to explore that. However, the top area MUST contain the TopCoder logo, the main question, the people with the hover popup questions and the answer. 2. People Illustrations - The intention with this are is to have a different quote or question display when a person image is hovered over. Each person graphic will have its own quote or question. - We love the idea of the people but would like to see a new design for them. - You are highly encouraged to create a new look for the people graphics. DO NOT make a small variation on the existing graphic. 3. Hover Quotes - Please change the text in the hover quote to one of the following questions. - DO NOT change the hover quote red dialog box. - If you are going to demonstrate the hover effect or transition when selecting a different person, use a different question in the pop up dialog box. Sample Questions: - What if I only paid for the best results and never had to worry about hours again? - What if I didn't have to choose between quality, speed or price? - What if I never had to choose which of my projects was the "priority"? - What if I could finally get to those projects that never get done? - What if every person working on my project wanted to work hard on it? - What if every little piece of my application was so good it won a prize? - What if I could have a global community of innovators thinking about my idea? 3. News Carousel - Remove the "News and Announcements" title. - Update the carousel so it displays only one (1) news item at a time. - You are free to make the logo or image larger and change the text layout as you see fit. - As with the current home page, the news items will be populated through an RSS feed, so be aware of that when laying out the content. 4. Hover States - For all buttons, people graphics and any other page element that has an interaction, you MUST also design the hover states of those page elements. - Create a second page in your submission, which is the same as the first page but with the various hover states. 5. Other Enhancements - If you have any other ideas on how the design may be improved upon, please include them in your mockup. - This is NOT required, but encouraged. - We like the layout and design of this page, so DO NOT radically change the look and feel. We want you to improve upon the design and not go in a different direction. - Consider typography, white space, layout, design user experience, etc. when working on your enhancement. Get creative. Design Requirements - The page must fit comfortably in a 1024x768 browser with minimal vertical scrolling. - The TopCoder logo in the current header must be used. The graphic logo file is provided. The TopCoder corporate colors must be used (red, black and white). They are found in the current home page masthead (www.topcoder.com). You are free to include any additional colors of your choosing. Design Considerations - The page should be simple and not cluttered. It should be open with a lot of white space. - The images and layout should focus on the message and not compete with it - The user's eye should be drawn to the key items so they can quickly move in the direction they want to go. - Keep it simple. We do not want any long or verbose explanations. That will be saved for interior site pages that the user can click to. - The user needs to quickly understand who they are with respect to TopCoder (customer or competitor) and decide which path to take. Depending on who they are, it will lead them down a different path. - The potential clients are the higher priority message, so please dedicate at least 70% of the layout to them. The other 30% is dedicated to the potential competitors. Target Audience When a user comes to TopCoder.com, they are either a: 1. Potential Customer - The user needs to understand that TopCoder can help them get high-quality software built and their creative needs fulfilled. 2. Potential Competitor - The user needs to understand that they can register to compete in software-related or design-related (creative) competitions and earn money. Judging Criteria You will be judged on the following: - Quality of design - How the design met the above requirements and considerations - How the content was implemented - Innovation, creativity and originality - How well the target audience and messaging was met. Submission & Source Files Preview Image Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections. Submission File For this contest, you will be submitting two (2) screens: 1. home-page.jpg - The updated home page design 2. home-page-hovers.jpg - The updated home page design with all of hover states displayed (see Requirements above). IMPORTANT- If you are submitting "small updates or changes" with multiple submissions please include in your notes file what is different or changed - this can be confusing to the client sometimes when they can't tell what is different. Source Files All original source files of your submitted designs. Final Fixes As part of the final fixes phase you may be asked to modify content or overall color/graphics.
Overview The message of the new TopCoder home page will be "what we can do for you". It must equally engage the client and the competitor, easily showing them what they can do and quickly move them in the direction they want to go. Design Updates For this contest, you will be updating the provided home page design (TC_Homepage.psd) and make the following changes. 1. Main Message: - Update the look of the "What could you..." question and the "Our clients are..." answer. Currently, the question looks crowded into the upper left corner and does not correspond with the answer. We would like to see it more fully designed and placed more effectively in the page. - You are free to update this as you wish, but please make good use of white space, typography and design. - The "Our clients are..." answer should be located below the people and question popups, so it answers the main question and the various popup questions. - You are not restricted to the main question being on top of the people. If you feel it is more effective to have the people and question popups above the main question and answer, feel free to explore that. However, the top area MUST contain the TopCoder logo, the main question, the people with the hover popup questions and the answer. 2. People Illustrations - The intention with this are is to have a different quote or question display when a person image is hovered over. Each person graphic will have its own quote or question. - We love the idea of the people but would like to see a new design for them. - You are highly encouraged to create a new look for the people graphics. DO NOT make a small variation on the existing graphic. 3. Hover Quotes - Please change the text in the hover quote to one of the following questions. - DO NOT change the hover quote red dialog box. - If you are going to demonstrate the hover effect or transition when selecting a different person, use a different question in the pop up dialog box. Sample Questions: - What if I only paid for the best results and never had to worry about hours again? - What if I didn't have to choose between quality, speed or price? - What if I never had to choose which of my projects was the "priority"? - What if I could finally get to those projects that never get done? - What if every person working on my project wanted to work hard on it? - What if every little piece of my application was so good it won a prize? - What if I could have a global community of innovators thinking about my idea? 3. News Carousel - Remove the "News and Announcements" title. - Update the carousel so it displays only one (1) news item at a time. - You are free to make the logo or image larger and change the text layout as you see fit. - As with the current home page, the news items will be populated through an RSS feed, so be aware of that when laying out the content. 4. Hover States - For all buttons, people graphics and any other page element that has an interaction, you MUST also design the hover states of those page elements. - Create a second page in your submission, which is the same as the first page but with the various hover states. 5. Other Enhancements - If you have any other ideas on how the design may be improved upon, please include them in your mockup. - This is NOT required, but encouraged. - We like the layout and design of this page, so DO NOT radically change the look and feel. We want you to improve upon the design and not go in a different direction. - Consider typography, white space, layout, design user experience, etc. when working on your enhancement. Get creative. Design Requirements - The page must fit comfortably in a 1024x768 browser with minimal vertical scrolling. - The TopCoder logo in the current header must be used. The graphic logo file is provided. The TopCoder corporate colors must be used (red, black and white). They are found in the current home page masthead (www.topcoder.com). You are free to include any additional colors of your choosing. Design Considerations - The page should be simple and not cluttered. It should be open with a lot of white space. - The images and layout should focus on the message and not compete with it - The user's eye should be drawn to the key items so they can quickly move in the direction they want to go. - Keep it simple. We do not want any long or verbose explanations. That will be saved for interior site pages that the user can click to. - The user needs to quickly understand who they are with respect to TopCoder (customer or competitor) and decide which path to take. Depending on who they are, it will lead them down a different path. - The potential clients are the higher priority message, so please dedicate at least 70% of the layout to them. The other 30% is dedicated to the potential competitors. Target Audience When a user comes to TopCoder.com, they are either a: 1. Potential Customer - The user needs to understand that TopCoder can help them get high-quality software built and their creative needs fulfilled. 2. Potential Competitor - The user needs to understand that they can register to compete in software-related or design-related (creative) competitions and earn money. Judging Criteria You will be judged on the following: - Quality of design - How the design met the above requirements and considerations - How the content was implemented - Innovation, creativity and originality - How well the target audience and messaging was met. Submission & Source Files Preview Image Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections. Submission File For this contest, you will be submitting two (2) screens: 1. home-page.jpg - The updated home page design 2. home-page-hovers.jpg - The updated home page design with all of hover states displayed (see Requirements above). IMPORTANT- If you are submitting "small updates or changes" with multiple submissions please include in your notes file what is different or changed - this can be confusing to the client sometimes when they can't tell what is different. Source Files All original source files of your submitted designs. Final Fixes As part of the final fixes phase you may be asked to modify content or overall color/graphics.
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.