Challenge Summary
Welcome to the Cockpit Enterprise Dashboard Redesign Contest. The goal of this contest is focus to design, re-work and do some improvements of "Enterprise Dashboard" page in Cockpit Application. Please read the specification details below and let us know if you have questions
Round 1
Your submitted design solution for a review.
Cockpit Enterprise Dashboard(s) - Please create all screens that help client understand the design flow
Notes.jpg: Any comments about your design for the Client
Round 2
Final Designs
Cockpit Enterprise Dashboard(s) - Please create all screens that help client understand the design flow
Notes.jpg: Any comments about your design for the Client
Contest Details
TopCoder has recently introduced the TopCoder Cockpit Application, which allows Customers, as well as Staff, Copilots, etc., to directly engage with the TopCoder processes and Community. TopCoder Cockpit allows users to
- Launch and Monitor Contests
- View Submissions
- Choose Winners for Competitions
- Pay for and Download Finished Products
and generally manage a project within the TopCoder platform.
TopCoder Cockpit is the bridge between the Client and the TopCoder Community that gives a customer the ability to build software and complete design projects of any size or scope through competition.
Contest Task
For this contest we are asking you to design and re-work "Enterprise Dashboard" in Cockpit Direct Application. Show us your ideas how to redesign/improve Enterprise Dashboard design of Cockpit Application, Please make them have more efficient layout and more usable for user.
IMPORTANT
- Keep simple and clean design! And have Great User Experience.
- Group/package each graphics in its own folder layer with appropriate names/titles.
- Keep things consistent. This means all graphics styles should work together.
- All of the graphic should have a similar feel and general aesthetic appearance.
- Make sure your design use Windows standard fonts (arial, tahoma, etc)
- You must provide us how every screens looks in 1100px width and more wider screens.
- Before you redesign the pages, please click around on attached prototype to get more familiar with Cockpit Application.
- Always refer to Cockpit GUI Kit, before you create new UI elements, or update existing elements. We need implementing consistency design theme across Topcoder Cockpit Application.
ENTERPRISE DASHBOARD UPDATE REQUIREMENTS
Enterprise Dashboard Contest goal is to get a NEW/Updated dashboard that will be landing page for Management/Director/Executive users. Currently, everything is very project centric but we don't have an easy way to aggregate project info. For example, client need to be able to get a quick single view of what is going on for TopCoder projects right now. Right now, we're thinking, they want to see:
- Client want to see summary of their project costs, this like current Enterprise table, might can do some improvement of current table to fits within new requirement.
- Client can easily understand what contest we are planning to release this week, next week, etc.
- Client can see what is currently active contest in terms of $, # of contests, # of projects, etc.
- Client can see how much $ do I have in active contests, spent in the past 30 days, and scheduled to spend in the next 30 days
- Client can see which copilots are actively running things and which copilots/projects I'm expecting things to be running for but I don't see anything running. Basically, client can track what their copilots activity.
- Client can see how much contest that they had spent so far this month, what they are actively spending in running contests, and what te planned to spend.
- We're looking for a quick indicator of health on each project.
- A summary of my pipeline (# of contests currently active, # of contests completed in the past 30 days and next 30 days)
- A summary of the Participation stats report.
- From design consideration, we like how our current Project Dashboard layout. We're open to any ideas on the look and feel, but we like the general direction that the project dashboard is going in. Refer to screenshots: project-dashboard-1100.jpg & project-dashboard-1400.jpg
- When create each sections for new requirements, feel free to create some graphic at title etc - Please watch wording when implement data for each new section
ENTERPRISE TABLE
- This table content cost value of Project client had. We're thinking this table not quite help client see summary of their project. Maybe the table design can resize/move etc, so they can
- Feel free to improve how the table should look like. Show us your idea.
- Please update the table title header to have more proper paddding etc.
CHART VIEW TABLE
Screenshot Reference:
enterprise-compare-1100.jpg
enterprise-compare-1400.jpg
enterprise-compare-tooltips.jpg
enterprise-customer-1100.jpg
enterprise-customer-1400.jpg
enterprise-customer-tooltips.jpg
enterprise-market-1100.jpg
enterprise-market-1400.jpg
enterprise-market-tooltips.jpg
- We want to keep the chart features like existing.
- Improve all UI elements to latest design.
- At this table, there's sub - tab inside it. They "Customer Summary", "Market Summary" and "Compare". We need upgrade new looks of those area, right now
- Remember hovering at title at those section will show up tooltips, we need keep current functions.
- When user click Table View and Chart View icon in the top right side, current situation will show "Loading..." red text message next to "Compare" section. We need improved this by using later preloader design in Project-Modal-Window-Preloader folder.
- Please update Filter sections like showing in Cockpit-Report-Graphic-Source. All content must stay the same, you just need update the looks and feel
- We're thinking move Filter sections above the chart. Show us the best placement.
- Update pagination style using latest/updated design.
TABLE VIEW TABLE
Screenshots Reference enterprise-table-view-1100.jpg
enterprise-table-view-1400.jpg enterprise-table-view-breakdown-modals-1100.jpg
- We need improve table arrangement and layout of this section
- We're thinking move Filter sections above the chart. Show us the best placement.
- Update pagination style using latest/updated design.
- See the "Breakdown" text link are not looks good when browser size is 1100px. Please thinking how to solve this issue.
- Click Breakdown link will show "Cost Details" modal windows. Update the modals look like current style(Project-Modal-Window-Preloader folder). We looking your help about solution of this long content of frame.
Target Audience
Topcoder Customer Administrator
Topcoder Customer Employees
TopCoder PM and Executives.
Judging Criteria
- How well you create "Enterprise Dashboard" pages and keep things consistent with the current Cockpit Application.
- Cleanliness of your graphics and design
- User Experience & Usability of "Enterprise Dashboard"
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1100x1100px 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 and saved as layered PSD 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.
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.