Challenge Summary
We are improving the TopCoder Cockpit platform for clients and copilots. We need your help to design a new navigation to be very easy to use and look professional. Welcome!
Round 1
For your R1 deliverables please submit all the requested items from "Design Requirements" section.
Round 2
For your R1 deliverables please submit all the requested items from "Design Requirements" section plus any feedback from client.
TopCoder Cockpit is the web application platform we use to help copilots and clients managing projects, contests and the community. We are launching a new dashboard with new navigation. This navigation is the design focus, it should be easy to use, add thoughts to this challenge!
Branding and Guidelines
- Use dashboard.psd which contains a screenshot of the Cockpit dashboard page and guidelines for your design.
- Use the Cockpit GUI Kit.zip for graphic guidance.
Design Requirements
1) Top Header Navigation
- New navigation should be designed/integrated onto the same dark gray top bar.
- You can use icons from CockpitNavigationIcons.zip and integrate them in your design. This is not mandatory, it’s up to you.
- Move breadcrumbs right below the dark gray bar the top, above the project title (TC - Cockpit Simplification). You can adjust that area height (project title) so it fits better. We are open to suggestions.
- Your navigation design must show hover effects and any other state it requires.
- Navigation design must cover the following items:
- Dashboards
-- Enterprise
-- Operations
-- Accounting
-- Internal
-- My Custom Dashboard
- Projects
-- Start New
-- Current Project
--- Overview
--- Game Plan
--- Settings
--- Recent Projects
--- Project Sample Name 1
--- Project Sample Name 2
--- Project Sample Name 3
--- All Projects
- Reporting
-- Competition Costs
-- Pipeline
-- Project Metrics
-- Participation Metrics
-- Issue Metrics
- Admin
-- General
--- Contest Fee Management
--- VM Management
--- Manage Copilot Feedback
--- Manage Member Badges
--- Scorecard Management
-- Settings
--- My Profile
--- Notifications
--- Groups
2) Sidebar
- Side bar will be an expandable/collapsible widget on the page. Show both scenarios, when side bar is collapsed (with button/link to expand) and when side bar is expanded.
- There is a feedback button at the bottom of the side bar. Feel free to redesign it to match the new side bar visual style.
- The side bar will show actions users commonly execute grouped by alerts, tasks and notifications.
- Alerts
-- Contest XYZ is stalled.
-- Game Plan is out of date.
-- 12 forum posts have not been answered.
- Tasks
-- 03/28/2013 - Checkpoint Feedback due for Contest XYZ.
-- 04/01/2013 - John Smith to provide customer environment details.
- Notifications
-- There is a platform update. Read more.
-- All Studio Copilots need to run a new training course. Read more.
Target Audience
TopCoder staff, copilots and clients.
Judging Criteria
- Improvements to navigation and usability enhancements.
- User Experience.
- Cleanliness of your graphics.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.