Challenge Overview
Welcome to the "IBM - Borrow Me Mobile HTML Prototype Challenge". The goal of this challenge is to create mobile HTML5 Prototype application based on provided storyboards for client. The prototype must follow best practices for HTML application since we will develop the prototype as web page inside WeChat apps. Please see more details below.
The main task of this project is to create the UI Prototype based on the provided Storyboard design by re-use existing best practices look and feel also the functions of HTML5 mobile.
This UI Prototype will use Responsive Design solution that will works within Mobile Platform. You must use mobile web HTML5 best practices so it will looks good in targetted device. Read more details for UI Prototype Requirements and Flow below.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers. We're only concern about mobile browser since this apps will run in mobile within WeChat apps.
Required Pages:
01. Login Screen
- Reference screens, 01A-Login.png to 01-Loader.png.
- By default this screen will appear once user open the application.
- Provide us error login scenario if user enter wrong credential.
- Blurred background must be easily replaceable with other images in future development no matter what size the images (it also needs to be adjustable in different resolutions). Make sure your codes can handle it.
- If user put correct credential, 01-Loader.png will show up for a little while to indicates the apps is loaded.
02. Confirm Your Location Screen
- Reference screens, 02A-Confirm-location to 02-Confirm-location.png
- After loading screen finished, this screen (02-Confirm-location.png) will appear to the app user.
- User must choose their current working place (IBM office where they worked -- 02-confirm-location.png). If the user chooses No, then the confirmation screen shows up (02A-Confirm-location-option.png). The user can type a city and see the IBM offices at that city and asks them to confirm. Once they confirmed about their office place, the marker will show the office location in map (02B-Confirm-location.png) and then user will be redirected to receive alert settings.
- Please use google map for simulate this screens.
- After user choose their working office, they will be asked if they want to receive alerts from other app user that near from his/her location if other user needs to borrow something (02C-Confirm-location.png).
03. Dashboard Screen
- Reference Screens, 03A-Dashboard.png to 03D-Dashboard.png
- After user confirmed their office locations, this screen (03-Dashboard.png) will appear.
- This screen will show list of borrow request from all app users that active in the apps.
- "I need to borrow something" button will redirect user to create new borrow request.
- Notification (03B-Dashboard-notification.png) will appear everytime other app user in their location posts a new request, the notification icons needs to have unread notification status (with red circle and number appear) and all read notification status (no red circle and number). Notice that we don't need the cable image (image on the right side) to be shown anymore, please remove the cable image and adjust the layout.
- swipe to the left of each list will open the list menu (03A-Dashboard.png), blue button for edit request (if the request belong to user), red button for delete request (if the request belong to user), and green button for status of items needs to be borrowed is received.
- If user want to delete one of his/her borrow request, there will be a modal window for appear asking if the user wants to say thank you to the lender who give the items via BlueThx apps (03C-Dashboard.png and 03D-Dashboard.png).
- Touching the hamburger menu will open 08-Navigation.png
04. New "Borrow" Request Screen
- Reference Screens, 04A-New-request,png to 04-New-request.png.
- If user click/touch the "I need to borrow something" button, it will bring user to 04-New-request.png
- User will filled all necessary information, and if user choose to activate "willing to travel", user will be asked how long the distance they willing to take the items (04A-New-request.png).
- There are no button to post the request right now, so, remove the magnifying glass and change it to "Post" text or create a button below the request form, you can reuse "i need to borrow something" button layout for this.
05. View "Borrow" Request Screen
- Reference Screens, 05A-View-request.png to 05-View-request.png
- This screen will be appear if user click/touch any list items.
- If the request belong to the current app user, show "05B-View-request-admin.png" where user can update the request status depending on the situation.
- If the request belong to other user, show "05-View-request.png" for item request that still looking for item.
- If the request belong to other user, show "05A-View-request.png" for item request that already got borrowed item.
06. Active Request Screen
- Reference screens, 06A-Active-requests.png to 06-Active-requests.png
- User can access this screens by navigate from hamburger menu.
- Touch "My requests" menu will bring user to this screen with "My requests" tab active (06-Active-requests.png)
- Touch "Other requests" menu will bring user to this screen with "Other requests" tab active (06A-Active-requests).
07. Settings Screen
- Reference screens, 07-Settings.png
- In this screen user can edit their working place and whether they want to receive alerts from their colleagues near by that have active borrow request.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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 layout 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.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use JQuery for this contest.
Browsers Requirements:
- Firefox, Safari & Chrome Mobile Browsers
- Android Browser.
Documentation Provided:
- Storyboard and flow documents can be found in forum!
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.