Challenge Summary
Welcome to the TopCoder Cockpit Asset View Storyboard Part 2 Contest.We already get initial looks on Cockpit Asset View storyboard in previous contest. This time, you need continue creating required pages based on provided wireframe. Read more details informations below for required pages for this contest.
Round 1
Your submitted solution for client review.
1. Upload New Version(s)
2. File Versions View
3. Edit File Detail & Manage Permission
4. Batch Download
Notes: Any comments about your solutions for the Client
Round 2
Final Design
Cockpit Asset View (s) contains these flow
1. Upload New Version(s)
2. File Versions View
3. Edit File Detail & Manage Permission
4. Batch Delete
5. Batch Edit
6. Batch Set Permissions
7. Batch Download
Notes: Any comments about your solutions for the Client
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 wireframe(cockpit-asset-view-wireframe) and still need stick with previous storyboard wireframe.
You need make sure your submissions follow existing "Asset View" storyboard feeling and appereance.
General
- 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.
- In some page you need re-use previous solution/function based on completed Asset View storyboard design.
1. Upload New Version
- This page purpose to replace 1 existing asset file.
- User land on this page, after click upload button of some row of asset list on the Landing page
- In the left side, there's quick infomation of current file.
- Click Yes button will show Upload Area, on "manual" way this page only show 1 upload field. How your design.
- Create separate screen to show the Upload New Version - Progress Upload. Show us screens when show more than 3 upload fiiles.
- Need create new error screen, that will only allowed user to use one of "Manual" or "Dynamic" upload.
- How "Cancel Uploading" modal should looks?
- How "Discard Uploaded Files" Modal should looks?
- After upload finish, it will show Upload New Version - Detail.
- Notice there's NEW badge in front of file type, also there's more information of file versions in below the file type.
- In the right side, there's confirmation questions if user need update the details of the new uploaded version.
- Click Yes will let user edit the details information.
- Create separate screen showing Image View when click the thumbnail, modal will contains full size image.Re-use existing design/modals.
- Also when viewing images on modal for Image Type, how user see the previous versions? Maybe use slideshow function. How you show information of previous version?
- Notice the small difference things like button text, badge etc on this flow. Always refer to wireframe.
2. File Versions View
- This page contains information of asset file version and information.
- Left side contains data of latest version.
- Notice the LATEST VERSION badge above the file thumbnail.
- Table in the right side consist of version information
- Actions button show up again here.
- How page looks when navigate from one version to another. What will be changed on page?
3. Edit File Detail & Manage Permission
- User will take to this page when need edit file detail on Landing and File Version View page
- Notice the LATEST VERSION badge above the file thumbnail.
- In this page, user can do some edits on "Category", "Description", and "Access Resctriction"
- Some design on this page already exists in previous storyboard, please re-use them.
- When User select "Private" option. It need show multi select option of selected user. How would this look?
4. Batch Delete
- This page will show delete confirmation of more than 1 file, after user checked on some checkboxes on Landing page
- How messaging should looks?
- After deleted happens need separate screens that will show button to Files History.
5. Batch Edit
- This page will show edit forms of more than 1 file, after user checked on some checkboxes on Landing page
- The files need updated will listed in separated row.
- Should we use zebra strips/alternative background here?
6. Batch Set Permissions
- This page will show set permission of more than 1 file, after user checked on some checkboxes on Landing page
- How messaging should looks?
- After deleted happens need separate screens that will show button to Files History.
7. Batch Download
- This page will download of more than 1 file, after user checked on some checkboxes on Landing page
- As you can see, there will need show the flow prepare files as progress bar show up.
- After prepare files done, it will show graphics and link for user to download
- How you design the buton on this page.
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.