CS-TC Help Center Storyboard Design Contest

Welcome to CS-TC Help Center Storyboard Design Contest. We just completed a wireframes to get the inital flow for the large TopCoder-CloudSpokes Help Center. For this contest, we need your help in transforming the wireframes to a responsive storyboard designs based on the attached design directions.

Round 1

You Initial Designs for review.

- All Required Pages for the Desktop View
- 'Section' Page in Mobile View (If you can show any additional mobile screens, please show them as well)

Notes.jpg: Any comments about your design for the Client 
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.

Round 2

Final Designs (with all required feedback implemented) for review.

- All Required Pages for the Desktop and Mobile View

Notes.jpg: Any comments about your design for the Client 
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.

The main aim of this contest is to come up designs for the New CS-TC Help-Center, this large help-center which will cover help information for all sections which includes Design, Software, Data/Algorithms, Copilots/Reviewers, and TopCoder University. The Help Center will have its own wordpress theme and wordpress "site".

We recently ran a few design contests to create new site design for the TopCoder-Cloudspokes Community, in this contest - you will reuse many of the design elements to help us build a consistent design.

IMPORTANT!! Design Considerations:
- Please use the global header and navigation at the top and a global footer at the bottom from the attached storyboards
- Follow the color scheme as shown in the attached designs.
- Create icons whereever necessary, follow the design aesthetics from the attached designs.
- Continue the FLAT design trend shown in the New Designs
- You may reuse any designs from the attached Storyboards.
- We are looking for your help in designing the desktop view (1024 x 768) and mobile view (320 x 480)

General Requirements: 
Below are some of the areas, where we would like to see your creativity by coming up with an out of the box solutions…

Navigation: 
- It will show "Sections > Topics > Sub-Topics", please see the attached excel file to get an idea on what a section, topic could be.
- We would like the navigation for this help-center to be in a sidebar like shown in the wireframe
- We need consistent icons for each of the section, they are "Design, Development, Data/Algorithms, Copilots/Reviewers and TopCoder University"
- Please reuse the icons for Design, Development and Data/Algorithms from the attached designs
- Design the icons for Copilots/Reviewers and TopCoder University.
- Based on the wireframe, we are planning to show a smaller version of these section icons in the left side collpased view i.e. when a section is selected and a medium size above the Topics/Sub-topics list with the name of the section.
- Create the hover and selected styles for all these navigation links (Section, Topics, Sub-topics).
- Probably we will need a scroll bar to be shown in the Topics/Sub-topics navigation like shown in the wireframe - as this list could be long.
- You also need to think on how these should be planned for a mobile view?

Breadcrumbs:
- Please show breadcrumbs in your designs, follow the wireframes for this.
- Please create the hover and selected style for this

Search:
- We will need a prominent location for the search bar like shown in the wireframe.
- Search bar will shown in all pages within the help-center.
- Design this search bar, create search icon if needed.
- Please place the following words inside the search bar: "Search Help Center".
- Also, show your designs for the auto-suggest drop-down. (i.e. as a user types the text, they need to see matching topics in a drop-down).

Support: 
- We need an Email Support link shown on all pages, like shown in the wireframe
- Please use the following words for the support email area: "Email Support Team".
- Please come up with better designs for this.

Page Requirements
Below are the required pages from the wireframe...

Help Center Home:
This is main page in the help-center, it will be a gateway for the user to proceed to other sections of the help-center
- This page will play a very important role in the help-center. 
- Please reduce the height of the slideshow a bit.
- We will have the colored bars with the icon and name of the section at the bottom of the slideshow - clicking on these will show the corresponding slide. 
- Colored bars shown at the bottom of the slideshow need to have a Hover and Active styles
- FAQs will be a static area shown on the right side.
- Click on the "More" in 'Member Tips" shown at the bottom, please design the member tips view.
- Please follow the wireframe for contents to be shown in this page.

Section:
This New Help Center would contain mainly five sections to start with; they are Design, Development, Data/Algorithms, Copilots/Reviewers, and TopCoder University.
- You can reach the section landing page simply by clicking on the any of the section shown in the left.
- These sections would have their own landing page, follow the contents from the wireframe.
- This page has a banner at the top, you may use a placeholder for it.
- This page shows contents in Grid and List view, please reuse the grid/list buttons from the attached designs.
- Please show your designs for grid and list views

Topics:
- Click on a "Topic Name" (example: In studio section, topics names are Competition Types, Tournaments etc..) from the left-side navigation to reach this page.
- This page shows Topic Summary at the top, since this will be consistent in all topic landing pages, please create a style to show the summary.
- Below the topic summary, we will list all the Sub-topics within that topic.
- Please remove the "thumb image, username and date" - its not required, just the sub-topic title and a few lines from it should be fine.

Sub-Topics:
- In the wireframe, from the topic landing page, click on any of the listed sub-topics to view the sub-topic page.
- These are the exact pages where a user would see the help information in the form of Articles, Videos, and Tutorials/Walkthroughs etc…
- Follow the wireframe for the contents
- These would contain 'Title' and followed by "Table of Contents" at the top, these table of contents will mostly be used for the help contents in Software section - please come up with a design that highlishts these table of contents.
- At the bottom, we will have two columns 1) "Related" which will have a few links and 2) Resources - which will show few documents and a video thumbnail. How should these be shown?

Search Results:
As mentioned earlier, a search bar is expected to be in all pages:
- Click on the magnifier icon in the search bar to see the results
- The top buttons shown in the search results are filters, how should these be shown in your designs?
- Follow the contents from the wireframe.

Branding Guidelines
- Please use the logo from the attached storyboard designs
- Please follow the colors from the attached designs.
- Please continue to use the Flat design concept 

Target User
-Members, Copilots, Reviewers, Customers and CS-TC Admins

Judging Criteria
- How well you create your designs based on the wireframes.
- Cleanliness of your graphics and design.
- Design looks and User Experience.

Submission & Source Files
Preview Image
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 File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on other winning placements.