TopCoder Platform API 3Scale Portal Reskinning Design Contest

Welcome to the TopCoder Platform API 3Scale.Net Portal Reskinning Design Contest.
The goal of this contest it to create storyboard design based on the provided functionalities and requirement outlined below by stick with current layout of 3Scale.net website. Please read the specification details below and let us know if you have questions

Round 1

Your submitted design solution for a review.
Initial Design of TopCoder Platform API 3Scale.Net Portal
1). Home
2). API Playground
3). My Dashboard
4). Showcase
Notes.jpg: Any comments about your design for the Client

Round 2

Final Design of TopCoder Platform API 3Scale.Net Portal
1). Home
2). FAQ
3). API Playground
4). My Dashboard
5). Showcase
6). Forums
7). Search
Notes.jpg: Any comments about your design for the Client

TopCoder are using 3scale.net as the community developer portal for TC Platform API site. This Portal site will be a place for TopCoder API, which is a set of rules and specifications that software programs can follow to communicate or ‘interface’ with each other.

Reskinning Requirements:

Notes:
- As possible we need keep existing layout and placement to give less effort to developer when do the updates.
- The brand new homepage must address TopCoder design theme. Color theme need to look like our current www.topcoder.com or you can re-use from provided storyboard (tc-homepage-design.zip)
- Portal Page Width needed in 980px
- You can put some random data/text when filled the page or grab some samples from site references.
- We provide you with default skinning of TopCoder 3Scale.Net pages. Check screenshots-default.zip, read more information for each screenshots below.
- No need displayed "Login" and "Logout" link in Portal site, system will automatically get TopCoder login information.
- All text need editable on your design
- You need create tabs format for main navigation as listed below:

TopCoder Platform API 3Scale.Net Portal Pages:
1). Home
1-homepage.png
- What need displayed in homepage?
- Need some graphics explains the feature of this Portal?
- This landing page should invite user to explore more of Portal site
- Give clear action button that will take user easily to 'important' pages

2). FAQ
2-faq.png
- This is new design needed on Portal Site.
- How you design the FAQ page?
- Check this site as starting point of best practices FAQ page
- You need show us if there are more than 1 page of FAQ page.

3). API Playground
- Need update the title from "Active Docs" into "API Playground" on the new site.

Here's current flow of this page:
3-active-doc-a.png
- by default each row show on collapse state

3-active-doc-b.png and 2-active-doc-c.png,
- user can expand each category

3-active-doc-d.png
- when click "GET" button it show some form inputs.
- The "Send Request" button need prominent

3-active-doc-e.png
- create validation style

3-active-doc-f.png
- Notice the ability to add parameter

4). My Dashboard
- Everytime user load this page need gif preloader as indicator TopCoder login information still requesting.
- If TopCoder login information not exists, need show form contains input for username and password
- Here's current flow of this page, you need recreate in your submission:

4-my-dashboard-1.png
- Default looks of My Dashboard page
- You'll see page divided into 2 column

4-my-dashboard-a.png
- This message show after user click "Regenerate Key" button

4-my-dashboard-c.png
- After user add Referrer Filters need display in the table below
- Show how tooltips over "?" looks

4-my-dashboard-d.png
- This page show after click "Edit" button on Properties row
- Show validation error style and message

4-my-dashboard-e.png
- When click "Review/Change" need show up modal design explains full information

4-my-dashboard-f.png
- This is default looks of Overview tab
- What should displayed here?

4-my-dashboard-g.png
- Application tab looks
- Application displayed inside the table
- User have ability to view and edit

4-my-dashboard-h.png
- Form show when click "Create a New Application"

4-my-dashboard-i.png
- Default looks of Message tab

4-my-dashboard-j.png
- Click "Compose" button

4-my-dashboard-k.png
- This is inbox looks

4-my-dashboard-l.png
- Sent Message tab looks

4-my-dashboard-m.png
4-my-dashboard-n.png
4-my-dashboard-o.png
- When click "Stats" tab need show chart.
- Improve the design
- How do you present the tab
- Notice the difference when click options on top

5). Showcase
- This will be NEW page showing some introduction of API and details page of showcase API
- Sample of our expected format https://developers.facebook.com/showcase/apps/.
- Remember to make the page layout and content simpler.

6). Forums
- This is just link that will connect to TopCoder Forums

7). Search
5-search-1.png & 5-search-2.png
- The search input need displayed on every pages.
- How search result looks?
- Should we do grouping on search result based on API type?
- How pagination looks?
- Check this site for reference best practice of Search result

8). Account
- You need create separate design show content of Account tabs:

4-account.png
- Overview page looks

4-account-1.png
- Invoice page looks

Target User
- TopCoder Member/Developer
- Current Client
- Potential Client

Judging Criteria
- How well you create design for TopCoder Platform API 3Scale.Net Portal and make sure the design address TopCoder design creatively
- Cleanliness of your graphics and design
- User Experience and Easy to Use

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
All Requested Contest Submission Requirements stated above.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Adobe Illustrator and saved as layered PSD or AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.