Challenge Summary
Welcome to the Cockpit Enterprise Dashboard Overview Page Storyboard Contest.
We just completed the wireframe contest to get initial layout, feature and functions. This contest is focus to design Enterprise Dashboard for Cockpit Direct Application. We need you create screens to help explains how the application layout and UI elements design gonna looks like based on completed wireframe.
Round 1
Your submitted solution for client review.
Cockpit Enterprise Dashboard(s) (1100px width size)
Notes: Any comments about your solutions for the Client
Round 2
Final Design
Cockpit Enterprise Dashboard(s) (1440px width size)
Notes: Any comments about your solutions for the Client
Contest Details
TopCoder has recently introduced the TopCoder Cockpit Direct Application, which allows Customers, as well as Staff, Copilots, etc., to directly engage with the TopCoder processes and Community. For this contest we are asking you to enrich "Enterprise Dashboard" pages based on previous .
In this contest we need create storyboard design based on our completed wireframe(Enterprise Dashboard Wireframe.zip). Keep Enterprise Dashboard page storyboard design looks clean and professional!
DESIGN REQUIREMENTS:
1). General
- For this contest you need focus create design of UI elements for "Overview" tab only.
- Create Enterprise Dashboard screens for 1100px and 1440px browser screen size.
- We need simple design, layout, creative features like www.mint.com showed. Check this page to know how mint.com works: https://www.mint.com/how-it-works/
- Match layout of each sections based on wireframe layout, if you think can get more better way. Feel free to show us the alternatives.
- Filter slider placed in top of page. Need you create design before and after selection created.
- Selected Filter Informations, Print, Save as PDF and Save as XLS placed below the filter. Need you create separate screen when show "All Customers" and when some filter selected.
- For every sections need your help figure out what best way to leverage the User eXperience of Cockpit Enterprise Dashboard.
- For any textarea, input, scrollbar, checkboxes, radio etc, make sure your design use standard browser style.
- Suggest us any better wording in every sections.
- Please use Cockpit GUI Kit and some source design of Cockpit Application in attachement when design this page.
- On each title of sections placed some info that will show up when user hover above them. How you present this?
- Create some screens to show flow within each sections.
- Give us clear notes of your idea/suggestion to help us understand your solutions.
2). Financial
- Keep horizontal bar in your design.
- Check Project Milestone.zip to help you build this section.
- Suggest us and improve better layout for this section.
- Data in the left is conclusion of financial information. How present this more better?
- Make sure you use proper color in bar to show status of financial state.
3). Total Spend
- Keep chart style like wireframe
- How design more better?
- How about color in bar?
- Trend line need more prominent?
- Need add "View All" link in this section
4). Project Health
- Keep Pie chart in your design
5). Project
- Notice when hover at Project Name will show tooltips. Design more better ideas to present this.
- Under "Next Milestone" column there will be time when no milestone set up. We need you create new screen like show in Project Milestone/set-project_timeline.png. This will show link that will take user to Milestone page in Cockpit Application.
6). Roadmap
- Notice the 3 tabs inside the section
7). Pipeline
- Use current chart layout.
- Aware of color difference. Research more better to display the chart?
8). Community
- This will show all community, how this section will looks?
Target Audience
Topcoder Customer Executive User.
Topcoder Customer Employees.
Topcoder Executives.
Topcoder PM.
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) 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 for your submissions files.
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 content or user click paths.
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.