Challenge Summary
Welcome to the Topcoder Community Page Hierarchy and Information Architecture Challenge!
In this challenge we are looking for you help to better organize the pages that are on the Topcoder community site and plan the navigation for them, so the user has a seamless experience.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum!
1. Site Map
2. Navigation
1. Site Map
2. Navigation
1. Design Problem:
Part A - Challenge Type
To begin with, let me tell you first this is not your classic wireframe challenge – it’s a different type of challenge more focused on information architecture (IA) for the Topcoder community site. Right now, we have many pages and sections, and some are not easy to find. Part of it because of their location in the larger structure (sitemap) of the site and/or because of the current navigation.
Part B - Main Problem
For example if a user goes in the top navigation to "Community" and then "Programs" he can see all the programs and some of the expert communities (like Topcoder Cognitive Community or Topcoder Community for Predix). If the user goes to the "Cognitive Community" (https://cognitive.topcoder.com/) the entire top navigation changes to be Cognitive Community specific. There is now a dropdown menu in the navigation where the user can go to other communities. At this point the user has lost all context of how they got the community sites, how to get back, and where they are in the larger Topcoder Community site. As you imagine, this is a bad user experience and we want to change it, by bringing all Expert Communities within the main site.
Part C - Catalog the Pages
We need your help to search for and list all the pages we have, under all the communities websites, make a sitemap and then show us how the navigation should function.
Part D - Renaming/ Restructuring the Site (IA)
Once you bring all pages together, you’ll start to notice some confusions that might appear, for example “Compete”/ “Challenges” from any expert community sites can be confused with the “Compete” from the main Topcoder site navigation. Look to avoid these issues in your layout. We are open to renaming section to make them more clear and easy for the user to understand their purpose.
2. Required Pages
1. Site Map/ Information Architecture Document
Take a close look at all the pages we have on the Topcoder communities site and make an inventory of them, and then arrange them in a nice site map, where all levels are visible.
Note: we’d like to have the pages displayed in such a way, that we won’t have more than 3 levels(ideally 2) so it’s easy to find any page with few clicks. We dont want pages getting buried like they are now
We are open to adding new section, renaming pages, etc. to make the site and user experience easy to understand and follow.
2. Navigation
If you check our top navigation on the main site, you can see that the second level navigation appears on hover state only. In our new navigation, the second level will be fixed and we have already designed a new style for it, which is attached to this challenge.
Even though this is a wireframe challenge, look to follow the same style/ structure in your layouts so we can get a good idea of how the navigation would work with the new UI designs.
Stock Artwork & Icons
- Stock photo is not allowed for this challenge.
Target Devices
- Desktop: 1400px width with height adjusted accordingly
Target Audience
- Topcoder staff
- Topcoder members
Judging Criteria
- User experience and information architecture
- How easy can the user navigate and keep track of which page he is on
- Have you listed all Topcoder pages in the site map?
- Hierarchy and organization of content
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions 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
- Wireframes should be clickable and can be opened in all major browser
- Make sure all the content is listed and the pages are linked together to show page flow.
- Keep your source files out from this submission folder.
Source Files
- All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file
- You can build the wireframes using Axure application or use Sketch(black/white theme) and request a Marvel prototype where you should link your pages
In this challenge we are looking for you help to better organize the pages that are on the Topcoder community site and plan the navigation for them, so the user has a seamless experience.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback1. Site Map
2. Navigation
Round 2
Submit your Final Design plus Checkpoint Updates1. Site Map
2. Navigation
1. Design Problem:
Part A - Challenge Type
To begin with, let me tell you first this is not your classic wireframe challenge – it’s a different type of challenge more focused on information architecture (IA) for the Topcoder community site. Right now, we have many pages and sections, and some are not easy to find. Part of it because of their location in the larger structure (sitemap) of the site and/or because of the current navigation.
Part B - Main Problem
For example if a user goes in the top navigation to "Community" and then "Programs" he can see all the programs and some of the expert communities (like Topcoder Cognitive Community or Topcoder Community for Predix). If the user goes to the "Cognitive Community" (https://cognitive.topcoder.com/) the entire top navigation changes to be Cognitive Community specific. There is now a dropdown menu in the navigation where the user can go to other communities. At this point the user has lost all context of how they got the community sites, how to get back, and where they are in the larger Topcoder Community site. As you imagine, this is a bad user experience and we want to change it, by bringing all Expert Communities within the main site.
Part C - Catalog the Pages
We need your help to search for and list all the pages we have, under all the communities websites, make a sitemap and then show us how the navigation should function.
Part D - Renaming/ Restructuring the Site (IA)
Once you bring all pages together, you’ll start to notice some confusions that might appear, for example “Compete”/ “Challenges” from any expert community sites can be confused with the “Compete” from the main Topcoder site navigation. Look to avoid these issues in your layout. We are open to renaming section to make them more clear and easy for the user to understand their purpose.
2. Required Pages
1. Site Map/ Information Architecture Document
Take a close look at all the pages we have on the Topcoder communities site and make an inventory of them, and then arrange them in a nice site map, where all levels are visible.
Note: we’d like to have the pages displayed in such a way, that we won’t have more than 3 levels(ideally 2) so it’s easy to find any page with few clicks. We dont want pages getting buried like they are now
We are open to adding new section, renaming pages, etc. to make the site and user experience easy to understand and follow.
2. Navigation
If you check our top navigation on the main site, you can see that the second level navigation appears on hover state only. In our new navigation, the second level will be fixed and we have already designed a new style for it, which is attached to this challenge.
Even though this is a wireframe challenge, look to follow the same style/ structure in your layouts so we can get a good idea of how the navigation would work with the new UI designs.
Stock Artwork & Icons
- Stock photo is not allowed for this challenge.
Target Devices
- Desktop: 1400px width with height adjusted accordingly
Target Audience
- Topcoder staff
- Topcoder members
Judging Criteria
- User experience and information architecture
- How easy can the user navigate and keep track of which page he is on
- Have you listed all Topcoder pages in the site map?
- Hierarchy and organization of content
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions 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
- Wireframes should be clickable and can be opened in all major browser
- Make sure all the content is listed and the pages are linked together to show page flow.
- Keep your source files out from this submission folder.
Source Files
- All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file
- You can build the wireframes using Axure application or use Sketch(black/white theme) and request a Marvel prototype where you should link your pages
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.