Challenge Summary
Welcome to TopCoder-CloudSpokes My TopCoder Pages Storyboard Design.
This is another series of contests to build our New website that will have a new style and look and feel.
In this contest we need you to create some pages for "My Topcoder" section for our new website. You will use the provided storyboard from our previous contests as your base design.
At the end of this contest, we are looking for a storyboard design that is responsive in both Desktop and Mobile view.
Round 1
Your initial submission for checkpoint feedback:
1. My Topcoder Page
2. Account Settings - My Account Page
--Name and Contact page
3. Account Settings - My Payments Page
--Payment Preferences page
4. Account Settings - My Preferences Page
--Privacy page
5. Account Settings - My Documentation Page
-Affidavits page
You only need to submit these pages in PC/desktop size for checkpoint phase.
Round 2
Your complete submissions for both size (Desktop and Mobile) with chekpoint feedback applied.
Primary Goal:
The goal of this contest is to design some pages for My Topcoder section for our new website. Please use the provided storyboard as your base design. We want you to follow the style and spacing from the storyboard. Keep in mind we want something simple and clean, flat design trend, and responsive.
Design Consideration:
- Feel free to explore the storyboard to get the feel of our new website. We want you to keep the styling and spacing from the storyboard.
- Please keep things consistent.
- Your design should be responsive, see the provided storyboard. We need you to design these pages in 2 (two) devices, pc and mobile.
- Feel free to design some icons or any other elements for the new pages to make the design more standout where you think appropriate. But please keep in mind your graphics should follow the look and feel of the provided storyboard.
- Design a graphic mechanism to identify the current page from My Account group the user is at. It’s important to differentiate if the user is in “My TopCoder”, “Account Settings”, etc. So, think of a subtle navigation inside the account pages to display the current page; somewhere close to the page title or some buttons - suggest!
- Make sure your submission images name are arranged properly (i.e 01_My_TopCOder.png, 03_a_Account_Setting_My_Account.png)
Required Screens:
1. My TopCoder page
- This page is going to have a lot of information. It’s your job to organize it in a simple, pleasing way.
- See (07_Community.png and 10_Community_Mobile.png)
- This is the “Community” page that users will see when they are NOT logged in. While this "My TopCoder" page is for a Logged in user.
Using the “Community” page found in the new site design storyboard, you will create a page that has the following elements:
a. ALL of the same elements you see on the current “Community” page, but reorganized to flow best with the rest of the elements listed below.
- The "Challenges" feed should be sortable by track.
- Mark very clear the actual phase of the challenge. Only challenges in which the registration phase is open OR the user has already registered should be shown. Active contests in which the user is not even eligible to compete should not be shown at all. The header should reflect this... something like "Challenges Open to Me" or something like that.
- We don't need the three banners at the top, nor do we need the "join now" banner for this page. Please remove them.
- The flags(on the right side of the page)
-- Keep the flags section but make it more interesting and personalised. show Maybe, how many challenges are active, and show how many I'm eligible for? Below more ideas for interesting/personal content.
---- Challenges I haven’t submitted yet.
---- Challenges forums where I just got a reply from.
----Submissions I got checkpoint winning placement and feedback.
- Star of the month
---- Explore the information you can provide here. Stars of the month deserve to be spoiled for the hard work they do to achieve this recognition. Think of the following ideas below.
---- If I’ve been a star of one month should I see something “special”?
---- How many times have I or has that person been star of the month?
---- What if I’m the current star of this month? Maybe a cool banner (or anything else) design that says “Congratulations” would be nice to see
b. Community Feeds (see attached idea - community_feeds.png)
- Redesign this.
- We need you to put this section somehow on your design.
2. Account Settings - “My Account” page
- see http://www.topcoder.com/preview/reg/my_account.html
- Redesign this page to match the style of or new website.
- There will be 3 tabs under this page, "Name and Contact", "Demographic Information", and "Account Information". Please include all these screens in your design.
3. Account Settings - “My Payments” page
- see http://www.topcoder.com/preview/reg/payment_preferences.html
- Redesign this page to match the style of or new website.
- There will be 2 tabs under this page, "Payment Preferences", and "Payments". Please include all these screens in your design.
- Use logo placeholder for the 3 payment method.
4. Account Settings - “My Preferences” page
- see http://www.topcoder.com/preview/reg/privacy.html
- Redesign this page to match the style of or new website.
- There will be 3 tabs under this page, "Privacy", "Email Notification", and "Forum Preferences". Please include all these screens in your design.
5. Account Settings - “My Documentation” page
- see http://www.topcoder.com/preview/reg/affidavits.html
- Redesign this page to match the style of or new website.
- There will be 3 tabs under this page, "Affidavits", "Assignment Document", and "Visa Letter Status". Please include all these screens in your design.
NOTE FOR ACCOUNT SETTINGS PAGE ABOVE:
ALL Account Settings pages will have the following items:
a) Tab/Section Navigation. You need to show #2 - #5 in your navigation. Please DO NOT copy the icons shown in the old “My Account” prototype. If you would like to design new icons, you may, as long as they match the existing storyboard.
b) Page Navigation. This navigation should be a sidebar with a white background. It must match other sidebar styles within the Content pages of the new site design storyboard.
c) Add Social Connections Management (Personal website, FB, TW, LinkedIn, GitHub). Use placeholder for now. We'll update these later.
Do not carry the following items over from the old “My Account” prototype:
- photo, handle, member since, etc. that information is already in the global navigation when you click “My Account”
- profile completeness. We will add this back in later. Please remove this for now.
Target Audience:
- Current and potential customers
- Current and potential community (The entire TopCoder Community AND the entire Cloudspokes community)
Judging Criteria:
- How well your design follow and match the current theme of the provided storyboard
- Cleanliness and consistency of your graphics and design
- How well your layout work with the new theme of the site
- Is your design for all the screens responsive for all the devices?
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 image files based on contest submission requirements stated above.
Source Files
All original source files. Original source files should be saved as layered Photoshop PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. If items were missed from the checkpoint round you may be asked to include them in your final design.
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.