Challenge Overview
Welcome to GE - Time Track Mobile Application UI Prototype Challenge
For this challenge you need create responsive prototype submission for Tablet and Mobile layout. In the end of this challenge we need solid UI prototype result with best practice solutions
Good luck and we’re looking forward to your submissions!
Additional Challenge Rules:
- Please refer to the attached Official Rules applicable to this challenge Link
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced of the Website, these Official Rules govern.
Final Submission Guidelines
Downloadable Files:
Storyboard-Images.zip & Storyboard-Source.zip - Use this storyboard design
GE Branding.zip - GE Branding Guideline and GE Fonts
Important!
- For this UI Prototype submission we need your submission support responsive solution that works for TABLET and MOBILE screen
- Suggest best practice Responsive Web Design Breakpoints Sizes
- Our priority for this challenge is MOBILE VERSION must capture all required specification
- Provided storyboard for MOBILE VERSION using iPhone 6 Retina Portrait size (750px x 1334px).
- Make sure your submission support Standard layout with 320px width screen size using best practices of Responsive Web solution.
- Provided storyboard for TABLET VERSION using iPad Retina Landscape size (2048px x 1536px)
- Make sure your submission support iPad Standard layout with 1024px width screen size using best practices of Responsive Web solution.
- All pages need use fluid layout when transform into Landscape or Portrait view.
- Your prototype need submit correct information. Pay attention to all small details, let us know if need clarifications.
- Embed GE fonts in your submission.
- Expected technology is HTML/CSS/JS also you can use Bootstrap and jQuery.
InVision App Click Through:
Use the InVision app to get a better idea of how the screens are linking together. https://invis.io/844WEQX2R
UI Prototype Page Requirements
1). Login
TABLET VERSION
screenshot: iPad/02-iPad-login.png
- This is Login page look and feel
- Background image need covered all screen area
- Ge Logo and title placed on top and centered
- Login form need placed centered of screen
- There’s placeholder text for username and password
- Also need show icon for both inputs that placed in the left side
- On focus, need hide the text placeholder
- Remember me is a checkbox
- Suggest how checkbox look when checked on
- Login button take user to Tasks List page
- Forgot Password can be dead link
- Match styling for all form items
MOBILE VERSION
screenshot: iPhone/00-1-Login.png
- Login form need expand as mobile screen width
- Match margin like storyboard look
2). Tasks List
- This is Tasks List page, user access this page after logged in
TABLET VERSION
screenshot: iPad/03-1-iPad-default-after-login.png
- GE logo placed in the left side of header bar, logout button in the right side
- Logout button take user to Login page
- In center of header bar, there’s “Current Week” title
- Below the header bar, you need show sub-header bar for prev and next button also week range information
- Prev and Next button can be dead link
- Tasks title placed on blue background bar.
- Header, sub-header and title need use fixed placement
- For table, you divided layout into 3 columns: “Week Navigator”, “User Stories” and “Tasks List”
- In the bottom of screen, you also need display Review button. This button also need fixed placement
- Click Review button need load separated screen
- User can scrolling the page if there are longer list for this column
1st Column:
- This column can use fixed width.
- On top there’s “W45” text indicate week count of the year
- This column show 7 day from Sunday to Saturday
- Active state indicate by orange colored circle shape and grey colored for inactive state
- Notice there’s shadow behind selected date
- Match content for each circle shape
- In the right side there’s number of Total Hours
- Each column connected each other, you need display different data when user change the date selection
2nd Column:
- This column need use fluid width.
- This column contains list of User Stories
- Show number of User Stories on top of this column
- And Total Hours in the right side
- Both numbers need capture total list and hours in page, based on interactions in tasks explained below
- Notice there’s blue border in the right side of list
- Match text color differences
- In the right side, there’s arrow pointed next to each selected User Story list
- 1st User Story need selected by default on Tablet version
- User can scrolling the page if there are longer list for this column
3rd Column:
- This column need use fluid width.
- This column contains Tasks List
- Number of Task displayed on top of this column
- Tasks title need use white colored background
- There’s hours information in the right side
- Below each task list, there’s Hours selection with radio button options
- Match styling for checked on/off
- When user select the hour need automatically update the Task Hours and User Story Hours
- There’s hours slider below the radio buttons
- This slider will enable after user select Other option
- Hour Slider range is from 1 - 24 with 1 step increment
- After user stop dragging the slider, need capture the value to Task Hours and User Story Hours
- User can scrolling the page if there are longer list for this column
Tasks List Flow and Interactions
screenshot: iPad/03-2-iPad-showing-task-on-monday.png
- User change to another Day need show different data (screenshot: iPad/03-3-iPad-showing-task-on-monday.png)
- User select the radio button need capture the value into Tasks and User Story Hours (screenshot: iPad/03-4-iPad-select-his-time-option.png)
- Slider become disabled after user select available hours (screenshot: iPad/03-5-iPad-select-his-time-option.png)
- Make sure slider works smooth when dragging (screenshot: iPad/03-6-iPad-select-his-time-option(sliding).png)
- Notice the Total Hours in User Stories section updated after change Task hours value (screenshot: iPad/03-7-iPad-select-his-time-option(sliding).png)
- Sample of another User Story list, Task list need scrollable (screenshot: iPad/03-8-iPad-showing-other--work-item.png, screenshot: iPad/03-9-iPad-showing-other--work-item.png)
- When user navigate to another Day (screenshot: iPad/03-10-iPad-showing-task-on-wednesday.png, screenshot: iPad/03-11-iPad-showing-task-on-wednesday.png)
- Change hours need reflected total hours (screenshot: iPad/03-12-iPad-select-his-time-option.png, screenshot: iPad/03-13-iPad-select-his-time-option.png)
- This is User story screen with NO tasks look (screenshot: iPad/03-14-iPad-select-his-time-option.png)
- For this screen, match message on top of Tasks list. User still able to select the hours (screenshot: iPad/03-15-iPad-select-his-time-option.png, screenshot: iPad/03-16-iPad-select-his-time-option.png)
- Selected hours need automatically updated to the User Story Hours (screenshot: iPad/03-17-iPad-select-his-time-option.png)
MOBILE VERSION
screenshot: iPhone/01-1-iPhone-default-view-after-login-successfuly.png
- This is mobile screen look for Tasks List Screen
- Header, sub-header and Task List title remain same like tablet version, just need to show fluid width
- For mobile version, you only need show 2 columns:
1st Column:
- This column can use fixed width.
- Not much changes from tablet version
- You need make user user can scrolling the page if there are longer list for this column
2nd Column:
- This column need use fluid width.
- For mobile version, we need combine User Stories and Tasks list into this column
- User can access tasks list by click the row to expand and collapse the tasks list
- Match arrow styling for expand and collapse state
- Tasks list need use same color like tablet version
- Notice we hide the “Hrs” for mobile version
Tasks List Flow and Interactions
screenshot: iPhone/01-2-iPhone-showing-tasks-on-monday.png
- User change to another Day need show different data (screenshot: iPhone/01-3-iPhone-showing-task-on-monday.png)
- Tap on Task list need show up the popuo to enter the hours (screenshot: iPhone/01-4-iPhone-clicking-this-to-enter-his-time.png)
- Overlay need covered all screen, pop up must always placed in the bottom of screen (screenshot: iPhone/01-5-iPhone-select-time-overlay.png)
- Task title placed on top of title
- There’s Set Hour(s) information to capture selected value from radio or slider (screenshot: iPhone/01-6-iPhone-set-time.png)
- Cancel button need hide the popup
- Apply button need capture selected value and displayed in User Story Hours (screenshot: iPhone/01-7-iPhone-set-time.png, screenshot: iPhone/01-8-iPhone-apply-setup-time.png)
- Total Hours for User Stories and Task row updated (screenshot: iPhone/01-9-iPhone-after-setup-time.png)
- Click the arrow need expand the task list (screenshot: iPhone/01-10-iPhone-animation-work-item.png)
- User can scrolling the page (screenshot: iPhone/01-11-iPhone-the-task-of-animation-work-item.png)
- Select another hours need show up pop up (screenshot: iPhone/01-12-iPhone-clicking-this-to-enter-his-time.png)
- User can sliding the slidebar (screenshot: iPhone/01-13-iPhone-set-time.png, screenshot: iPhone/01-14-iPhone-set-time-sliding.png)
- Set Hours area updated (screenshot: iPhone/01-15-iPhone-set-time.png)
- Apply button need captured the selected value (screenshot: iPhone/01-16-iPhone-apply-set-time.png)
- When user navigate to another day (screenshot: iPhone/01-17-iPhone-after-set-time.png, screenshot: iPhone/01-18-iPhone-other-view-of-after-set-time.png)
3). Hours Summary
TABLET VERSION
screenshot: iPad/03-18-iPad-review-screen-before-submit-the-time.png
- User landed to this page after click Review button
- You should make sure all hours captured correctly based on selected value in Tasks list page
- Cancel button need take user to the previous page
- Match Review title
- In main content area, there’s table information contains of tasks and selected hours perday and total in the right side
- Total Hours in this week displayed in the last row
- Edit button in the bottom of screen is fixed placement
- Edit button need load editable Hours Summary Edit screen (screenshot: iPad/03-19-iPad-edit-review.png)
- For table version, page divided by 2 columns for User Stories and For Tasks List
- User Stories, each sub row need contains some day information
- User can navigate to each user story
- There’s right pointed arrow for selected User Story
- Change to another User Story need show correct data
- Update the hours need captured the value to the table
- Cancel button need take user go back to Hours summary screen
- Save button need captured the new value and update the table
- Submit button need load the modal window (screenshot: iPad/03-20-iPad-notification-of-submitted-time.png)
- Overlay need covered all screen
- Close button need take user to Login page
MOBILE VERSION
screenshot: iPhone/01-19-iPhone-review-screen-before-submit-the-time.png
- Mobile version need use fluid layout, no major differences with tablet version
- Click Edit button, need show up editable Hours Summary (screenshot: iPhone/01-20-iPhone-edit-review-screen.png)
- For mobile version, we need use 1 column layout only.
- Click each row need show up pop up like in Tasks List page
- Save button need show up Hours Summary Screen again
- And then click Submit button need show up the moda message (screenshot: iPhone/01-20-iPhone-notification-of-submitted-time.png)
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- 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
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- 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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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
- 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.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Chrome, Firefox and Safari on iPhone 4, 4s, 5, 5s, 6 and 6+ (Landscape & Portrait View)
- Chrome, Firefox and Safari on iPad 2, 3, Mini, 4, Mini Retina, Air (Landscape & Portrait View)