Challenge Summary
Our new TopCoder Direct Flex application allows anyone to launch and monitor contests. One very important part is being able to manage your contest and projects. Users can do this now, but it is not that intuitive.
In this contest, we want to create the Flex widget that makes contest and project management a highly interactive and very cool experience. This updated widget is going to use window shades, page flips, accordions and other great features that Flex is capable of. Show us your best Flex skills and have some fun.
Overview In the contest, you will be recreating the overall structure of the My Projects widget. We are looking for some very innovative, smooth transitions and interactions with this widget redesign. The widget should be an exciting experience for our users. Widget Functionality The wireframe provided shows the basic structural layout of the My Projects widget. For this contest, you must include the all of the functionality listed below. 1. Left Column:2. Right Column This area displays information about the project that was selected in the left column. There are two (2) sections that are shown in this column that the user can switch between them. - Project Details: This is an overview of the project and contains the following static information: - 1) Project Name - 2) Project Description - 3) Start Date and End Date - 4) Project Owner - 5) Users: People designated by the owner to view and interact with the project, but not given full permissions. - Contests: This is a list of all the contests in the selected project. This list can be sorted in several ways - by date, contest type or contest status. The user has the option to toggle between these three (3) views. - 1) By Date: The user selects a date range (or chooses to view all) and the contests are shown as one big list. - 2) By Contest Type: The contests are split up into contest types (Studio, Component, Architecture, etc.). Each type has its own sub-section that can expand or collapse accordion-style and reordered. For example, the project has 10 contests with 3 for studio, 5 for components and 2 for assembly. The user collapses the studio contests section and drags the component contests section above studio at the top of the widget. - 3) By Status Type: This is the same functionality as #2 above (By Contest Type) except is organized by the contest status - Active, Action Required, Draft, Completed, etc. ** The user can switch between the Details and Contest views using the buttons in the upper right corner of the widget (see provided wireframe). The transition between the 2 sections should be done with a highly interactive animation - such as a frame spin, page flip, etc. Content Requirements - Please log in to http://www.topcoder.com/direct to the current My Projects widget under the My Projects tab. Use the project and content information in there for your widget. You can log in with your standard TopCoder handle and password. - For project details, use placeholder text. - Add an "Add New Contest" button in the Contest view of the right column. This does not need to be functional for this contest, but it must be in the widget. Use the provided right arrow button in the attached "Buttons_Images.zip". To see how this arrow button works, Please log in to to the current Flex application at http://www.topcoder.com/direct and go to the Launch a Contest widget under the Launch Contests tab. Design Requirements - Create your widget into the current Flex application prototype that is provided. Create a tab called "My Projects" and place the standard 2-column size widget in that tabbed area. Use this widget as the My Projects widget that you will build. - The layout MUST follow the provided wireframe. Functional Requirements These features should be implemented into the widget, but do not need any special transitions. We are looking for the functionality. We encourage you to add cool effects wherever you wish, but it is not required for this list: - Hover States: All buttons and clickable graphics must have hover states. - Left Column Active Click State: When a project is clicked in the left column, the data changes in the right column. You MUST include an active state in the left column that shows what project is currently being displayed. - Buttons: All of the buttons should use the same styles as the current Flex application. You MUST use the provided images and styles (Button_Styles.doc and Buttons_Images.zip). Animation and Transition Requirements The following are interactive widget features where we are looking for some fun animations and transitions. DO NOT simply have them switch from one state to another. - Window Shade: The left column should slide open and close using a vertical window shade effect. This area should have an animated transition and not simply open and close. The direction of the arrow in the tab should change based on whether the areas are opened or closed. The arrow tabs are provided in Buttons_Images.zip) - Expand/Collapse Accordion-Style: In the contest view of the right column with either the Type or Status filter, the sub-sections should be able to expand and collapse. You can view this functionality in the current My Project widget. - Draggable Resorting: In the contest view of the right column with either the Type or Status filter, the user should be able to resort the sub-sections by dragging them up or down to above and below the other sub-sections. You must include an indication that the sub-sections can be dragged and where the subsection is going to be dragged. - Right-Column Toggle: There should be a highly interactive transition when the user switches between the Details and the Contests view in the right column. This can be done as a page flip, a 3-D window spin or any other transition you feel would give the desired effect. We want this part to be very cool and fun. Submission Deliverables For this contest, you will be adding to the provided Flex prototype. Besides submitted the updated prototype, you MUST include a separate text file that describes what additional code you put into the Flex prototype and where it is located. Judging Criteria You will be judged on the following criteria: - Smooth Transitions: How smooth the transitions and interactions. We do not want any jagged or jumpy movements. - Consistency: How consistent the various transitions are with each other for a unified user experience. - Implementation: How well the widget follows the layout and functionality of the wireframes and the descriptions above. You MUST include a separate text file that describes what additional code you put into the Flex prototype and where it is located. Preview Image Your preview image (to be displayed on TopCoder Studio) should be 1024x1024 with a screenshot of the widget thumbnail view placed within this preview area.
Overview In the contest, you will be recreating the overall structure of the My Projects widget. We are looking for some very innovative, smooth transitions and interactions with this widget redesign. The widget should be an exciting experience for our users. Widget Functionality The wireframe provided shows the basic structural layout of the My Projects widget. For this contest, you must include the all of the functionality listed below. 1. Left Column:2. Right Column This area displays information about the project that was selected in the left column. There are two (2) sections that are shown in this column that the user can switch between them. - Project Details: This is an overview of the project and contains the following static information: - 1) Project Name - 2) Project Description - 3) Start Date and End Date - 4) Project Owner - 5) Users: People designated by the owner to view and interact with the project, but not given full permissions. - Contests: This is a list of all the contests in the selected project. This list can be sorted in several ways - by date, contest type or contest status. The user has the option to toggle between these three (3) views. - 1) By Date: The user selects a date range (or chooses to view all) and the contests are shown as one big list. - 2) By Contest Type: The contests are split up into contest types (Studio, Component, Architecture, etc.). Each type has its own sub-section that can expand or collapse accordion-style and reordered. For example, the project has 10 contests with 3 for studio, 5 for components and 2 for assembly. The user collapses the studio contests section and drags the component contests section above studio at the top of the widget. - 3) By Status Type: This is the same functionality as #2 above (By Contest Type) except is organized by the contest status - Active, Action Required, Draft, Completed, etc. ** The user can switch between the Details and Contest views using the buttons in the upper right corner of the widget (see provided wireframe). The transition between the 2 sections should be done with a highly interactive animation - such as a frame spin, page flip, etc. Content Requirements - Please log in to http://www.topcoder.com/direct to the current My Projects widget under the My Projects tab. Use the project and content information in there for your widget. You can log in with your standard TopCoder handle and password. - For project details, use placeholder text. - Add an "Add New Contest" button in the Contest view of the right column. This does not need to be functional for this contest, but it must be in the widget. Use the provided right arrow button in the attached "Buttons_Images.zip". To see how this arrow button works, Please log in to to the current Flex application at http://www.topcoder.com/direct and go to the Launch a Contest widget under the Launch Contests tab. Design Requirements - Create your widget into the current Flex application prototype that is provided. Create a tab called "My Projects" and place the standard 2-column size widget in that tabbed area. Use this widget as the My Projects widget that you will build. - The layout MUST follow the provided wireframe. Functional Requirements These features should be implemented into the widget, but do not need any special transitions. We are looking for the functionality. We encourage you to add cool effects wherever you wish, but it is not required for this list: - Hover States: All buttons and clickable graphics must have hover states. - Left Column Active Click State: When a project is clicked in the left column, the data changes in the right column. You MUST include an active state in the left column that shows what project is currently being displayed. - Buttons: All of the buttons should use the same styles as the current Flex application. You MUST use the provided images and styles (Button_Styles.doc and Buttons_Images.zip). Animation and Transition Requirements The following are interactive widget features where we are looking for some fun animations and transitions. DO NOT simply have them switch from one state to another. - Window Shade: The left column should slide open and close using a vertical window shade effect. This area should have an animated transition and not simply open and close. The direction of the arrow in the tab should change based on whether the areas are opened or closed. The arrow tabs are provided in Buttons_Images.zip) - Expand/Collapse Accordion-Style: In the contest view of the right column with either the Type or Status filter, the sub-sections should be able to expand and collapse. You can view this functionality in the current My Project widget. - Draggable Resorting: In the contest view of the right column with either the Type or Status filter, the user should be able to resort the sub-sections by dragging them up or down to above and below the other sub-sections. You must include an indication that the sub-sections can be dragged and where the subsection is going to be dragged. - Right-Column Toggle: There should be a highly interactive transition when the user switches between the Details and the Contests view in the right column. This can be done as a page flip, a 3-D window spin or any other transition you feel would give the desired effect. We want this part to be very cool and fun. Submission Deliverables For this contest, you will be adding to the provided Flex prototype. Besides submitted the updated prototype, you MUST include a separate text file that describes what additional code you put into the Flex prototype and where it is located. Judging Criteria You will be judged on the following criteria: - Smooth Transitions: How smooth the transitions and interactions. We do not want any jagged or jumpy movements. - Consistency: How consistent the various transitions are with each other for a unified user experience. - Implementation: How well the widget follows the layout and functionality of the wireframes and the descriptions above. You MUST include a separate text file that describes what additional code you put into the Flex prototype and where it is located. Preview Image Your preview image (to be displayed on TopCoder Studio) should be 1024x1024 with a screenshot of the widget thumbnail view placed within this preview area.
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.