Challenge Overview
Welcome to TCO16 UI Prototype Championship Round 2!
This contest is for TCO16 UI Prototype Onsite Finalists competing in Washington DC ONLY. Please do not register or submit if you are not one of the 7 finalists.
For the TCO16 UI Prototype Championship Round 2, we are looking for you to continue updating and polishing your UI Prototype from Round 1. We are still looking to create an interactive "Demo" that we can share with our customer and their users.
Please read the challenge details and review the associated Storyboard design and source PSD files.
In this challenge, we will not be creating every screen and every page for production. We will be creating demo code (using best practices) to showcase the design, specific interactions and essentially allow users to "test" if the application makes sense to them (or does it need additional design iterations). Many Topcoder customers are looking to "rapidly" prototype designs for quick user testing and iteration and now you have a chance to showcase your skills!
Let us know any questions you have through the Challenge Forum. Good luck and have fun!
Downloadable Files on Challenge Forum
Storyboard.zip - Use this storyboard design when building the UI Demo (Re-download Updated Storyboard)
Fonts.zip - Gotham Fonts that used on storyboard
Important!
- We will be presenting this on a Desktop screen size (1280px x 1080px) and Tablet screen size (1024px x 768px)
- There is no storyboard for tablet screen size, we need you to make prototype use best practice of responsive web design for Desktop and Tablet screen size.
- Use your best judgment on implementing the fluid layout and elements. Let us know if need clarification.
- Create icons and vector shapes on storyboard as SVG format.
- If possible use Bower for Library Package Manager. Read this page for Getting Started use Bower. (Not Required)
- Use SASS/SCSS for CSS Pre-Processor
- Use Grid based on Flexbox to build the main layout. You can use this library, or come with your own stylesheet method.
- Where is possible create transparency through CSS. For speed, you can use images if needed.
- If you use a custom styling/function it must be based on the existing library and put in separate files.
- If you have time feel free to include a JavaScript library to show the Analysis Tab information (Not Required)
Challenge Format
- The TCO16 UI Prototype Championship is using a 2 Round format: Round 1 and Round 2.
- Each round will have a 3-hour timeline
- You must submit your current code/progress during Round 1 for review.
TCO16 UI Prototype Round 2 Timeline & Requirements:
- Start: Sunday, November 20th, 2016 : 9:15AM EST
- Deadline: Sunday, November 20th, 2016 : 12:30PM EST
Submit the following screens for Round 2 and any updated prototype options based on your Round 1 Feedback.
1). Building - 1st Floor (01-1st-Floor.png)
2). Building - 2nd Floor (02-2nd-Floor.png)
3). Building - 3rd Floor (03-3rd-Floor.png)
4). Analysis Open (04-Analysis-Open.png)
5). Analysis Tab (05-Open-Details.png)
UI Prototype Submission Requirements
Demo Focus
- We are looking to create a great "Demo" that works great on Desktop/Tablet screens.
- The priority item on this prototype is to create 1 (one) page that able to display interactions from building level, panels and other flyouts explained below.
- Map background area can be image based. The Map needs to be able to drag/move to show the user other areas of the map. You might need to use a large image for the map background.
- Refer to screen flow below for the requested interactions:
1). Building - 1st Floor
Screenshot: 01-1st-Floor.png
- This is how the page will look and feel that needs to be created for the TCO16 UI Prototype Championship
- Display 3D Building with 1st Floor displayed by default
- You can create 3D building vector shape as a separate image. Check source files from the storyboard.
- Click another floor number and the user will see another floor
2). Building - 2nd Floor
Screenshot: 02-2nd-Floor.png
- 2nd floor shows up after user clicking the “2” number on the Floor panel
- Reclick the number needs to hide the related floor
3). Building - 3rd Floor
Screenshot: 03-3rd-Floor.png
- 3rd floor shows up after user clicking the “3” number on the Floor panel
- Reclick the number needs to hide the related floor
4). Analysis Open
Screenshot: 04-Analysis-Open.png
- Update your prototype to display Analysis and Image tabs that floating on the bottom left of browser screen
- Click Analysis needs to toggle the Analysis tab
- Imagery tab can be dead link
- Detail requirements explained below
5). Open Details
Screenshot: 05-Open-Details.png
- This Details flyout appears when you click the left button on sub-header.
- Detail requirements explained below
General Layout And Page Interactions:
Header
- Header should use fluid width
- Hamburger menu placed on the left side.
- Logo needs to be clickable
- Search input always placed center, icon on the left side and there is a text placeholder
- User thumbnail and the other icons placed on the right side of header bar
Sub-Header
- This sub-header need use transparency and use full width
- Next to Details button will be for Building title and address
- On the right side, the user can see the dropdown. Do not build this function.
Main content
- This area includes the Map, Floating action buttons on the right sidebar, Analysis & imagery tab on the bottom of browser screen
- The Map Background should cover the browser screen and can be image based
- User needs to be able to drag to see other parts of the map
Floating Action Buttons
- Build the floating buttons, all buttons can be dead links except the Floor panel buttons
Analysis Tab
Screenshot: 04-Analysis-Open.png
- Donut chart and text can be image based (JavaScript if you have time)
Building Details Flyout
Screenshot: 05-Open-Details.png
- Create what you can - main "demo" is the open/close of the flyout
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient "Demo" - smoothness, sharpness of graphics and the key items that can be captured and demoed
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/HTML5
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
SCSS
- Use Media Queries to load different styles for each page and don't build a different page for different device/layout.
- All CSS naming should not have any conflicts.
- As possible use CSS style when creating all stylings, avoid image usage.
- 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.
JavaScript
- Use Bower for any javascript library you used.
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Use best practice repetition usage of background based image.
- Use sprites when using icons for your submission.
- For all the icons, please create them as SVG format.
Browsers Requirements
- Chrome Latest Browser
- Chrome on iPad
This contest is for TCO16 UI Prototype Onsite Finalists competing in Washington DC ONLY. Please do not register or submit if you are not one of the 7 finalists.
For the TCO16 UI Prototype Championship Round 2, we are looking for you to continue updating and polishing your UI Prototype from Round 1. We are still looking to create an interactive "Demo" that we can share with our customer and their users.
Please read the challenge details and review the associated Storyboard design and source PSD files.
In this challenge, we will not be creating every screen and every page for production. We will be creating demo code (using best practices) to showcase the design, specific interactions and essentially allow users to "test" if the application makes sense to them (or does it need additional design iterations). Many Topcoder customers are looking to "rapidly" prototype designs for quick user testing and iteration and now you have a chance to showcase your skills!
Let us know any questions you have through the Challenge Forum. Good luck and have fun!
Final Submission Guidelines
Challenge Details:Downloadable Files on Challenge Forum
Storyboard.zip - Use this storyboard design when building the UI Demo (Re-download Updated Storyboard)
Fonts.zip - Gotham Fonts that used on storyboard
Important!
- We will be presenting this on a Desktop screen size (1280px x 1080px) and Tablet screen size (1024px x 768px)
- There is no storyboard for tablet screen size, we need you to make prototype use best practice of responsive web design for Desktop and Tablet screen size.
- Use your best judgment on implementing the fluid layout and elements. Let us know if need clarification.
- Create icons and vector shapes on storyboard as SVG format.
- If possible use Bower for Library Package Manager. Read this page for Getting Started use Bower. (Not Required)
- Use SASS/SCSS for CSS Pre-Processor
- Use Grid based on Flexbox to build the main layout. You can use this library, or come with your own stylesheet method.
- Where is possible create transparency through CSS. For speed, you can use images if needed.
- If you use a custom styling/function it must be based on the existing library and put in separate files.
- If you have time feel free to include a JavaScript library to show the Analysis Tab information (Not Required)
Challenge Format
- The TCO16 UI Prototype Championship is using a 2 Round format: Round 1 and Round 2.
- Each round will have a 3-hour timeline
- You must submit your current code/progress during Round 1 for review.
TCO16 UI Prototype Round 2 Timeline & Requirements:
- Start: Sunday, November 20th, 2016 : 9:15AM EST
- Deadline: Sunday, November 20th, 2016 : 12:30PM EST
Submit the following screens for Round 2 and any updated prototype options based on your Round 1 Feedback.
1). Building - 1st Floor (01-1st-Floor.png)
2). Building - 2nd Floor (02-2nd-Floor.png)
3). Building - 3rd Floor (03-3rd-Floor.png)
4). Analysis Open (04-Analysis-Open.png)
5). Analysis Tab (05-Open-Details.png)
UI Prototype Submission Requirements
Demo Focus
- We are looking to create a great "Demo" that works great on Desktop/Tablet screens.
- The priority item on this prototype is to create 1 (one) page that able to display interactions from building level, panels and other flyouts explained below.
- Map background area can be image based. The Map needs to be able to drag/move to show the user other areas of the map. You might need to use a large image for the map background.
- Refer to screen flow below for the requested interactions:
1). Building - 1st Floor
Screenshot: 01-1st-Floor.png
- This is how the page will look and feel that needs to be created for the TCO16 UI Prototype Championship
- Display 3D Building with 1st Floor displayed by default
- You can create 3D building vector shape as a separate image. Check source files from the storyboard.
- Click another floor number and the user will see another floor
2). Building - 2nd Floor
Screenshot: 02-2nd-Floor.png
- 2nd floor shows up after user clicking the “2” number on the Floor panel
- Reclick the number needs to hide the related floor
3). Building - 3rd Floor
Screenshot: 03-3rd-Floor.png
- 3rd floor shows up after user clicking the “3” number on the Floor panel
- Reclick the number needs to hide the related floor
4). Analysis Open
Screenshot: 04-Analysis-Open.png
- Update your prototype to display Analysis and Image tabs that floating on the bottom left of browser screen
- Click Analysis needs to toggle the Analysis tab
- Imagery tab can be dead link
- Detail requirements explained below
5). Open Details
Screenshot: 05-Open-Details.png
- This Details flyout appears when you click the left button on sub-header.
- Detail requirements explained below
General Layout And Page Interactions:
Header
- Header should use fluid width
- Hamburger menu placed on the left side.
- Logo needs to be clickable
- Search input always placed center, icon on the left side and there is a text placeholder
- User thumbnail and the other icons placed on the right side of header bar
Sub-Header
- This sub-header need use transparency and use full width
- Next to Details button will be for Building title and address
- On the right side, the user can see the dropdown. Do not build this function.
Main content
- This area includes the Map, Floating action buttons on the right sidebar, Analysis & imagery tab on the bottom of browser screen
- The Map Background should cover the browser screen and can be image based
- User needs to be able to drag to see other parts of the map
Floating Action Buttons
- Build the floating buttons, all buttons can be dead links except the Floor panel buttons
Analysis Tab
Screenshot: 04-Analysis-Open.png
- Donut chart and text can be image based (JavaScript if you have time)
Building Details Flyout
Screenshot: 05-Open-Details.png
- Create what you can - main "demo" is the open/close of the flyout
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient "Demo" - smoothness, sharpness of graphics and the key items that can be captured and demoed
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/HTML5
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
SCSS
- Use Media Queries to load different styles for each page and don't build a different page for different device/layout.
- All CSS naming should not have any conflicts.
- As possible use CSS style when creating all stylings, avoid image usage.
- 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.
JavaScript
- Use Bower for any javascript library you used.
- 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.
Images
- Images should be properly compressed while still having good visual quality.
- Use best practice repetition usage of background based image.
- Use sprites when using icons for your submission.
- For all the icons, please create them as SVG format.
Browsers Requirements
- Chrome Latest Browser
- Chrome on iPad