Challenge Summary
Welcome to the Cockpit Launch New Contest and Contest Details Tab Redesign Contest. The goal of this contest is focus to design, reworks and do some improvements of "Launch New Contest & Contest Details Tab" 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.
- Enhanced design of Launch New Contest(s)
- Enhanced design of Contest Details Tab(s)
Notes.jpg: Any comments about your design for the Client
Round 2
Final Designs
- Enhanced design of Launch New Contest(s)
- Enhanced design of Contest Details Tab(s)
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 reworks "Launch New Contest & Contest Details Tab" in Cockpit Direct application. Actual page Launch New Contest & Contest Details Tab in Cockpit Application not have consistent design feeling for every parts element inside it. Show us your ideas how to improve and present Launch New Contest & Contest Details Tab area and make it have more efficient and consistent layout. All this page will always opened by Client, PM and Copilots everytime they want launch new contest. So please help us design that will show 1st Class of Usability and give consistency looks and feel and functions.
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)
- All text must be editable and non-graphical.
- 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.
1). LAUNCH NEW CONTEST
Current situation in Cockpit Direct application when click "Launch New Contest" button, it will showing 2 connecting steps:
a). 1st Steps
Reference Images:
Launch-New-Contest-1st-Step-1100.png
Launch-New-Contest-1st-Step-1400.png
- At the select contest type dropdown/select box, We need it replace by using graphic mode layout like showing in Topcoder Presentation project, Please check Presentation/01_Launch New Contest.psd. Please show this screen in your submission, so in the NEW design Launch New Contest will showing 3(three) connecting steps.
- We not like how the box section with grey border around them. Please show us how to improve the boxes.
- Show us proper and consistent width for select/dropdown, text input etc
- Update font using in label of each field using standard font family. Show us proper size.
- Please fix and show us consistent and best practices spacing between elements.
- How improve the Terms and Conditions more better? Is the positions already in good positions
- "?" tooltips icon design need enhanced more better.
- Update all select/dropdown in this screen using standard browser style. They are:
--- Project Name
--- Billing Account
--- Copilot
--- Round Type
--- Start Date
--- Round Duration(s)
- Are the button in the bottom already have implement the best button style theme for this page?
- We might be miss some inconsistency within the pages, you're encourage to point to us, and fix them.
b). 2nd Steps
Reference Images:
Launch-New-Contest-2nd-Step-1100.png
Launch-New-Contest-2nd-Step-1400.png
- Please update all text editor using placeholder.
Show us the proper height.
- At every section title is the header title can improved more?
- "?" tooltips icon design need enhanced more better.
- Improved layout File Upload sections.
- File to upload field must using standard browser style.
- How about the upload button style?
- Give proper spacing in Upload File sections
- We not like how the box section with grey border around them. Please show us how to improve the boxes.
- Any ide present Contest Prize more usable. Remember Click the "+" button will add extra prizes for 1-5 Place Winner. Show us how they gonna looks.
- Is the "+" button need improved?
- At the Milestone Prizes please update the select/dropdown using standard browser style
- Improve the Milestone Prizes more better.
- Improve Stock Art, Submission Visibility and Maximum Number of Submissions sections. Is the wording need improved?. Can user understand this better?
- Are the button in the bottom already have implement the best button style theme for this page?
- We might be miss some inconsistency within the pages, you're encourage to point to us, and fix them.
2). CONTEST DETAILS TAB
There's 2 modes on this contest details tab, default state and when user click "Edit" button in each sections.
a). Default Mode
Reference Images:
Launch-New-Contest-2nd-Step-1100.png
Launch-New-Contest-2nd-Step-1400.png
- This is default look of contest details tab
- Please clean up/give consistency spacing for all title and content
- Edit button must remain as existing
- Improve wording at Round Information
- Improve separator design for each section
- At Prizes section, need the column displayed more better
- Make sure they have balance padding - How to make Specification section more better?
- Final Deliverables need more improved, thinking to replace the round bullet?
- Improve Stock Art, Submission Visibility and Maximum Number of Submissions sections. Is the wording need improved?.
- Update "Back to Top" button design.
- "Activate" button need better visualitations. This is actions button to launch the contest. Show us how the button suppose to look.
- We might be miss some inconsistency within the pages, you're encourage to point to us, and fix them.
b). Edit Mode
Reference Images:
Launch-New-Contest-2nd-Step-1100.png
Launch-New-Contest-2nd-Step-1400.png
- Update all select/dropdown in this screen using standard browser style.
They are:
--- Contest Type
--- Contest Name
--- Billing Account
--- Project Name
--- Copilot
--- Round Type
--- Start Date
--- Round Duration(s)
- Red border will show when entered edit mode in each section. Please show us how to improve the boxes.
- Show us proper and consistent width for select/dropdown, text input etc
- Update font using in label of each field using standard font family. Show us proper size.
- Please fix and show us consistent and best practices spacing between elements.
- "?" tooltips icon design need enhanced more better.
- Swap the "Save Changes" and Cancel button position. update the "cancel" text link into plain text.
- Please update all text editor using placeholder. Show us the proper height.
- Update Contest Prize like what you did in "Launch New Contest", make it more usable. Remember Click the "+" button will add extra prizes for 1-5 Place Winner. Show us how they gonna looks.
- Is the "+" button need improved?
- Is the arrangement of each sections already consistent?
- Improved layout File Upload sections. Especially the uploaded file lists.
- File to upload field must using standard browser style.
- How about the upload button style?
- Give proper spacing in Upload File sections
- We not like how the box section with grey border around them. Please show us how to improve the boxes.
- Improve the Milestone Prizes more better.
- Improve Stock Art, Submission Visibility and Maximum Number of Submissions sections. Is the wording need improved?. Can user understand this better?
- We might be miss some inconsistency within the pages, you're encourage to point to us, and fix them.
Resources & Requirements
Target Audience
- Cockpit Potential Customer
- Cockpit Current Customer
- Cockpit PM and Copilot
Judging Criteria
- How well you design, plan and improve "Launch New Contest & Contest Details Tab"
- Cleanliness of your graphics, design and ability to stay within the given design reference.
- Consistency with Cockpit Direct Application Design Theme.
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. (PSD or AI files - documented)
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.