Challenge Overview
Welcome to the TCO Mobile App UI Prototype Challenge! The goal of this challenge is to build the UI Prototype of the TCO Mobile App based on the HTML5 native app development framework of Ionic.
For this challenge, YOU DON'T need build the actual app, you just need to download and use the framework's CSS and JS files. It is IMPORTANT to make sure to use Ionic standard CSS styles and markup whenever applicable, you can view the documentation here. The end result of this challenge will be used as template for the succeeding app development challenge.
Ask in the forum if you there are unclear instructions or if you have some questions.
Required Screens:
Below are the required screens for this prototype challenge.
General Screen Guidelines:
- the "circle" logo on the upper right corner of most screens will lead to Main Menu screen
1) Welcome
- see 01-Login.png
- "Sign Up" is a deadlink
- "Sign In" leads to My Profile screen
2) Main Menu
- see 08-Menu.png
- disregard the "screen" on its right part, this will be out of scope for this challenge
- menus should be linked to their corresponding screens
- "Logout" will lead to Welcome screen
3) My Profile
- see 02-A-My-Profile.png
- "Edit" icon leads to Edit Profile screen
- member's email will be an email link
- "5 Challenges" under the row of "Currently Registered" will lead to Currently Registered screen
- "Favorite" icon will be deadlink
- "Mail" icon will lead to Message Compose screen
- Social media icons are deadlink
4) Edit Profile
- see 02-C-Edit-Profile-Active.png
- this screen is an overlayed screen
- "Cancel" and "OK" buttons will just close this overlay screen for now
- the "x" icon within the fields indicate clear action
5) Currently Registered
- see 02-B-My-Profile-Currently-Registered.png
- this will be another style of overlay screen
- clicking/tapping "x" icon will close this overlay screen
- this page should support unlimited number of items, create 5 items for this challenge
6) Messages
- this screen will list all the attendees that you have threads started with, see 10-A-Chat.png
- by default, all items are not checked
- checking an item will highlight its row
- clicking/tapping "Delete" icon will remove the selected items
- "+ New Message" leads to Message - Search Attendee screen
7) Message - Search Attendee
- see 10-C-Chat-Autosuggest.png
- "All Messages" will lead to Messages main screen
- The right side of "To:" will be an input field
- list 5 example items, there should be no highlighted item by default
- once user select an item, it will be highlighted
- "write a message..." is another input field, this field should be disabled when there's no selected item
- "Send" button will lead to Chat screen, this button should be disabled if there's no selected item and the "write a message" field is empty
8) Message Compose
- this screen is basically similar to Message - Search Attendee screen, see 10-D-Chat-Selected.png
- "All Messages" will lead to Messages main screen
- "Send" button will lead to Chat screen, this button should be disabled if "write a message" field is empty
9) Chat
- see 10-E-Chatting.png
- "All Messages" will lead to Messages main screen
- all images (avatar and image placeholder) should be treated as content and NOT a CSS backgound.
10) News
- see 12-A-News.png
- remove left and right arrow
- new title should be link the News Details screen
11) News Details
- see 12-B-News-Details.png
- this will be overlay screen
- clicking/tapping "X" will close this overlay screen
- images should be treated as content and not a CSS background except for the social media icons
- social media icons are deadlinks
12) Agenda
- this screen by default will list all agenda items, see 03-A-Agenda.png
- "left" and "right" arrow icons will be deadlink
- "alert" icon (bell image on the upper right) will have a number indicator, the number should be editable
- this alert number indicator should be easily removed in the code without affecting the style of other part of the screen
- clicking/tapping this "alert" icon will show the Agenda Alert screen
- list items should have class that are specific to their event type (break, competition, and keynote)
- these 3 event type filters are toggable, and they are all on by default
- items that has only "on" filter are shown, the other will be hidden (see 03-B-Agenda-Selected.png)
- row item should be clickable/tappable and are link to Agenda Details screen
13) Agenda Alert
- see 03-C-Agenda-Alert.png
- this is an overlay screen of Agenda, by default it will list the alert items
- "Find Location" will be deadlink
- alert number indicator should be editable and can be easily removed in the code without affecting the style of other part of the screen
- "Dismiss" will close this overlay screen
14) Agenda Details
- this is also overaly screen of Agenda screen, see 03-D-Agenda-Details.png
- clicking/tapping "X" will close this overlay screen
- the "+" in "Event Description" and "The Competitors" are collapsable, see 03-E-Agenda-Details-Collapse.png
- use dummy text for the "Event Description" section
- the "The Competitors" list item should be tappable and will link the Attendees Profile screen
- social media icons are deadlink
- "Off" should be toggable to "On", use the green (#8cbf43) color of "On" style
15) Attendees
- see 04-A-Attendee-Default.png and 04-A-Attendee-Scrolled.png
- change "Attendess" to "Attendees"
- this screen will list all the attendees categorized by group
- use dummy list content for the other tabs
- the entire row will be clickable/tappable and will lead to Attendee Profile screen
- horizontal scrollbar will be okay for this screen
- clicking/tapping the "search" icon will bring out the Search Attendee screen
16) Attendee Profile
- this screen will be an overlay
- the style and content of this overlay screen will be similar to the My Profile screen but will start on "Profile Details" bar instead of the "My Profile" title
- change "Edit" icon to "X", that when clicked/tapped will close this overlay screen
- all other functionality of My Profile screen should be carried over to this screen
17) Search Attendee
- see 05-Search.png
- clicking/tapping "Dismiss" will close this overlay
- the entire row will be clickable/tappable and will lead to Attendee Profile screen
18) Favorites
- see 06-Favorites.png
- this screen will display all the attendees that the user has favorited
- attendee row is clickable/tappable to display the Attendee Profile screen
- use dummy content list for Event and multimedia tabs
- Event items are deadlink
- Multimedia items will bring out the Multimedia Details screen
19) Sponsors
- see 07-A-Sponsors.png
- this screen lists all the sponsors sorted by type
- make sure logo are content and not CSS background
- clicking/tapping a sponsor item will bring out the Sponsor Details screen
20) Sponsor Details
- see 07-B-SponsorsDetails.png
- this will be an overlay screen
- use the playable video found here http://community.topcoder.com/tco14/sponsor/google/ instead of just a placeholder
- social icons are deadlinks
- any link within the content are deadlinks
- clicking/tapping "X" will close this screen overlay
- "Apply Now" will bring out Sponsor Apply screen
21) Sponsor Apply
- see 07-C-Applying-to-Sponsor.png
- this is another overaly screen
- "Cancel" and "OK" buttons when clicked/tapped will close this overlay screen
22) Multimedia
- see 11-A-Multimedia.png
- this screen displays all uploaded photo and videos organized by tab
- "favorite" icon is toggable
- clicking/tapping the image will open the Multimedia Details screen
- clicking/tapping "+" icon will slide up some tools (see 11-C-Multimedia_Photo Album_Option Lv1.png)
-- "Upload Photo(s)" and "Download Photo(s)" are deadlink
-- "Share Albums" change to "Share Photo" and when clicked will open the share tools (see 11-D-Multimedia_Photo Album_Option Lv2.png), all items are deadlinks while "Close" will close these tools
- do the same thing for Videos
23) Multimedia Details
- see 11-B-Multimedia_Photo Details_Tapped.png
- this will overlay on the screen
- clicking/tapping "X" icon will close this overlay screen
- "right" and "left" arrow as well as "Download" are deadlinks
- "Share" will open the share tools (see 11-D-Multimedia_Photo Album_Option Lv2.png), all items are deadlinks while "Close" will close these tools
24) Settings
- see 09-Settings.png
- "Event Push Notifications" and "Allow Private Message" are toggle items
- "Privacy Policy", "Terms & Services", and "Rate This App", will open an overlay screen with dummy content.
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Sticly use Ionic CSS, JS, and markup whenever applcable
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e. "main-content", or "mainContent")
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Images should be properly compressed while still having good visual quality.
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing.
Font Requirements:
- Use Source Sans Pro that is available in Google Fonts.
JavaScript Requirements:
All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Browsers Requirements:
- latest safari browse on iPhone
Resources:
- Storyboard screens and source files
Final Submission Guidelines
Submission Deliverables: A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission: For each member, the final submission should be uploaded to the Online Review Tool.