Challenge Summary
Welcome to the TopCoder Cockpit Asset View Storyboard Part 1 Contest. We just completed the wireframe contest to get initial layout, feature and functions.
This is 2 parts contest, on this contest we need your help create initial design of Cockpit Asset View. Read more details informations below for required pages for this contest.
Round 1
Cockpit Asset View (s) contains these flow
1. Asset Landing Page
1.1. Current Version tab
- (Assets Grid View)
- Delete All Versions
- Image View
2. Upload New File
- (Upload progress screens)
Notes: Any comments about your solutions for the Client
Round 2
Cockpit Asset View (s) contains these flow
1. Asset Landing Page
1.1. Current Version tab
- (Assets Grid View)
- (Assets: Search page for list view)
- (Assets: Search page for grid view)
- Delete All Versions
- Image View
1.2 File History tab
1.3 My Files tab
2. Upload New File
- (Upload progress screens)
Contest Details
TopCoder is going to add a new "Asset View" into new TopCoder Cockpit. Currently, everything in Cockpit is very focused on displaying and aggregating contest information within projects. However, it's very difficult for a user to access their latest deliverables and assets for the project.
In this contest we need create storyboard design based on our completed wireframe(cockpit-asset-view-wireframe). Keep "Asset View" storyboard design looks clean and professional!
General
- We need simple design, layout, creative and up-to-date features.
- Please learn the flow on each section of current wireframe to let you understand the application flow/function.
- Match layout of each sections based on wireframe layout, if you think can get more better way, feel free to show us the alternatives.
- For every sections need your help figure out what best way to leverage the User eXperience of Cockpit Asset View pages.
- For any textarea, input, scrollbar, checkboxes, radio etc, make sure your design use standard browser style.
- Suggest us any better wording in every sections.
- You must always check and re-use existing UI Design based on Cockpit GUI Kit and some storyboard source designs attached on this contest.
- You need create separate screens to show flow within each sections.
- Give us clear notes of your idea/suggestion to help us understand your solutions.
- Cockpit View submission need use layout with right sidebar.
- Pages except stated below out of scope of this contest
1. Asset Landing Page
- This is landing page of Cockpit Asset View.
- You might need create new icon for Asset View that will placed on top side.
- On top there's placed "Current Version", "Files History" and "My Files" tab. Any better wording?
1.1. Current Version tab
- Check placement of butons in page, feel free to suggest us the better placement
- There will be options to see page on List View and Grid View. Please create separate screens show of those view
- Search File bar placed on top of table header. How would this look?
- You need create separate pages to show "Search page for list view" and "Search page for grid view".
- Filter By need show flyout, any ideas on the design?
- Feel free to arrange the column sorting.
- "Date/Time" column need sort function.
- In the top of table header, there's placed "Batch Operation" and "Select All Checkboxes" options. How they should look? Already in best placement?
- Any better idea design how the "Batch Operation" would looks?
- Select option on "Batch Operation" dropdown will take to separate page of checked checkboxes on table.
- Select "Delete All" option will take user to Batch Delete page. (out scope of this contest)
- Select "Edit All" option will take user to Batch Edit page. (out scope of this contest)
- Select "Download All" option will take user to Batch Download page. (out scope of this contest)
- Select "Batch Set Permissions" option will take user to Batch Manage Permissions page. (out scope of this contest)
- Use existing color zebra strips/alternative background.
- On List View, table need grouping table by date. How the group designed?
- As part of this contest, need your help design how various Type File Icons would looks?
- Under "File Size/Version" there's icon of File Version.
- "FileName", "more" and "1.1" are text link.
- Click "1.1" link will take to File Version View page (out scope of this contest)
- You need create better icon for "Edit", "Upload", "Download" and "Delete" button.
- Click "Edit" button will take user to Edit File Detail & Manage Permissions page. (out scope of this contest)
- Click "Upload" button will take user to Upload New Version page. (out scope of this contest)
- Click "Download" button will download related file.
- Click "Delete" button need show the "Delete All Versions" modal. How to present File History more better?
- After click Delete All, it need show information deleted files.
- Especially for image type, file type must show the thumbnails, click the icon will show the "Image View" modal.
- On Grid View, design how the elements placed inside each section. Refer existing grid design.
- Sort By filter already good there?
- How the icons placements should looks?
- Feel free to move around the UI element placement. Suggest us how it should looks.
- Please re-use consistent pagination style
1.2 File History tab
- This page almost similar with Current version tab
- Notice there's no Grid View in this tab
- Table need clear indentation to show it's own Asset File version
- How your design presented better idea on this page
1.3 My Files tab
- This page almost similar with Current version tab, this page contains uploaded specific files by logged-in user
2. Upload New File
- This page need create 2 different upload way, "dynamic" way via Ajax uploader and "manual" way common upload file.
- On Ajax Upload File, refer how facebook upload photos works. We need some ideas on this dynamic way.
- Create separate screen show your solution.
- On Manual Upload File, user will have ability add new upload file.
- You can re-use existing preloader to show us how preloader looks. Need how progress when upload process and finish
- Need your help create how design looks when error happens?
- After files uploaded, there will be new page show Files, uploaded information. In this page, user can do some edits on "Category", "Description", and "Access Resctriction"
- Need create screen when "Add New Category". How would this look?
- When User select "Private" option. It need show multi select option of selected user. How would this look?
- Remember: Use thumbnails for image file type, and just icons for another. Should we create bigger icons on this page? Or make them consistent?
- Click "Save Details" button will show the modals information.
Target Audience
Topcoder Customer Executive User.
Topcoder Customer Employees.
Topcoder Executives.
Topcoder PM.
Judging Criteria
- How well you create "Cockpit Asset View" pages and keep things consistent with the current Cockpit Application.
- Cleanliness of your graphics and design
- User Experience & Usability of "Cockpit Asset View"
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.