Challenge Summary
Contest Summary
Welcome to the TopCoder Login and Register Modal Window Design Contest. The goal of this contest is to update the existing login modal windows within the new Beta TopCoder website by updating/enhancing the look and feel/user experience (UX) based on provided requirements.
Round 1
Your submitted Login and Register Modal design solution for a review.
Notes.jpg: Any comments about your design for the Client
Round 2
Final Login and Register Modal Design
Notes.jpg: Any comments about your design for the Client
Login & Register Modal Design Requirements
1. Login
- Use screenshot-home.jpg as the base of your design updates.
- This is how the current login modal window looks (screenshot-login.jpg).
- We need to create a brand new "look" that works with the new TopCoder site design.
- Modal windows overlay background need grey or darker color.
- "Username" & "Password" needs to be improved.
- "Forgot Password" is a text link, can you give prominent style?
- "Remember Me" already in good placement?
- Create graphics/icons that will help user the modal design.
- How "Reset" and "Login" button should looks.
- Create separate screens showing validation errors. This is how the current validation error page looks (screenshot-login-validation-error.jpg)
- Input field needs to show error style
- Design information/suggest text for the validation error.
- After user click "Login" button. There will be preloader when data being submitted. Design a better preloader. (Check screenshot-preloader.jpg)
2. Register
- Use screenshot-home.jpg as the base your design updates.
- This how current Register modal looks (screenshot-register.jpg).
- We need create brand new looks of current Login modal windows.
- Tab design for "Login" and "Register" still needed? Show us any new idea!
- The new design should works with current design.
- Modal windows overlay background need grey or darker color.
- "Register for account" already in good placement? Any better wording?
- Form field need more improved.
- "I have read and accept the privacy policy" already in good placement?
- How "Reset" and "Submit" button should looks.
- Re-use existing captcha design. Maybe play around with the captcha placement.
- Need some icon to help explains "Try another code".
- Create separate design showing validation error. This how current validation error page lookss (screenshot-register-validation-error.jpg)
- Input field need show error style. Design style more better.
- Design information/suggestion text for the validation error.
- "Privacy policy" is text link. This link should prominent.
- After user click "Login" button. There will be preloader for being submitted. Check screenshot-preloader.jpg.
Judging Criteria
- How well you update design for Login Modal page and keep things consistent with the current site design.
- Cleanliness of your graphics and design.
- User Experience.
Target Audience
- Current Customer
- Potential Customer
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x768 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
Submit JPG/PNG for your submission file.
Source Files
All original PSD, AI source files of the submitted design.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.