Challenge Overview
Welcome to the "IBM Reading Together 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 mobile application. 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 devices.
Required Pages:
Notes :
- For layout content and positioning, use storyboard.
- For application flow, use wireframes.
01. Login Screen
- Reference screens, 01Login-Screen.jpg to 01Login-Screen_invalid-credentials.jpg.
- By default this screen will appear once user open the application.
- Provide us error login scenario if user enter wrong credential.
02. Dashboard Screen
- Reference screens, 02Dashboard_Home-Screen.jpg.
- After successfull login, user will be redirected to this page.
- This screen will show summary of user activity within the application.
- Blurred background on top section needs to be adjustable, blur function needs to be create within the code so user can easily change the image without needs to apply blurred effect to the image first.
- Follow storyboard for the layout, there are 4 navigations needed "Borrow Books", "My Book List", "Leaderboard", and "My Profile". Touch any place on the rectangle area should bring user to their targetted page.
- "Currently Borrowing", "Currently Lending", "Notification" area is a link.
- All text needs to be editable.
03. Borrow Books Screens
- Reference screens, 03Borrow-Books_Most-Popular.jpg, 04Borrow-Books_Titles.jpg, 05Book-Details_list-View.jpg, 06Book-Details_Map-View.jpg to 06Book-DetailsContact-Popover.jpg
- User can access this screen from dashboard -> "Borrow Books".
- There are 3 tabs available in this screen, default tab is "Most popular" (03Borrow-Books_Most-Popular.jpg)
- User can go to the other 2 tabs (Titles and author), These tabs should use 04Borrow-Books_Titles.png as their screen layout, the differences is under titles tab, the heading of each list should be the book title, while for author tab, the heading should author name.
- Touching any of the book list in these tabs will bring user to books details page.
- User can see books detail content in 2 different view, map and list view (05Book-Details_list-View.jpg and 06Book-Details_Map-View.jpg)
- User can adjust the distance of range area for searching available books that they willing to travel (06Book-Details_Range-settings.jpg).
- User can rate the book by touch/tap/click "Rate this" button (06Book-Details_Rating-Popover1.jpg), after user rate the book, the rate star in book detail page should be filled according to user rate selection.
- User can view reach other user via touch/tap/click "contact" button in list view (06Book-DetailsContact-Popover.jpg)
04. My Book List Screens
- Reference screens, 09My-Book-List_Available.jpg to 14Add-Book.jpg, 18Lending-a-Book.jpg to 19Lend Book_Choose-Start-date-popover.jpg.
- User can reach this screen from dashboard -> "My Book List".
- There are 3 tabs available in this screens, they are "Available", "Lent", "Lending History".
- By default, "Available" tab will be open when user open this screen (09My-Book-List_Available.jpg)
- Available will showing all books belong to the user that available for other user (09My-Book-List_Available.jpg)
- Lent showing all books belong to the user that currently being borrowed by other user (11My-Book-List_Lent.jpg)
- Lending History showing all log history for all user books transaction (13My-Book-List_Lending-History.jpg)
- Available tab, swipe book list to the left will open "Edit" and "Lend" button navigation (10My-Book-List_Available_Swiping.jpg).
- Lent tab, swipe book list to the left will open "Returned" button navigation (12My-Book-List_Lent_Swiping.jpg). Touch "returned" button will bring the book list back to available tab.
- touch "+" button at the top right of the screen will bring user to 14Add-Book.jpg
- Add Book page, form input elements needs to follow storyboard. Book cover/image also can be uploaded via this form.
- If user click/touch "Lend" button in Available tab, it will bring user to 18Lending-a-Book.jpg where they can fill a form to lend their book to other user.
- Lending screen, "lend to" input field is auto populate, apps will gather matched result when user typing character (18Lending-a-Book_Typehead.jpg)
- Lending screen, User can choose the start date for lending the books to other user (19Lend Book_Choose-Start-date-popover.jpg)
- Lending screen, User can choose day duration for lending their books via slider, make the minimum value 1 days and maximum value 31 days.
05. My Borrowing List Screens
- Reference screens, 07My-Borrowing-List_Currently-Borrowing.jpg and 08My-Borrowing-List_Borrowing-History.jpg
- This screen can be reachable from dashboard -> currently borrowing link.
- There are 2 tabs in this page, Currently borrowing and Borrowing history.
- Currently borrowing screen show all books that user currently borrow (07My-Borrowing-List_Currently-Borrowing.jpg)
- Borrowing history screen show all books that user ever borrow via this apps (08My-Borrowing-List_Borrowing-History.jpg)
06. Members Screens
- Reference screens, 22Members-List.jpg
- This is stand alone screen that currently don't have any navigation.
- provide this screen and make it scrollable (fill the content so scroll bar appear)
07. My Profile Screens
- Reference screens, 20Profile-Screen.jpg to 21Edit-Profile-Screen.jpg
- User can reach this screen via dashboard -> My profile menu.
- Follow storyboard to create profile screen (20Profile-Screen.jpg)
- Needs to implement google maps for the map, default location can be anywhere for now, make it editable for choose new location from edit profile.
- Click/Touch "edit" button at top right screen will bring user to 21Edit-Profile-Screen.jpg
- Edit profile screen, all form layout needs to follow storyboard and editable, slider distance needs to work, minimum value 1 miles, maximum value 20 miles.
08. Leaderboard Screens
- Reference screens, 15Leader-Board.jpg
- Please notice the "Top Book lister" title is a selectable area (drop down), user can change the value to "Top Book Listers", "Top Borrowers", and "Top Lenders"
- Adjust the leaderboard content screen to match with the title.
09. Search Screens
- Reference screens, 16Search.jpg to 17Search_Results.jpg
- User can reach this screen via click/touch magnifying glass icon in the entire apps.
- While typing the search box, any matched result will appear (auto search) like shown 17Search_Results.jpg.
10. Alert Screens
- No reference screen.
- Check wireframes, Alerts page.
- This screen can be reach via dashboard -> Notifications.
- Re-use existing screen that have same layout for create this screen.
- There are 2 two tabs available in this screen, Borrowed Books and Lent Books.
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 challenge.
- AngularJS is allowed to be use in this challenge.
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.