Challenge Summary
Welcome to the Topcoder Mobile IOS App Redesign Challenge. In this challenge, we are looking to redesign the whole application; we are providing you with current app screenshots, we need you to think of the layout and how things should look like.
Round 1
Submit your updated screens for Checkpoint feedback
0. Navigation
1. Login Page
2. Active Challenges Page
3. Challenge Details Page
4. Manage Challenge Page
5. Past Challenges Page
6. Forum Categories Page
7. Forum Thread Page - Please provide us with a click diagram of your design
- Notes.jpg: Any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required screens with all checkpoint feedback implemented.
0. Navigation
1. Login Page
2. Active Challenges Page
3. Challenge Details Page
4. Manage Challenge Page
5. Past Challenges Page
6. Forum Categories Page
7. Forum Thread Page
8. Forum Messages Page
9. Forum Write post Page
10. Filter Page
11. Notifications Page
12. Search Page
- Please provide us with a click diagram of your design
- Notes.jpg: Any comments about your design for the Client
Challenge Details:
The purpose of this Challenge is to redesign the entire Topcoder Mobile IOS Application, there is a current application from which we are providing screenshots, and in this challenge we want to focus on new topcoder branding and current IOS 8 design.
Supporting Documents:
- Current App Screenshots (reference.zip), you can reference the screenshots for real content, please don’t use any lorum ipsum text, plus you can change the layout.
- Topcoder logo (topcoder-new-artfile-outline-CS6.eps)
Design Requirements:
- Reference New Topcoder website for branding guidelines.
- We want the new design to look more like current IOS 8 Design style.
Use the 320 x 480px (Standard sizes) for submission format. Make sure you create graphic in 'shape' format, so when resize for retina versions, graphic still look sharp! It will be great if you can provide the landscape version.
Required Screens:
0) Navigation
- How does the user navigate this application?
- Include navigation that you think fits with this application
- Focus on the priority items and how things should be sized
1) Login Page:
Reference 01_Login_Screen.jpg
- We need topcoder logo to be present on this screen.
- We want username and password fields.
- We want Guest Access and Login buttons.
2) Active Challenges Page:
Reference 02_Contests_Active_Screen.jpg
- Here we need you to list the active challenges information:
-- Challenge name
-- Prize
-- End Date
-- Next Deadline
3) Challenge Details Page:
Reference 02_Contests_Details_Screen.jpg, 02_Contests_Details2Screen.jpg & 02_Contests_Details3Screen.jpg
- Here we need you to display the following information:
-- Challenge name
-- Prizes
-- Start Date
-- Milestone
-- End Date
-- Registrants Number
-- Submissions Number
-- Next Deadline
-- Email button.
-- Register button or Manage button if you are the copilot of the challenge.
4) Manage Challenge Page:
Reference 02_Contests_Manage_Screen.jpg
- Here we need you to display the following information:
-- Challenge name
-- The ability to change prizes
-- Save prizes button
-- The ability to extend deadline
-- Send request button.
5) Past Challenges Page:
Reference 02_Contests_Past_Screen.jpg
- Here we need you to list the active challenges information:
-- Challenge name
-- Prize
-- Winner Name
6) Forum Categories Page:
Reference 03_Forum_Categories_Screen.jpg
- Here we need you to display the following information:
-- Forum category name
-- Category description
-- Number of threads/messages
7) Forum Thread Page:
Reference 03_Forum_Thread_Screen.jpg
- Here we need you to display a list of threads with the following information:
-- Thread Name
-- Posted by User
8) Forum Messages Page:
Reference 03_Forum_Readpost_Screen.jpg
- Here we need you to display the following information:
-- User photo
-- Username
-- Message text
-- Edit icon for your posts.
9) Forum Write post Page:
Reference 03_Forum_Writepost_Screen.jpg
- Here we need you to display the following information:
-- User photo
-- Username
-- Text Area
-- Done button.
10) Filter Page:
Reference 04_Filter_Screen.jpg
- Here we need you to display the following information:
-- Filter by:
--- All
--- Development Challenges
--- Design Challenges
--- Assembly
--- UI Prototype
--- Studio
-- Group by prize drop down list:
--- Higher
--- Lower
-- Group by Date drop down list:
--- Recent
--- Old
11) Notifications Page:
Reference 05_Notifications_Screen.jpg
- Here we need you to display a list of notifications with the following information:
-- Notification Title
-- Notification Description
12) Search Page:
Reference 06_Search_Screen.jpg
- Here we need you to the following:
-- Search field
-- Cancel button
-- Keyboard
Target Users:
- Community Members.
Judging Criteria:
- How well you translate the wireframes and source designs into an attractive and usable design.
- Cleanliness of your graphics and design.
- Design and User Experience.
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 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, or Adobe Illustrator as a layered AI 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.