Challenge Summary
New member profiles are coming soon to Studio, and we want them to look good. That's where you come in. The functionality and structure of the member profiles are defined by the attached wireframe. Your job is to bring this skeleton to life in an attractive and useful storyboard. We would like you to give it a skin that's somewhat compatible with Studio's current styling. You are encouraged to depart from the appearance of member profiles seen previously on Studio and the main TopCoder site.
Round 1
Milestone submissions are due two and a half days after the start of the contest. Up to five milestone winners will be chosen for an award of $50 each. These winners as well as all other contestants with a passing submission in Round 1 are eligible to compete in Round 2.
Round 2
Final submissions are due two and a half days after the end of Round 1.
Required contents
The attached wireframe shows a single page divided into five panes under the overall Studio header. You can ignore the header and concentrate on designing the five panes below the title "Studio Member Profile". Please take note of the following required elements, which will be explained further below.
- "Edit Banner" button
- pop-up interface for banner selection
- generic background design when no personal banner is displayed
- large versions of existing icons for submission visibility
- large versions of existing icons for top three placements
- your new design for small and large icons to represent prizes beyond third place
- your new design for small icons to represent screening status
Personal banners
The personal banner is equipped with an "Edit Banner" button which will be visible to the profile owner and not to other members. You must demonstrate the appearance of this pane with and without the button. Clicking on the button will cause the banner selection interface to pop up. Your storyboard must include a design for this interface.
In addition, your storyboard must show a generic background design that will be visible instead of the personal banner for those contestants who choose not to display a banner. This generic treatment should not leave the profile looking empty or incomplete.
You should use placeholders to represent the personal banners, which will be designed in a separate contest. The exact dimensions of each personal banner are 470 by 90 pixels, and the selection interface will display them in full size.
Badges
The badges in the right column, which will be awarded for a wide variety of competitive achievements, are also to be designed in a separate contest. You can expect them to be roughly circular in shape and to occupy an area of 48 by 48 pixels each. You may represent them with placeholders of your choosing.
Contest types
Attached to this contest are a pair of PNG files showing the old and new icons for Studio contest types. The old icon file explains the textual abbreviations featured in these icons. Your storyboard should use the new icons, as demonstrated in the new contest listing. You are also provided with the Photoshop source for the new icons.
Other icons
The attached PNG and Photoshop files portraying the new Studio contest listing include several more icons that you must use in your storyboard:
- submission visibility: public, private
- review results: first, second, third
We do not have enlarged versions of these icons, so you will have to design reasonably similar large versions for the Winning Submission showcase. We also do not have review result icons that signify a prize beyond third place or a lack of any prize, so you will have to suggest your own designs for those. It is acceptable to represent the lack of a prize with a blank space.
Finally, you must supply your own icons to represent the three possibilities for the screening status:
- pending (screening not completed)
- failed screening
- passed screening
Dynamic page effects
You are free to mock up any dynamic page effects that you think would make the member profiles more useful and that can be reasonably implemented in JavaScript. We will allow our programmers to use the jQuery library in the prototyping phase, so any effects that jQuery can perform are fair game.
Target audience
The Studio member profiles will be used primarily by Studio members. Administrators and clients will be a secondary audience.
Judging criteria
We are looking for a friendly and informative profile page where members will want to spend a lot of time. The interface should be easy to read at a glance and reasonable for us to implement in HTML and JavaScript.
Branding guidelines
Your storyboard should match the current look and feel of the Studio site to some degree. In other words, we are looking for styling that is compatible but not identical to the existing design. Do not use the Studio or TopCoder logo in your storyboard.
What to Submit
Submission ZIP File: All requested contest requirements/screens as JPG or PNG files.
Source ZIP File: All fully editable original source files of the submitted design as layered PSD or AI files.
Preview JPG/PNG Image File: 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.
Final Fixes
As part of the final fixes phase you may be asked to complete one round of minor changes to ensure your submission meets the stated requirements of this contest. See more information about Final Fixes.
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.