TopCoder Mobile App - Design Update Contest

Welcome to TopCoder Mobile App - Design Update contest! TopCoder mobile app is published into both Android and Apple app stores. It is the first version of the app, and we got some feedback for improving the user experience so in this contest we will bring improvement on the design and revamp the main navigation and the contest listing screens.

Round 1

We would like to see the following items in the 1st round:

• Contests Listing Screen
• Filter Screens (Main filters screen, create/edit filter screen)
• Contest Details Screen
• Main Navigation
• Browsing external links screen

Round 2

All required screens should be submitted in the 2nd round :

• Contests Listing Screen
• Filter Screens
• Contest Details Screen
• Main Navigation
• Splash Screen
• Browsing External links screen
• News Screen
• Tapping element style (Group them in single screen)

Requirements
We don't have an updated wireframes as input for this contest. We don't expect there will be a major changes in the layout of the screens.

Required Screens

• Contest Listing and Filter Screen
  Design a custom savable filters - We want to redesign the contest listing to display a custom savable filters (let's call it contest views). The flow we have in mind :

  • The contest list screen should be an infinite sliding carousel/tabs, the user can slide to left and right to view filtered-contests lists, how would you design the bars for slider navigation? That's up to you to decide.

  • "Pull to Refresh" should be added to the contest view screens as a way to refresh the content.

  • Attached the REST API document of the backend, it is not too technical so don't be scared to read it! It basically contains the information about the request and response of the api in a simple format, you need these information for the filter screens and also to see what kind of information you can display for each contest entry.

  • The filter screens should include a screen to add new contest view, rearrange contest views, delete contest view, and pick what contest views to display – we want to add ability for user to create as many filters (contest views) as he wants but also allow him to control which one to display, think of it like how google+ circles are managed or facebook friends list where user can select what to see in the feed .. etc. Also it will nice to have a possiblity of direct access to edit current contest view the user is currently viewing instead of going to main failter screen then filter edit screen

  • The Are should not be pagination in contest views/lists, it should be infinite scrolling, add an option at the end of the list to load more entries.

  • We got a feedback to add more information to the contests entries, some feedback like the progress bar in contest details screen and want to see similar in contest view entries. Other feedback requests adding more information to contest entry, i.e. Registeration stats or contest start date .. etc, one of the idea to implement this is to be the contest entry expandable to view more details, for example clicking in the arrow of each contest entry will expand that entry with more stats to display, but it's up to you.

  • The API support retrieving “ALL” set of contests in the same call - active, past and scheduled - what idea do you have to distinguish between different set of contests in the same list?

  • The contest type should be represented visually by a set of icons, with the full name of the contest type shown as a popup when tapping on the icon. The TopCoder Cockpit currently has a set of icons for contest types, which are shown in the PNG file provided as a download for this contest (the Photoshop source is not available). You may add coloring or imagery to these icons or otherwise modify them for your purposes, but you must preserve the abbreviations that have been established by the existing icon set.

  • What if the user does not have any contest views when the contests listing screen is opened? Design a content that ask him to start creating contest views.

• Contest Details Screen
  The only addition to this screen is to add "Pull To Refresh" feature. we don't have any other changes to make on this page, but if you make any changes in the main navigations, the color scheme, fonts .. etc, this screen should have the changes applied to it as well.

• News Screen
  We don't have any updates on this page, but if you make any changes in the main navigations, the color scheme, fonts .. etc, this screen should have the changes applied to it as well.

• Browsing external links
  In the current version when the user taps a link on contest details or news entry, the link will be opened in iPhone Safari browser, we don't want the user to leave the app when viewing these links, so we want you to design a screen with a bar that contains browser-like navigation controls – back, forward and refresh buttons.

• Main Navigation
  Right now we have a home page to navigate between pages, but because we don't have other than contests and news items that page looks empty. What other ideas do you have for navigation? We will have forums implemented in the next couple of months, but that is a total of 3 items, so until we have enough items to have a dedicated page for navigation, we want to have other direct navigation ideas that allow users to navigate from news to contests or visa versa directly without going back to a home page.

• Splash Screen
  We like current splash screen design, you need to provide a retina display version in this contest and this screen does not have to support landscape view.

• Screen resolution
  Among the feedback we received there is one request to improve the quality of the design and graphics, since the iPhone 4 has more higher resolution that then previous versions and we expect an improvement on the resolution. So, in this contest you are expected to provide a retina version of the design, and you can use the iPhone UI Kit attached to this contest as a basis for your design. Also you may find this post useful http://www.teehanlax.com/downloads/iphone-4-guid-psd-retina-display/

• Tapping Style
  Please make sure to design the tapping style for all elements in the screens.

• Other Screens ?
  You are not required to include or redesign any screens or features that in the existing storyboard but not mentioned above.

Your design must be in both Portrait and Landscape versions.

Storyboard Files
Storyboard 1
Storyboard 2

Branding
Color : The same colors used in current version, improvement to it is welcomed.
Fonts : The font should be web-safe that render ok in iPhone Safari and chrome.
Logo : You don't need to include it at the top bar, we have the logo in splash screen, it's up to you to keep it or remove it or only use only the brackets.
Size: iphone regular display size is (320px x 480px), iPhone retina display size is (640px x 960px). 

Design Guidelines
Please Follow the iOS Human Interface Guidelines in your design

Target Audience
Any TopCoder user (PM or a member) and TopCoder customers.

Judging Criteria
Your submission will be judged based on the following :

• Implementing the outlined requirements
• Quality of the design
• Creativity in the design

Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
All JPG or PNG files of your design.
Source Files
All original source files of the submitted design. Files should be saved as layered PSD files