Challenge Summary
Recently we had a few design contests to create new site design for the TopCoder-Cloudspokes Community. Now, we have an exciting task of building a large help-center which will cover the help information for all sections which includes Studio, Software, Data/Algorithms, Copilots/Reviewers, and Customers.
In this contest, we are looking for your help in creating the wireframes for this large help-center.
Round 1
Your initial wireframes for review, please make sure to complete the below required functionalities
- All items from general requirements (Navigation, breadcrumbs, Search, Support email)
- Help Center Home
- Sections
- Topics
- Sub-topics
Notes – Please add any required notes to explain your wireframes!
Round 2
Your final Wireframes for a review.
Include all required updates from the Checkpoint Feedback.
Notes – Please add any required notes to explain your wireframes!
The Help Center will have its own wordpress theme and wordpress "site" however, we will be using the new global header and navigation at the top and a global footer at the bottom. (Please see attached designs to get an idea).
Please go through the below requirements to know the pages required for wireframe.
General Requirements:
Below are some of the areas, where we would like you to use creativity by following certain suggestions given below and also please come up with out of the box solutions…
Navigation:
- It will have "Sections > Topics > Sub-Topic (Level 1) > Sub-Topic (Level 2)
- Please see the attached excel file to get an idea on what would be a section, topic etc...
- We would like the main navigation for this help-center to be in a sidebar – so we can incorporate our new TopCoder – Cloudspokes global header with all the navigational items at the top.
- How do you think, these need to be shown in sidebar? We are looking for ideas here as how a user would be using it with ease and go to their destination with few clicks.
- Currently in Design Studio Help, we have topics (example: New Member Start Guide, Copyright Policies etc…) and sub-topics (example: Assignment Document and Terms, Copyright FAQs etc…) and a user has to view a topic in order to view a sub-topic, we would like to break this and come up with something that allows user to directly jump to a sub-topic.
Breadcrumbs:
- we would like to experiment the idea of breadcrumbs, please show breadcrumbs in your work
Search:
- We will need a prominent location for the search bar.
- Search bar will shown in all pages within the help-center.
- Also show us a page how the search results are displayed.
Support:
- We need an Email Support link shown on all pages
- Members will mostly find information in the help-center to their queries, only if they are not able to find the information, they may then use the email shown in pages. So, should this email be shown in a prominent location in the page?
- Show us a best location in the page to place this.
Page Requirements:
Below are the required pages, we would like to see in your wireframes,
1) 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.
- Do we need to include navigation in this landing page?
- Do you think, we need to display icons to provide link to main five sections of the help-center?
- What are the other important elements that need to be included in this page - please go through help-centers across the web to follow the current trends. Please come up with ideas/suggestions for this main landing page in your wireframe.
- We would like to see few FAQ’s from different sections (probably most clicked FAQ’s will be shown here).
2) Sections:
This New Help Center would contain mainly five sections to start with; they are Design, Development, Data/Algorithms, Copilots/Reviewers, and Customers.
- There could be more number of sections in future.
- These sections would have their own landing page; we would like you to think on what the landing page should contain – to help you start with, do you think the existing landing page at current design studio help is correct? What are the things that need to be improved upon i.e. could we show more information about “Getting Started” or do we need to show a video (Something like ‘How it works?’), links to FAQ’s, slideshows etc..!..
- Most of the items in this landing page will be linked to the topics.
3) Topics:
Topics are the categorized groups of pages within sections; example of topics can be seen within current design studio help-center i.e. the navigation shown in left sidebar are all topics.
- These Topics would have their own landing page, and we expect to show summaries of features within the topic. For example, the "Get Paid" topic could have things like: Policies, FAQs, Video tutorial, Documents to download, Link to member payment status, News/updates about the payment policies (short update to policies) etc...
- Feel free to show us your ideas/layouts that would best suit this landing page.
4) Sub-topics:
These are the exact pages where a user would see the help information in the form of Articles, Videos, and Tutorials/Walkthroughs etc…
- Show us the flow of how a user would get to these pages, as mentioned earlier – we need the ability for the user to directly view the sub-topics from topics, how can we achieve this.
- In Software sections, we might have deep navigation up to two to three levels, For example: See this page - Conceptualization Tutorial Page. In the new Help-Center, we expect the table of contents shown in this page to be split up into Sub-topics in which case the Navigation will be like shown below:
Software (Section) > Conceptualization (topic) > Tutorials (sub-topic - level 1) > Introduction (sub-topic - level 2)
- so we need you to think on how to lay the navigation, so a user can view and get to them quickly with ease.
- Feel free to create as many pages as required in-order to show above flows.
5) Common Topics:
Few topics are common to each of the sections; for example – ‘getting paid’ help will be a common topic used among all the sections except Customers.
- Do we need to include these common topics in the main sidebar navigation? Though, we know that showing these common topics in sidebar navigation would be an ideal way – we just want to see if you have any other creative thoughts/ideas in showing them.
6) FAQ’s:
These are the frequently asked questions; show us your ideas on how to display them.
- Do you think the current way of displaying them works http://community.topcoder.com/studio/help/copyright-policies/faqs/
- Please show us, if you have more better ways to display them.
7) Member Tips:
These are the tips given by members; you can find the Member Tips in Design Studio Help.
- We are planning to have this as a separate topic within a section (studio, software, etc….) and list all the member tips by category.
- Show us your ideas on how a user views the tips, do we need to directly display the text or do you any other ideas?
- A member will also be able to submit tips like studio help-center.
8) Search Results:
As mentioned earlier, a search bar is expected to be in all pages:
- Show us how a search bar will work?
- Do we need to show a auto-sugesstions i.e. show results in a drop-down as a user starts typing a few characters?
- How will the Search Results page be?
Target Audience
-Members, Copilots, Reviewers, Customers and CS-TC Admins
Judging Criteria
Your submission will be judged using following criteria:
-Completeness and accuracy of the wireframe as defined in the contest details
-How well you implement the required data and provide suggestion, interactions.
-How well your wireframes provide a consistent user flow
-User Experience
Submission & Source Files
Preview Image
Create a 1024x1024 JPG or PNG file and place a screenshot from your submission within it.
Submission File
All requested contest requirements/screens as clickable HTML files unless otherwise stated in the contest details.
Source Files
Wireframes should be built in HTML, Axure (.rp).
Final fix
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.