Challenge Summary
With the new TopCoder Direct being introduced, we are beginning to redesign the pages in our websites. We are starting with the client pages and need to move on to the component catalog.
The goal of this contest is to take review the existing components pages (search, display, catalog itself) and redesign it. Your redesign should be both a graphical redesign (to match the pages provided as reference) as well as a UI redesign - to help with the search and display of the components.
Requirements For this contest, you will be focusing on the Component Catalog portion of the TopCoder website. The current catalog can be accessed here: http://software.topcoder.com/catalog/ The redesign of the client pages is attached to this contest. The component pages need to be redesigned to fit with this new style. The current navigation (top and side) is not needed and it must fit within the new navigation style and layout. There does not need to be any top ten lists or any featured bars either, only the main page content. Concept The overall concept is to turn the Component Catalog into more of a Store, similar to the App Store for Apple. Each component will have a nice icon and description. The user can easily search, find, get details and download a component. The overall interface should look slick and feel easy for the client or developer to search through our components. The current pages are out-of-date, clunky and hard to use. Page Requirements Main Component page - http://software.topcoder.com/catalog/ This page is currently represented in 12_Components.png. You may change the layout of this page as you wish to fit with your ideas for the component catalog. It must include a way to show featured components as well as a search and advanced search. The browse capabilities should be kept in some manner, but can be rethought. Advanced Search - http://software.topcoder.com/search/c_advanced_search.jsp Display these options in the best way possible to use the page space effectively. Search Results - http://software.topcoder.com/catalog/c_showroom_search.jsp The page should show the name, icon, type, description, download and learn more link. How this page is set up is up to you. Component Detail - http://software.topcoder.com/catalog/c_component.jsp?comp=3104198 The information contained on a detail page needs to stay, but it should be completely redesigned to meet the new ideas for the component catalog detailed above. Browse Pages There should still be a simple way to browse the catalog, but it does not need to be in a different page or done in the same way it is currently. We are looking for new layouts and new ideas to update these old outdated pages. Icons We have icons for some of the current components (available for download). You may use these icons in your design, or make new icons if you'd like that fit with your look & feel. You may also modify the icons. Obviously there are many components that do not currently have icons. You should show how this would be handled - likely by creating a "generic" icon placeholder for these depending on type and category. Design Considerations You should keep these questions in mind: - Will a user be able to quickly browse the Component Catalog and find the information they need? - If I user has specific search requirements, how easy is it for them to enter this information and find the components they need? - Are the pages simple, clean and easy to navigate? - Do the graphics enhance the experience or clutter the page unnecessarily? - How do we make TopCoder.com attractive and useful to our clients? Design Requirements - The page must fit comfortably in a 1024x768 browser with minimal vertical scrolling. - You must follow the layout/look & feel from provided pages. - You may use the icons provided as is, modified, or create new icons, but icons must be used. Target Audience TopCoder clients and developers Judging Criteria You will be judged on the following: - Quality of design - How the design met the above requirements and considerations - 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 All Requested Contest Submission Requirements stated above. Source Files All original source files of the submitted design. Files should be created in Adobe Photoshop, Gimp, Adobe Illustrator or Inkscape and saved as layered PSD files, AI or EPS files. . Final Fixes As part of the final fixes phase you may be asked to modify fonts (sizes or colors) or modify overall storyboard colors.
Round 1
At the end of Round 1, TopCoder will choose five (5) winners; each will win $50 and a Design Review. These winners and any member who had a passing submission in Round One will be eligible to compete in Round 2 for the additional $1250 in prizes.Round 2
Round 2 will start with the announcement of the five $50 Round 1 winners and the posting of their design reviews in the contest forum.Requirements For this contest, you will be focusing on the Component Catalog portion of the TopCoder website. The current catalog can be accessed here: http://software.topcoder.com/catalog/ The redesign of the client pages is attached to this contest. The component pages need to be redesigned to fit with this new style. The current navigation (top and side) is not needed and it must fit within the new navigation style and layout. There does not need to be any top ten lists or any featured bars either, only the main page content. Concept The overall concept is to turn the Component Catalog into more of a Store, similar to the App Store for Apple. Each component will have a nice icon and description. The user can easily search, find, get details and download a component. The overall interface should look slick and feel easy for the client or developer to search through our components. The current pages are out-of-date, clunky and hard to use. Page Requirements Main Component page - http://software.topcoder.com/catalog/ This page is currently represented in 12_Components.png. You may change the layout of this page as you wish to fit with your ideas for the component catalog. It must include a way to show featured components as well as a search and advanced search. The browse capabilities should be kept in some manner, but can be rethought. Advanced Search - http://software.topcoder.com/search/c_advanced_search.jsp Display these options in the best way possible to use the page space effectively. Search Results - http://software.topcoder.com/catalog/c_showroom_search.jsp The page should show the name, icon, type, description, download and learn more link. How this page is set up is up to you. Component Detail - http://software.topcoder.com/catalog/c_component.jsp?comp=3104198 The information contained on a detail page needs to stay, but it should be completely redesigned to meet the new ideas for the component catalog detailed above. Browse Pages There should still be a simple way to browse the catalog, but it does not need to be in a different page or done in the same way it is currently. We are looking for new layouts and new ideas to update these old outdated pages. Icons We have icons for some of the current components (available for download). You may use these icons in your design, or make new icons if you'd like that fit with your look & feel. You may also modify the icons. Obviously there are many components that do not currently have icons. You should show how this would be handled - likely by creating a "generic" icon placeholder for these depending on type and category. Design Considerations You should keep these questions in mind: - Will a user be able to quickly browse the Component Catalog and find the information they need? - If I user has specific search requirements, how easy is it for them to enter this information and find the components they need? - Are the pages simple, clean and easy to navigate? - Do the graphics enhance the experience or clutter the page unnecessarily? - How do we make TopCoder.com attractive and useful to our clients? Design Requirements - The page must fit comfortably in a 1024x768 browser with minimal vertical scrolling. - You must follow the layout/look & feel from provided pages. - You may use the icons provided as is, modified, or create new icons, but icons must be used. Target Audience TopCoder clients and developers Judging Criteria You will be judged on the following: - Quality of design - How the design met the above requirements and considerations - 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 All Requested Contest Submission Requirements stated above. Source Files All original source files of the submitted design. Files should be created in Adobe Photoshop, Gimp, Adobe Illustrator or Inkscape and saved as layered PSD files, AI or EPS files. . Final Fixes As part of the final fixes phase you may be asked to modify fonts (sizes or colors) or modify overall storyboard colors.
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.