Challenge Summary
Welcome to TopCoder - View Submissions Responsive Storyboard Challenge.
The new topcoder.com website has been released and now it's time to get more areas of the community functionality redesigned. The new site is tailored to our talented community and our goal is to give everyone a great user experience.
In this challenge we need you to create the Submissions page for Design track by following the provided storyboard theme/look and feel from our previous challenge (attached to the challenge).
So, what are you waiting for? Jump in now and get involve in our great change and improvements :)
Round 1
Your initial design for review:
- Submit all the screens to get the feedback from client.
- Any notes or comments about your design for the client.
Round 2
Your final Design with Checkpoint feedback implemented.
- Any notes or comments about your design for the client.
Primary Goal:
The goal of this challenge is to design the Submissions page for Design Studio track.
Every Design challenge has a “view submissions” tab. Within this space, users can see the submissions that were uploaded to the contest in thumbnail gallery view. When a user clicks on a thumbnail, it opens a “single submission” view that shows the submission in a larger format, along with the rest of the viewable content within the entire submission.
We are looking for your best approach and concept how this should work by using the provided storyboard as your base design. We are looking for a very clean, simple layout for these pages.
At the final you must provide your design in both devices, PC and mobile (see the provided storyboard as guidance)
Design Consideration:
- Please use the provided storyboard as your base design. Your design need to match the theme of this storyboard.
- These pages should be very clean and simple. Again SIMPLE!!
- Please keep things consistent.
- Your design should be responsive, see the provided storyboard. We need you to design these pages in 2 (two) devices, pc and mobile.
- Feel free to design some icons or any other elements for the results pages to make the design more standout where you think appropriate. But please keep in mind your graphics should follow the look and feel of the provided storyboard.
- Make sure your submission images name are arranged properly (i.e 01_Blog_Page_Main.png, 03_a_Blog_Page_Search_Result.png)
General Requirement:
1. We provide the Landing Page Update Header And Footer.zip
--- Use the header and footer from this storyboard on your design.
2. Use TC-CS Challenge Details - Registrant Page.zip as your base design.
3. We attached the new TC web GUI Kit. Feel free to explore the GUI kit and the new TC style guide. Your design elements must match the style or theme or look and feel of the new TC brand on this kit.
Required Screens:
1. All Submissions View
- See this page as reference: https://studio.topcoder.com/?module=ViewSubmissions&ct=30039316
- This is an example of what we have for Submissions view on Design Studio. We are looking for something fresh and new, but yet keep it simple.
- On the new design we need you to show thumbnails for each submission and the following info with each thumbnail:
---ID number
---submitter handle
---submission date and time
- This is a new functionality, we need the submissions to be separated out by checkpoint (Round 1) and final subs (Round 2).
We need to see your best solution how to display this in your design. Currently we show all submissions without separating it out.
2. Single Submission View
- See this page as reference: https://studio.topcoder.com/?module=ViewSubmissions&ct=30039316&sbmid=170559&pn=1&ps=12
- This is an example of what we have on Studio right now. We want something new and simple.
- See old_single_view.png. See this image for info on what should NOT be included.
- SO, we need some of these elements in your design laid out much nicer and simpler:
---Submitter name
---Date, time submitted
---Views received
---Download link
---Larger view of each page/screen within the submission
---A way to click through the pages/screens within the submission
---Declarations (heading should just say “Declarations” and should simply show any comments from the member and a list of fonts and/or stock art. Keep simple and clean.
3. Not viewable view
- Some submissions are hidden from public for some challenge.
- We need you to create a simple page that will just show a "Submissions are not viewable for this challenge" message.
a. You need to create the mobile versions for each page above.
b. We attach SAMPLE WINNING SUBMISSIONS.docx. You may choose one of the challenge submissions from there and use it in your design.
You may resize them or crop them/only show part of the design as long as you do NOT:
- make them bigger or
- change the aspect ratio.
Important:
- We are looking for your best approach how to display these elements on the Submissions page.
- Think about something new and fresh. How do you want to see our new submission view page??
- The links provided only as reference. Feel free to explore your ideas on designing every pages. The most important thing, you must follow the spacing and styling of the storyboard provided. Again think simple.
- Keep in mind that these pages should be responsive.
Target Audience:
- Current and potential topcoder community members.
Judging Criteria:
- How well your design follow and match the current theme of the provided storyboard
- Cleanliness and consistency of your graphics and design
- How well your layout work with the new theme of the site
- Is your design for all the screens responsive for all the devices?
- SIMPLICITY
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.