Challenge Summary
Welcome to TopCoder University Stoyboard Contest.
We are going to built Topcoder University website upon wordpress. TopCoder University will be used as a one-stop-shop training portal for new clients onboarding with TopCoder. It will hold training videos, step-by-step walkthroughs, interactive diagrams/pages and searchable FAQs. Clients will be able to sign up for training workshops and other live group training from here as well.
At the end of this contest, we are looking for a clean, elegant, and easy to use web storyboard.
Round 1
Submission design for client review:
- All the screens listed in the requirement.
- Notes: Any comments about your design for the Client
- Please number your files in the order they should be viewed (01,02,03,04,etc)
Round 2
Submission design for client review:
- All the screens listed in the requirement and round 1 feedback included and implemented.
- Notes: Any comments about your design for the Client
- Please number your files in the order they should be viewed (01,02,03,04,etc)
Primary Goal:
For this contest you need to design a storyboard for TopCoder University based on the conceptualization provided. In the wireframe you'll find all the required screens to be designed along with all the functionality we want to be applicated to the website. More details in the requirements below.
Important:
- Please read and explore the wireframe to help you to get a better picture and illustration of this website. You need to capture all the page flow from the web_site.pdf along with the functionality for each screen.
- Suggest us more better ideas! No restrictions.
- Design sharp icons or graphics as much as possible to make your design stand out than others. All the icons must have same design feeling with www.topcoder.com
- Please provide hover condition for buttons, links, or images in the storyboard to help us better understand in reviewing the storyboard.
- Provide any notes about your design or each elements to help us better understand the storyboard.
- Please remember, the wireframe we provided is not a fix layout or even the fix functionality. Suggest us your ideas to get the application built better. We are welcome to any ideas for functionality, popup, layout and theme or even screens for this website.
- Number your screens and put screen names in your submission file to help us easily reviewing.
- As examples you want to show in some screens, you may use any Topcoder site elements (contest name, contest preview images in studio, algorithm archieve, etc)
- Please stay with the look and feel of www.topcoder.com site.
References:
- Reference 1
We like the 1-2-3 steps at the top, this makes it very obvious where to go. The site is clean, uncluttered.
- Reference 2
We like the layout of this site. The banner at the top could focus on our group training sessions led by TC PM. Other than the layout, this particular site seems just a bit busy, too many changing pictures and objects.
- Reference 3
We like the idea of having clients type in questions and have FAQ's with those keywords in them pull up.
Required Pages:
1. Homepage
- see Home.html
- We want our global navigation to be on the left side of the site.
- There will be 4 main navigation items: "Getting Started", "Training Webinars", "Help Center", and "Contact Us"
2. Design Studio Page
- see Design_Studio.html
- this is the page under sub navigation Getting Started - Competitions
3. Set up your first Project Page
- see Set_up_your_first_Project.html
- this is the page under Getting started navigation
4. Training/Webinars Page
- see Training_Webinars.html
- This is the second navigation on the website
- Please design us an appealing functionality for this screen.
- By clicking the TopCoder Employee radio button at the top will bring user to the Login Pop Up. Suggest us a better design you think best about this.
- Provide the login error screen on this section.
- Upon successfully login, the secured and restricted webinars will be showed, and a logout function at the top.
Suggest us an appealing design on this section.
5. Help Center
- see Help_Center.html
- This is the third navigation on the website.
6. Contact Us
- see Contact_Us.html
- This is the fourth navigation on the website.
Branding Guidelines:
Size: The page width must set to 1024px with content width must set to 960px, we want it to support less resolution monitor.
Fonts: Fonts are open to the designer, But we encourage you to choose and use web safe font. Please be aware of font delivery requirement.
Color: Refers to this site for color and the look and feel: www.topcoder.com (Red, Black, Gey)
Target Audience:
- TC members, admin, PM, copilot.
- New and Potential Customer
- Current Customer
Judging Criteria:
- The completeness of your storyboard
- User experience of the storyboard
- The quality of your design as well as following the provided guidelines.
- How well you follow the wireframe and the flow or provides new idea about how the screen must looks.
Submissions & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPEG or PNG file in RGB color mode at 72dpi and place a screenshot of your submissions within it.
Submission File
All requested Contest Requirements stated above in PNG files.
IMPORTANT - If you are submitting "small updates or changes" with multiple submissions please include in your notes file what is different or changed - this can be confusing to the client sometimes when they can't tell what is different.
Source Files
All requested Contest Requirements stated above in PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your storyboard.
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.