Challenge Summary
Welcome to “Topcoder.com 2.0 Responsive Design Updates”. For this particular challenge we need your great design skills to think and create the best possible UI design that can improve the current UX this website: wwwtc.staging.wpengine.com/home/
- Homepage (Tablet & Mobile)
- What Can You Do? Landing Page (Tablet & Mobile)
- App Design & Dev Sub-Page (Tablet & Mobile)
- Final designs for ALL screens for Tablet & Mobile
The goal of this challenge is to take the existing Desktop site and translate that into a GREAT mobile experience on tablet and phone. We are looking for ways to restructure the existing content and great UX and UI designs.
Inputs & Notes:
- The content (text) and imagery can be pulled directly from the staging site
- We are looking for “What is the mobile experience and navigation mechanics for these sections?”
- The designs should be based on templates that can be reused for the other sections (if you look at other areas/ sections of the staging site you can see that most pages are using a consistent 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.
- We can share the staging site with the designers
- NOTE: this is still a WORK-PROGRESS. There are lots of Dev/ Design tweaks and updates that need to happen still on the staging site (we are currently working on these)
- PSDs Available Here: https://drive.google.com/file/d/0B6kvOdxpqnKMMDRIRXlfN1JaZkU/view?usp=sharing
-- Note: The PSDs do not match the staging site 1:1. The staging 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 (6 What can you do Sections)
- Readjusting UI elements for mobile (make sure they are tap friendly)
Required Screens:
1. Homepage - wwwtc.staging.wpengine.com/home/
2. What Can You Do? Landing Page - http://wwwtc.staging.wpengine.com/what-can-you-do/
3. The 6 sub-pages under What Can You Do?
- App Design & Dev - http://wwwtc.staging.wpengine.com/what-can-you-do/mobile-applications/
- App Modernization - http://wwwtc.staging.wpengine.com/what-can-you-do/web-applications/
- Innovation Programs - http://wwwtc.staging.wpengine.com/what-can-you-do/innovation-programs/
- Algorithms & Analytics - http://wwwtc.staging.wpengine.com/what-can-you-do/algorithms-analytics/
- Staff Augmentation - http://wwwtc.staging.wpengine.com/what-can-you-do/staff-augmentation/
- Community Segments - http://wwwtc.staging.wpengine.com/what-can-you-do/community-segments/
Screen Requirements:
Target Tablet and Mobile (based on Bootstrap breakpoints)
- Tablet: 768px wide (PSD Template)
- Mobile: 320px Wide (PSD Template)
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.
Round 1
For checkpoint we want to see the following screens designed- Homepage (Tablet & Mobile)
- What Can You Do? Landing Page (Tablet & Mobile)
- App Design & Dev Sub-Page (Tablet & Mobile)
Round 2
For finals we want to see all checkpoint feedback completed and all screens- Final designs for ALL screens for Tablet & Mobile
The goal of this challenge is to take the existing Desktop site and translate that into a GREAT mobile experience on tablet and phone. We are looking for ways to restructure the existing content and great UX and UI designs.
Inputs & Notes:
- The content (text) and imagery can be pulled directly from the staging site
- We are looking for “What is the mobile experience and navigation mechanics for these sections?”
- The designs should be based on templates that can be reused for the other sections (if you look at other areas/ sections of the staging site you can see that most pages are using a consistent 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.
- We can share the staging site with the designers
- NOTE: this is still a WORK-PROGRESS. There are lots of Dev/ Design tweaks and updates that need to happen still on the staging site (we are currently working on these)
- PSDs Available Here: https://drive.google.com/file/d/0B6kvOdxpqnKMMDRIRXlfN1JaZkU/view?usp=sharing
-- Note: The PSDs do not match the staging site 1:1. The staging 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 (6 What can you do Sections)
- Readjusting UI elements for mobile (make sure they are tap friendly)
Required Screens:
1. Homepage - wwwtc.staging.wpengine.com/home/
2. What Can You Do? Landing Page - http://wwwtc.staging.wpengine.com/what-can-you-do/
3. The 6 sub-pages under What Can You Do?
- App Design & Dev - http://wwwtc.staging.wpengine.com/what-can-you-do/mobile-applications/
- App Modernization - http://wwwtc.staging.wpengine.com/what-can-you-do/web-applications/
- Innovation Programs - http://wwwtc.staging.wpengine.com/what-can-you-do/innovation-programs/
- Algorithms & Analytics - http://wwwtc.staging.wpengine.com/what-can-you-do/algorithms-analytics/
- Staff Augmentation - http://wwwtc.staging.wpengine.com/what-can-you-do/staff-augmentation/
- Community Segments - http://wwwtc.staging.wpengine.com/what-can-you-do/community-segments/
Screen Requirements:
Target Tablet and Mobile (based on Bootstrap breakpoints)
- Tablet: 768px wide (PSD Template)
- Mobile: 320px Wide (PSD Template)
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.