Challenge Overview
Welcome IBM Castle - $300 Tablet/Mobile Navigation Refinement UI Prototype
- Provided UI Prototype is tested and works on mobile, tablet, desktop design screen. Do not break current functionality, look and feel.
- Let us know if you doubts about anything!
- DO NOT make INDENTATION or SPACE changes. Please focus on completing F2F Tasks. We need your code easy to see the differences.
Downloadable Files
Storyboard: https://drive.google.com/folderview?id=0BxNVnWK-ZGA6SHdjLWVUdElGUGM&usp=sharing
UI Prototype as Base: https://gitlab.com/ibm-castle/ui/tree/develop
Gitlab Usage
- Post to challenge forum if you not have access to our gitlab with your gitlab username
- First, make sure your "develop" branch ALWAYS UPDATED! We keep push some updates in parallel.
- CREATE NEW BRANCH based on our latest "develop" branch with this title format “f2f/YourTCusername/XX" where XX is number of issue ticket. And then do the fixes based on the specified branch.
- DO NOT FORK into your own repo. you MUST create from our "develop" branch. We'll reject your submission if you submit from your own repo.
- Start working your updates in that branch. Submit your updated prototype to O/R for Review and watch any feedbacks.
- Once you selected as the winner, then you'll need send MERGE REQUEST to "develop".
F2F TASKS
TABLET
Screenshot: Tablet-UI_v7/01B ~ Message.jpg
- This is new look of Message Detail page!
- Message detail content need wrapped inside the current layout, not in separated page
- Make sure your detail page look good for single and multiple page (Indicated by number of message on message row)
- There's back button on left side of reply button
- Full size need open page need window with captured content
Screenshot: Tablet-UI_v7/02A ~ Menu (Expanded).jpg
- Sidebar menu use full height
- Match overlay background like storyboard
- Sidebar menu, we need add arrow on current page menu
- sub-options will be auto expand for current menu
- Make sure Create New Tag use consistent function
- Settings and Logout button always placed on the bottom sidebar
Screenshot: Tablet-UI_v7/02B ~ Menu (Collapsed).jpg
- Click the arrow need close the sub-options
MOBILE
Screenshot: Mobile-UI_v7/02A ~ Menu (Expanded).jpg
- Match overlay background like storyboard
- Sidebar menu, we need add arrow on current page menu
- sub-options will be auto expand for current menu
- Make sure Create New Tag use consistent function
- Settings and Logout button placed on the bottom sidebar
- User need able to scroll down/up the page
Screenshot: Mobile-UI_v7/02B ~ Menu (Collapsed).jpg
- Click the arrow need close the sub-options
CLIENT PRIORITIES (The items that are considered highest prototype priorities)
- Creating quality and efficient AngularJS/HTML/CSS3 code that works in all the requested browsers.
BROWSER REQUIREMENTS
- IE11
- Safari
- Chrome
- Firefox
- Safari on Tablet
- Safari on Mobile
F2F GUIDELINES
We will review submissions as they are submitted, we will review ALL submissions until we declare a winner based on
Pay attention to Forum activity!
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted
Please let us know if you have any questions or need clarification on something
Final Submission Guidelines
IMPORTANT- Provided UI Prototype is tested and works on mobile, tablet, desktop design screen. Do not break current functionality, look and feel.
- Let us know if you doubts about anything!
- DO NOT make INDENTATION or SPACE changes. Please focus on completing F2F Tasks. We need your code easy to see the differences.
Downloadable Files
Storyboard: https://drive.google.com/folderview?id=0BxNVnWK-ZGA6SHdjLWVUdElGUGM&usp=sharing
UI Prototype as Base: https://gitlab.com/ibm-castle/ui/tree/develop
Gitlab Usage
- Post to challenge forum if you not have access to our gitlab with your gitlab username
- First, make sure your "develop" branch ALWAYS UPDATED! We keep push some updates in parallel.
- CREATE NEW BRANCH based on our latest "develop" branch with this title format “f2f/YourTCusername/XX" where XX is number of issue ticket. And then do the fixes based on the specified branch.
- DO NOT FORK into your own repo. you MUST create from our "develop" branch. We'll reject your submission if you submit from your own repo.
- Start working your updates in that branch. Submit your updated prototype to O/R for Review and watch any feedbacks.
- Once you selected as the winner, then you'll need send MERGE REQUEST to "develop".
F2F TASKS
TABLET
Screenshot: Tablet-UI_v7/01B ~ Message.jpg
- This is new look of Message Detail page!
- Message detail content need wrapped inside the current layout, not in separated page
- Make sure your detail page look good for single and multiple page (Indicated by number of message on message row)
- There's back button on left side of reply button
- Full size need open page need window with captured content
Screenshot: Tablet-UI_v7/02A ~ Menu (Expanded).jpg
- Sidebar menu use full height
- Match overlay background like storyboard
- Sidebar menu, we need add arrow on current page menu
- sub-options will be auto expand for current menu
- Make sure Create New Tag use consistent function
- Settings and Logout button always placed on the bottom sidebar
Screenshot: Tablet-UI_v7/02B ~ Menu (Collapsed).jpg
- Click the arrow need close the sub-options
MOBILE
Screenshot: Mobile-UI_v7/02A ~ Menu (Expanded).jpg
- Match overlay background like storyboard
- Sidebar menu, we need add arrow on current page menu
- sub-options will be auto expand for current menu
- Make sure Create New Tag use consistent function
- Settings and Logout button placed on the bottom sidebar
- User need able to scroll down/up the page
Screenshot: Mobile-UI_v7/02B ~ Menu (Collapsed).jpg
- Click the arrow need close the sub-options
CLIENT PRIORITIES (The items that are considered highest prototype priorities)
- Creating quality and efficient AngularJS/HTML/CSS3 code that works in all the requested browsers.
BROWSER REQUIREMENTS
- IE11
- Safari
- Chrome
- Firefox
- Safari on Tablet
- Safari on Mobile
F2F GUIDELINES
We will review submissions as they are submitted, we will review ALL submissions until we declare a winner based on
Pay attention to Forum activity!
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted
Please let us know if you have any questions or need clarification on something