Challenge Summary
Welcome to the TopCoder Studio Help Area Web Design Contest. TopCoder Studio is looking to redesign the help section to improve organization and navigation for Studio Members. Our goal is to redesign the Studio Help area so it is contained within the Studio header and footer. We want to improve the overall user experience. Use the provided wireframes to give us your redesign. We want to make the new Studio Help Area appealing to users and have navigation that is intuitive and help topics and pages are easy to read.
Round 1
For the Milestone round, please show us your user interface designs (3 screens total) using the provided wireframes.
- Studio Help Homepage with Slide 1 of the carousel
- Slide 2 of the carousel within your Homepage
- “Help Topic” – "Competitor Bonuses"
If you want, you can provide and submit designs for the other two "Help Pages" and/or remaining slides.
Round 2
Your storyboards with milestone feedback incorporated for the following pages:
Use the provided wireframes.
- “Help Page” – Referral Bonus Program
- “Help Page” – New Member Bonus
- “Search Results”
Contest Details
TopCoder Studio wants to improve the user experience for the Studio Help Area. We are looking for you to redesign and improve the Studio Help. Reference the attached wireframes and design the listed pages based on the content provided. Have fun with the design and think about how the user (YOU) will use this help area, after all, it's YOU who will be using this area. By changing the look and navigation of the help area, TopCoder Studio hopes to make it easy for members to find important information, most popular help topics, search, and navigation that is intuitive.
Required concepts:
You will design a total of 7 screens:
----Studio Help Homepage (the page everyone sees when they click on the "help" link from Studio) with Slide 1 from the carousel
----Carousel slides (supply a new screen for the remaining 3 slides)
----"Help Topic" - Competitor Bonuses
----"Help Page" - Referral Bonus Program
----"Help Page" - New Member Bonus
Studio Help Area Pages and required content:
1. Studio Help Homepage (the page everyone sees when they click on the "help" link from Studio)
(reference file: Studio Help Area Wireframe)
- Help Navigation
- "What is Studio?" carousel slides
----- Use the exact text in the wireframe. Show us a creative image that best represents that slide.
----- Slide 1 and Slide 4 should use the corresponding imagery from the provided Studio Landing Page PSD. See attachment with specific requirments for each slide.
- A "Most Popular Help Topics" section
- How do you think the information on the help page should look so a new or current member can find the answers to their questions?
- What information is most important?
- Where on the page should the user be drawn to click on first?
2. "Help Topic" - Competitor Bonuses (secondary navigation)
(reference file: Studio Help Area Wireframe)
- Each “Help Topic” is a single page and it contains a summary, files for download, and a video (informational demo) or tutorial (step-by-step walk-through) slideshow.
- The video or tutorial slideshow will be embedded and play right there but will also have the option to expand to fill most of the screen.
- Help Navigation
- Competitor Bonus text use what is currently in the wireframes
- Video Area
- Related Topics
- Popular Topics
3. "Help Page" - Referral Bonus
(reference file: Studio Help Area Wireframe)
- Each “Help Page” is a single page and it contains a larger amount of text and possibly some graphics or screenshots. It is similar to a blog article.
- Video Area
- Related Topics
- Popular Topics
4. "Help Page" - New Member Bonus
(reference file: Studio Help Area Wireframe)
- Each "Help Page" is a sngle page and it containsa larger amount of text and possibly some grpahics or screenshots. It is similar to a blog article.
- Video Area
- Related Topics
- Popular Topics
5. Search Results
- How will it look in the design?
Branding Guidelines
- Must use the provided Studio header and footer (flat PNG files you can just drop into your PSD).
-Your design must be 900 pixels wide
- Your design must be on a white background and complement existing Studio pages (i.e. http://studio.topcoder.com/?module=ViewActiveContests
- Do not copy any styles from the Studio Help area http://community.topcoder.com/studio/new-member-guide - we do not like the fonts, bullet styles, etc. there.
- Incorporating other colors that compliment the Studio brand is ok
Target Audience
- New TopCoder Studio members
- Current TopCoder Studio members
- TopCoder Studio Admin and Staff
Judging Criteria
- User Experience!
- How well you create the "Help Area" graphics and screens
- How well they enhance the user experience and make navigating through the site easier
- Cleanliness of your graphic design
What to Submit
Preview JPG/PNG Image File
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 ZIP File
All requested contest requirements/screens as JPG or PNG files.
Source ZIP File
All fully editable original source files of the submitted design as required by the contest under "Source Files" in the side bar.
Final Fixes
As part of the final fixes phase you may be asked to complete one round of minor changes to ensure your submission meets the stated requirements of this contest. See more information about Final Fixes.
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.