Challenge Summary
Welcome to TopCoder Cockpit UX Design and Brand Update Contest
In this contest we need you to think about the user experience and look to simplify and redesign the TopCoder Cockpit Dashboard view. We are looking for a simple and modern style. We are providing the new TopCoder Storyboard UX as reference of what we are looking for, simple, modern, flat design trend.
We have a presentation on Friday - the Checkpoint will be FAST
Round 1
Your initial submission for checkpoint feedback:
- Pages 1 - 4.
- Any notes for the client explaining your design concept.
- Number your screens 01, 02, 03, 04 etc.
Round 2
All final screens with checkpoint feedback applied.
- Any notes for the client explaining your design concept.
- Number your screens 01, 02, 03, 04 etc.
Primary Goal:
TopCoder Cockpit is the web application platform we use to help copilots and clients manage their projects, contests and the community.
In this contest we want you to review the user experience (UX) and look to improve the application - this is our next step/future user interface! This contest is focused on the "Dashboard View". These new pages should follow the new style of our website (see TC-CS storyboard provided). Your new design does not need to be an exact copy of style, but it should be obvious that it's the same BRAND with the new TC-CS website.
Overall, when designing these new pages, we want you to keep in mind that:
- the page(s) should simplify the user experience of managing a project.
- the most important and most used info should be more accessible to the user.
- Everything should be easy to use and undertand.
Design Consideration:
- Please use the provided storyboard as your reference. We want the new Cockpit pages have the same brand with this new site.
- These pages should clean and simple.
- Please keep things consistent.
- Follow the flat design theme in the storyboard and please consider great use of white space.
- Feel free to updated the icons icons or any other elements for the new pages to make the design more standout where you think appropriate.
- Make sure your submission images name are arranged properly (i.e 01_Member_Profile.png, 03_a_Login_Error.png)
Required screen:
1. Project Dashboard - Overview page.
- See this page : http://www.topcoder.com/preview/projectdashboard/projectOverview.html
- This page should show some general information of a project.
- We need you to create a new view of this page. You are free to re-arrange the layout of this page. Focused on how to easily see/track the task/contests that is going on.
- We need you to add a chat functionality somewhere on this page. Think of it more like Facebook messages, where chat and email is basically the same thing. We are looking for a more integrated view of project discussions (chatter and forum type conversations).
- Include a project "burn down" view. It should be something that helps a user understand how much time and money is left to complete the current milestone as well as the project. It's like a % compete view/gauge. ("burn down" is a "Agile" methodology term if you want to research it)
2. Milestones page
- Project Milestones give a high level overview of what needs to be done in the project. They allow you to follow the progress with the entire project, instead of competition by competition. These milestones can be anything — checkpoints within your project, beta releases, an internal sign off or approval that needs to be given, etc…
- There are two views for this page:
a. List View
http://www.topcoder.com/preview/projectdashboard/projectMilestoneListView.html?formData.projectId=60011&formData.viewType=list
b. Calendar View
http://www.topcoder.com/preview/projectdashboard/projectMilestoneCalendarView.html?formData.projectId=60011&formData.viewType=calendar
- Please show some examples on the calendar view.
3. Game Plan Page
- see this page: http://www.topcoder.com/preview/projectdashboard/ProjectJsGanttGamePlanView.html
This page will defines project timeline and cost. It provides a break down of the project into the different contests that would have to be executed in order to meet the project’s goals. Each contest has an associated timeline and cost.
-- The left table view is cut off on this page, so please use Game_Plan_left_panel.png to see the exact content to be shown on this left panel.
4. Issue Tracking Page
- see this page: http://www.topcoder.com/preview/projectdashboard/projectIssueTracking.html
This page will show list of issues (Bugrace/Final Fix/additional tasks) related to the project.
5. Assets Page
- See this page :http://www.topcoder.com/preview/projectdashboard/asset/asset.html
This page will allow user to easily access the latest deliverables and assets for the project.
6. Tasks Page
- see this page: http://www.topcoder.com/preview/projectdashboard/projectTask.html
- On this page, people that working on a project can create tasks list and task under project and assign the task to other people. This allows for better project collaboration and tracking.
7. VM Management Page
- see VM Management Tab.png
- There should be another tab after Task in the navigation. Use the content from the screenshot.
VM stands for Virtual Machine. Project managers or the Copilot will set up the environments for competitors. The competitors can use the credentials provided to access the VM. Competitors can use their VMs code, debug and finally check-in the solutions. After all competitors check-in their solutions, the VM will test each of the solutions.
IMPORTANT:
- On the right side of the pages, there is a sidebar that can be expandable. Please include this in your design.
- Feel free to put any concept or ideas you have to the pages where you think appropriate. But keep in mind to focus on the user experience. User should easily understand and use your new design.
Branding Guidelines:
Font: Open to the designer.
Color: Open to the designer, but keep in mind we want this new cockpit view has the same brand with the provided storyboard.
Size: Use Standard 1024 px witdth.
Target Audience:
- TC Cockpit User (Client, PM, and Copilots)
- Potential clients/customers.
Judging Criteria:
- How well your design follow and match the current theme of the provided storyboard to make it has the same brand.
- Simplicity and Cleanliness of your graphics and design
- Design consistency.
- How well your design think about user experience.
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.