Challenge Summary
Over the course of the next couple of months we will be build a mobile application for attendees of TCO14. This is the first design challenge to develop the look and feel of the HTML5 application. We have an overall idea of the functionality and need you to translate it into a visually stunning and simple to use mobile design.
For this challenge, you are going to design about 12 mobile screens, some of them might be similar to other screens.
Round 1
1) Initial submission design with all the features mentioned in the Requirement section.
2) Any note for the client about your submission
3) Number your submission (01, 02, 03, etc...) for easy client's review
Round 2
1) Final submission design with all the features mentioned in the Requirement section plus any checkpoint updates.
2) Any note for the client about your submission
3) Number your submission (01, 02, 03, etc...) for easy client's review
The main goal of this challenge is to take the provided design problem outlined below and design a simple, clean mobile user experience (UX)! The end result of this challenge will be used for developing in subsequent challenges using the Ionic framework so you may want to take a look at their CSS components for reference.
Design Problem
Application name: TCO2GO
This mobile design concept is designed for everyone attending TCO. Users will be able to view the schedule of events (competitions, talks, parties, etc), view and send private messages to other attendees, receive push notifications of events that are starting soon, i.e., "Marathon match starts in 30 minutes in the main arena", interact with sponsors, view recent news about TCO (from Twitter, FB, blogs, etc), view maps and yelp reviews for the local area and view user submitted photos.
Color Palette - Use attached TCO14 colors
Mobile Storyboards - Portrait View
- Design screens for iPhone 5 portrait display (640 x 1136)
- Assume this is hybrid iOS or Andriod application
Required Pages
1) Welcome Page
TCO logo, some small text (use dummy text) and a login button. The login process will be handled by [topcoder] platforms so no screens are needed.
2) Agenda List Page
By default will show list current day's agenda of events. Filter by type of event (ie competition, talk, party, etc.). Options to change to tomorrow's events, all events, events starting in the 30 minutes, events starting next 60 minutes. Pagination for the events or continuous scrolling.
3) Agenda Details Page
Displays complete info about the event (times, location, detailed description). Description will possibly contain text and images (HTML markup).
4) Attendees List Page
List all attendees at TCO with thumbnail, name, type of attendee and country. Options to filter by type of attendee (competitor, speaker, staff, etc.), country, and first letter of handle. Can search for attendees by handle. Pagination for the attendees or continuous scrolling.
5) Attendee Details Page
Displays complete info about an attendee including handle, photo, country, twitter handle, Description will possibly contain text and images (HTML markup). Favorite/star an attendee.
6) Attendee “Favorites”
List all attendees at TCO attendees the user has favorited with thumbnail, name, type of attendee and country. Pagination for the attendees or continuous scrolling.
7) News Page
Display a list news items with the the title and date. Pagination for the news items or continuous scrolling.
8) News Details Page
Display the details of the news item with title, original url and content.
9) Sponsors List Page
List of all sponsors with logo, name and level (bronze, silver, gold).
10) Sponsor Details Page
Displays name, logo, level and detailed description (HTML markup) of the sponsor. Also, need an “Apply” button with text above that says something like “By applying, you will be releasing your topcoder contact and statistical information to [Sponsor Name] and you will be giving [Sponsor Name] permission to contact you about their current job opportunities.”
11) Private Messages
Ability to send, receive and view messages from other attendees.
12) Photo Gallery
May implement something like http://photoswipe.com. Ability to upload a photo.
Target Audience
- Everyone that attends TCO will use this on their mobile device.
Judging Criteria
- How well you design the provided design challenge
- Cleanliness of your graphics and design.
- Design and User Experience.
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
Please upload PNG/JPEG images in a zip file with all requested contest requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or similar and saved as layered PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (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.