Challenge Summary
Welcome to “Topcoder.com 2.0 Responsive Design Updates Part 2”. For this particular challenge we need your help to complete the responsive design and improvement of the current UX of some pages in Topcoder.com website.
We already have half of the screens designed for mobile responsive. For this challenge, we need you to complete the mobile phone and tablet design of some pages outlined below.
- About Topcoder (Tablet & Mobile)
- Marketplace (Tablet & Mobile)
- Marketplace Community (Tablet & Mobile)
- Marketplace Products (Tablet & Mobile)
The goal of this challenge is to take the existing Desktop site and create a design of the outlined pages below for great mobile UX experience for both phone and tablet.
Inputs & Notes:
- The content (text) and imagery can be pulled directly from the staging site
- The designs should be based on wordpress templates that can be reused for the other sections. If you explore the other pages of the site, you will notice that most pages are using a consistent wordpress template.
- We are open to other mobile experiences/UI ideas, but it should remain within the general look and functionality of the desktop site. We DO NOT want to code a completely new experience and/or UI mechanics for tablet and mobile.
- PSDs Available Here:
-- Desktop: https://drive.google.com/file/d/0B6kvOdxpqnKMMDRIRXlfN1JaZkU/view
-- Mobile & Tablet: https://drive.google.com/file/d/0Bx7c1UzzMsE5V0pBOGw5czhCT1k/view?usp=sharing
-- Note: Some PSDs do not match the site. The site has the most up-to-date content, text, and images that you should be pulling from where possible.
Main Areas to Consider:
- The content reflows and stacks for the smaller screens
- Navigation. Both the main slideout navigation and the sub-navigation.
- Readjusting UI elements for mobile (make sure they are tap friendly)
Required Screens:
1. About Topcoder - https://www.topcoder.com/about-topcoder/
2. About the Community - https://www.topcoder.com/about-topcoder/community/
3. About the Team - https://www.topcoder.com/about-topcoder/team/
4. About the Customers - https://www.topcoder.com/about-topcoder/customers/
5. Contact - https://www.topcoder.com/about-topcoder/contact/
6. Marketplace - https://www.topcoder.com/marketplace/
7. Marketplace Community - https://www.topcoder.com/marketplace/the-community/
8. Marketplace Products - https://www.topcoder.com/marketplace/the-products/
Screen Requirements:
Target Tablet and Mobile (based on Bootstrap breakpoints)
- Tablet: 768px wide
- Mobile: 320px Wide
Target Audience:
Topcoder clients, vendors, and general public
Branding & Included Documents:
Must follow the current Topcoder branding and look & feel of the staging site
Judging Criteria:
Your submission will be judged on the following criteria:
- How well does your design align with the objectives of the challenge
- Cleanliness of screen design and user flow
- Overall design and user experience
- Mobile UI and ease of use
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
Number your files (01, 02, 03, etc) this will help review them in order.
Submit JPG/PNG for your submission 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 your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
We already have half of the screens designed for mobile responsive. For this challenge, we need you to complete the mobile phone and tablet design of some pages outlined below.
Round 1
For checkpoint round, we want to see the following designed screens:- About Topcoder (Tablet & Mobile)
- Marketplace (Tablet & Mobile)
- Marketplace Community (Tablet & Mobile)
- Marketplace Products (Tablet & Mobile)
Round 2
For final round, we want to see all the required screens and with the implementation of checkpoint feedback.The goal of this challenge is to take the existing Desktop site and create a design of the outlined pages below for great mobile UX experience for both phone and tablet.
Inputs & Notes:
- The content (text) and imagery can be pulled directly from the staging site
- The designs should be based on wordpress templates that can be reused for the other sections. If you explore the other pages of the site, you will notice that most pages are using a consistent wordpress template.
- We are open to other mobile experiences/UI ideas, but it should remain within the general look and functionality of the desktop site. We DO NOT want to code a completely new experience and/or UI mechanics for tablet and mobile.
- PSDs Available Here:
-- Desktop: https://drive.google.com/file/d/0B6kvOdxpqnKMMDRIRXlfN1JaZkU/view
-- Mobile & Tablet: https://drive.google.com/file/d/0Bx7c1UzzMsE5V0pBOGw5czhCT1k/view?usp=sharing
-- Note: Some PSDs do not match the site. The site has the most up-to-date content, text, and images that you should be pulling from where possible.
Main Areas to Consider:
- The content reflows and stacks for the smaller screens
- Navigation. Both the main slideout navigation and the sub-navigation.
- Readjusting UI elements for mobile (make sure they are tap friendly)
Required Screens:
1. About Topcoder - https://www.topcoder.com/about-topcoder/
2. About the Community - https://www.topcoder.com/about-topcoder/community/
3. About the Team - https://www.topcoder.com/about-topcoder/team/
4. About the Customers - https://www.topcoder.com/about-topcoder/customers/
5. Contact - https://www.topcoder.com/about-topcoder/contact/
6. Marketplace - https://www.topcoder.com/marketplace/
7. Marketplace Community - https://www.topcoder.com/marketplace/the-community/
8. Marketplace Products - https://www.topcoder.com/marketplace/the-products/
Screen Requirements:
Target Tablet and Mobile (based on Bootstrap breakpoints)
- Tablet: 768px wide
- Mobile: 320px Wide
Target Audience:
Topcoder clients, vendors, and general public
Branding & Included Documents:
Must follow the current Topcoder branding and look & feel of the staging site
Judging Criteria:
Your submission will be judged on the following criteria:
- How well does your design align with the objectives of the challenge
- Cleanliness of screen design and user flow
- Overall design and user experience
- Mobile UI and ease of use
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
Number your files (01, 02, 03, etc) this will help review them in order.
Submit JPG/PNG for your submission 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 your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.