Challenge Overview
Welcome to the IBM - SiBM - Travel Companion Mobile UI Prototype Challenge! The goal of this challenge is to create the HTML5 Prototype for a mobile-based application using the provided "Travel Companion" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
NOTE: This challenge will leverage Bootstrap (http://getbootstrap.com/getting-started).
As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. We will allow documentation updates during final fixes (but still required).
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 an HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers. We are only concerned about mobile browser since this app will run in mobile devices like iPhone 6 and Android.
Key Requirements:
- We would like you to use bootstrap.
- Test in all the required browsers (see the list below)
- Ensure your submission is clear of HTML and CSS Validation errors and warnings.
- You are provided with a wireframe and storyboards.
- Screens/layout in wireframes and storyboards might be different, wherever the screens/layout are different, storyboards takes precedence - please follow that! (Wireframe should be helpful with the flow).
Challenge Assets:
All files for this challenge can be found in the forums
- Storyboard Screens and Source Files (PSD)
- Wireframes
- Sample Tables (to be included in the map)
Google Maps API:
As this application’s main functionality is to view restaurants, hotels and IBM office locations in a map (google maps), we would like you to use the google maps in this challenge.
Load Address in Maps:
We have provided sample addresses for hotels, IBM Offices and Restaurants and we would like you to use/pull the data and show them on the map.
- hotels.csv: Contains list of hotels within New york State
- ibmLocations.csv: Contains list of IBM locations within New york
- NEWYORK.csv: Contains list of top 10 restaurants for each ZIP code within New york.
Required Pages:
0) Splash Screen (01_Splash Screen.png):
- This is the landing screen, follow the storyboards!
- Pagination circles: Allow users to swipe left /right or navigate by tapping on the circles...just use the same screen for all the four dots and implement the navigation i.e.
allow users to clicks on a dot to view the next slide (animate this transition between slides as you see fit)
- Get Started: Clicking on this button goes to login screen (02-1_Login Screen.png)
1) Navigation (11-02_Menu.png):
When user clicks on hamburger menu icon (11-01_Menu.png) the navigation will open
- Close icon in the top left will close the navigation.
- Profile picture and name is static (not clickable).
- Home: Lead to main home view with recent search selected by default (03-01_Home.png).
- Map View: Takes the user to map view (04-00_Map View.png)
- List View: Takes the user to map view (04-08_Map View_List View.png)
- Add New Restaurant: Takes the user to “Add restaurant” screen (09-01_Add Restaurant_Form.png)
- FAQ: Takes the user to 11-04_Menu_FAQ.png
- Logout: Takes the user back to login screen
2) Login (02-01_Login Screen.png):
User needs to enter their credentials before logging in to the app.
- Enter username or email in first line and Password in second line.
- Make the “Remember Me” as a checkbox as shown in 02-2_Login Screen_Remember Me.png.
- We need to show the error screen when a user enters wrong credentials, so in this view (02-1_Login Screen.png) when the user clicks “Login” - show the error screen (02-03_Login Screen_Error.png).
Error Screen (02-03_Login Screen_Error.png)
- If user provide wrong credential or forgot to enter one of the login fields, error screen will appear (red error style).
- Clicking “Login” again in this view will take the user to “03-00_Home_Welcome Screen.png” screen.
3) Welcome Screen and Home:
Welcome Screen (03-00_Home_Welcome Screen.png):
- When a user logins for the first time, they will be new to the app - so we show this screen.
- Follow the storyboards, allow the user to enter a location to search - we need to show autosuggest options like Map 04-01_Map View_Search.png, selecting a location
in the drop-down will take the user to 04-00_Map View.png (even on tapping in search icon takes user to map view 04-00_Map View.png).
- If the user selects the icon under “search what’s near your current location” then we take the user to the map view with results (04-00_Map View.png).
- Tapping on skip, should take the user to home screen (03-01_Home.png).
Home (03-01_Home.png):
Header:
- Left side hamburger icon shows the menu to the user!
- In the right side, we see two icons “My Location and Settings” icon
- - Tapping “My Location” takes user to 04-03_Map View_My Loc.png
- - Tapping “Settings” takes user to 10-01_Settings.png.
Map:
- At the top in home view, we see the map (03-09_Home_Favorites_Select Map.png) tapping on which takes the user to the map view (04-00_Map View.png).
Recent Searches (03-01_Home.png):
- Shows the list of recent searches.
- The list shown under “Recent searches” is scrollable
- Tapping on an item takes the user to 04-01_Map View.png
- Users will be able to remove an item from here by swiping the item to the left to see an option to delete (03-02_Dashboard_Remove Item List.png, 03-03_Dashboard_Remove Item List.png)
Recently Added (03-04_Home_Recently Added.png):
- Shows the recently added restaurants
- The list shown under “Recent searches” is scrollable
- Tapping on which takes the user to restaurant screen (05-02_Item Detail_Information.png).
Favorites (03-05_Home_Favorites.png):
- Shows the list of items that were added to favorites
- The list shown under “Recent searches” is scrollable
- Tapping on an item takes the user to restaurant screen (05-02_Item Detail_Information.png).
- Users will be able to remove an item from here by swiping the item to the left to see an option to delete (03-06_Home_Favorites_Remove Item List.png, 03-07_Home_Favorites_Remove Item List.png).
My Reviews (03-08_Home_My Reviews.png):
- Shows the list of reviews that were added by you.
- The list shown under “Recent searches” is scrollable.
- Tapping on a review takes the user to the restaurant screen (05-02_Item Detail_Information.png).
4) Map View (04-00_Map View.png):
- Clicking on the “map” in home or selecting “map view” in navigation will show this view (04-00_Map View.png).
- Within this view, we see four different types of PIN’s and click on each of type of PIN shows info window (make sure to capture the selected PIN style).
Info-window:
- Top 10 Restaurant View: Tapping on a restaurant within the map will show the restaurant info window as shown in 04-10_Map View_Selected Pin.png
- Tapping on other icons “Hotel, Employee Added Restaurant and IBM Approved Hotel” will show something an info window similar to 04-10_Map View_Selected Pin.png (Please change the name according to the PIN’s) - you can grab the details for each info-window from the list view.
- Tapping on the name within the info-windows takes the user to appropriate details screen.
- Selected styles for all four PINS are available within the PSD file.
Search (04-01_Map View_Search.png):
- We need auto-suggest in the map view, when a user starts typing the search - we show auto suggest options as shown in Map 04-01_Map View_Search.png..tapping any values in the auto-suggest drop-down populates the search text box with chosen value.
Filter (04-05_Map View_Filter.png):
- When user taps “filter” icon shown in the left within the search, then we show the filter (04-05_Map View_Filter.png).
- Filter icon will help the user to show/hide the filter view.
- In this filter view, we will have four types of PINS..users will have the ability to activate/de-activate a PIN to be seen on the map. Deactivated PIN style is shown in 04-06_Map View_Filter Deactivated.png (Note: Top 10 restaurants is de-activated in this view). clicking on PIN again will activate it...please implement this all four PINs.
- Price, Distance, Ratings, # of reviews are sliders, just make them work for this prototype!
- Cuisine will be a drop-down and will work as shown in 06-04_Add Review_Select Cuisine.png, users will see list of options and selecting an item in the list will be populate the cuisine field. (By default “All” will be selected).
My Location:
- Tapping on “My Location” icon (04-02_Map View_My Loc.png) should ask the user to enable their location service if turned already turned on.
- If their location services are enabled then we need to shows user’s location within the map. (04-03_Map View_My Loc.png)
Bottom Bar:
Legend (04-04_Map View_Legends.png): Tapping the “?” icon shown in the left bottom will show the legend 04-04_Map View_Legends.png
Search Here button: When the user moves the map, then tapping on this button redraws the map with the PINS in that moved lcoation.
Add Restaurant icon: Tapping on "+" icon shown in the bottom right will show the add restaurant screen 09-01_Add Restaurant.png
Directions:
- Within the Info-window (04-11_Map View_Direction.png), on selecting the car icon (3 mins) should show the direction by car (04-12_Map View_Direction_By Car.png)
- When the user taps “walk” icon, then we show the direction for walking (04-13_Map View_Direction_By Walk.png)
4.1 List View (04-08_Map View_List View.png):
- Tapping on the list icon (04-07_Map View_List View.png) shown in the top right will take the user to list view (04-08_Map View_List View.png).
- This page has similar search and filter controls as explained in the map view like autosuggest (04-01_Map View_Search.png), Filters (04-05_Map View_Filter.png, 04-06_Map View_Filter Deactivated.png).
- Selecting an item within the list (note selection style: 04-09_Map View_List Selected.png) will show the item on the map (04-10_Map View_Selected Pin.png)
5) Restaurant Details (05-02_Item Detail_Information.png):
- Once a PIN is selected in the map, we see its information below and tapping on restaurant name in 05-01_Item Detail.png will take the user to detailed information screen (05-02_Item Detail_Information.png)
Detailed Information (05-02_Item Detail_Information.png):
Header:
- option to go back to the previous screen from where they reached this screen and
- on the right side we show the edit restaurant button which will take the user to 07-01_Edit Restaurant.png
Photos:
- Note that photos of the restaurant need to be shown as displayed in the storyboards
- Tapping on thumbnails need to show the image in a full-screen and allow the user to view the photos in landscape view as well! (Note: In this application, we should not allow landscape view and just photos alone will be shown in landscape view when they tap on the photo).
Restaurant Footer Links:
We have some consistent links in the footer
- Call: Make this a dummy link
- Share: Make this a dummy link
- Favorite: By clicking on favorite (05-11_Item-Detail_Favorited.png) changes the button to “Unfavorite” (05-12_Item-Detail_Favorited.png), tapping again in this will change its color and text back to "Favorite"
- Add Review: Takes the user to add review screen (06-02_Add Review.png).
Information (05-02_Item Detail_Information.png):
- By default, we show the information tab, user will be able to scroll through the contents in this tab (05-03_Item Detail_Information_Scrolled.png)
- Note: when a user scrolls, the tabs still need to be shown in the view (see 05-03_Item Detail_Reviews_Scrolled Down.png).
Rating Tab (05-04_Item Detail_Ratings.png):
- Tapping on “Ratings” tab shows this view.
- This just shows the average ratings that was received, follow the storyboards.
Reviews Tab (05-05_Item Detail_Reviews.png):
- Tapping on “Reviews” tab shows this view.
- User will be able to scroll in this view and the tabs still need to be shown while the screen is scrolled (see 05-06_Item Detail_Reviews_Scrolled Down.png).
- This view has two filters:
- - Show all reviews: Tapping on this allows them to select and filter by stars (05-07_Item Detail_Reviews_Filter by Stars.png), selected value will be shown.
- - 3 Months age: Tapping on this allows them to select and filter based on the age of the comment (05-08_Item Detail_Reviews_Filter by Ages.png)
Review Detailed Rating (05-10_Item Detail_Reviews_Detailed Rating.png):
- Tapping on the stars (05-09_Item Detail_Reviews_Detailed Rating.png) within a rating should show a detailed rating as shown in (05-10_Item Detail_Reviews_Detailed Rating.png).
- On tapping "Close" this should hide this detailed rating.
6) Add Review (06-02_Add Review.png):
- Selecting “Add Review” in 06-01_Add Review.png will show the Add review screen (06-02_Add Review.png).
- User will be able to select the overall rating “stars” by choosing the number of stars (note star will not be chosen in half, only full star can be selected)
- User will be able to choose the rating for the food, price, location, employees..these sliders need to work. Sliders will have yellow color when they are from values 1 to 5, from 6 to 10 it will be in blue color.
- “Good for Groups” will be a toggle switch that allows them to select between Yes or No.
- Cuisine: Users will choose the cuisine type and also have the ability to type and search (06-04_Add Review_Select Cuisine.png)
- Currency: This will be a drop-down, allowing them to choose some values.- Users will be able to add comments and photos to their review (by tapping on the camera icon will allow users to select the photos from their gallery), they will be able to remove the photos by tapping the remove icon shown in each photo.
- Tapping on Submit (06-05_Add Review_Submit.png) will show a “Validating Review” loader (06-06_Add Review_Validating.png) and show the success message (06-07_Add Review_Validated.png).
- In the success screen (06-07_Add Review_Validated.png), please change the button text from “Closed” to “Close”, clicking on that takes the user to 05-05_Item Detail_Reviews.png
7) Edit Restaurant (07-01_Edit Restaurant.png):
- By tapping on “Edit Restaurant” icon (07-01_Edit Restaurant.png) in the restaurant details view will show this view (07-02_Edit Restaurant.png)
- Users will have the ability to edit any information under any tabs shown in this view (for information on all tabs, please see “Add Restaurant” below), we need you to implement all tabs
- On Tapping “Save” will show “validating review” loader (07-03_Edit Restaurant_Validating.png) and then show success message (07-04_Edit Restaurant_Validated.png)
8) Details (Hotel, IBM Office):
Hotel Details (08-01_Hotel Detail.png):
- Tapping on the hotel PIN within the map shows the info-window and clicking on name within the info-window takes the user to this screen 08-01_Hotel Detail.png
IBM Office Details (08-02_IBM Detail.png):
- Tapping on the IBM Office PIN within the map shows the info-window and clicking on name within the info-window takes the user to this screen 08-01_Hotel Detail.png
9) Add Restaurant (09-01_Add Restaurant.png):
- In the map view, when a user taps the “Add Restaurant” icon shown in the bottom right, then we show this screen (09-01_Add Restaurant.png).
- This screen (09-01_Add Restaurant.png) allows the user to select the exact location where the restaurant exists, user need to move the map and place the exact location of the restaurant in the intersecting point of the lines. (You can see this interaction in the wireframe).
- Once they place the restaurant, they want to add in the intersecting point of the lines they tap “Add New Restaurant” as shown in 09-02_Add Restaurant.png
Form:
- In this form (09-03_Add Restaurant_Form.png), user will need to enter details about the restaurant (Information, Work hours and Food)
- Please include all the fields as shown in the form.
- Information: See the drop-style shown to allow the user to choose a restaurant type (09-04_Add Restaurant_Form_Restaurant Type.png), within the drop-select, a user will need to have the ability to type to search - so allow them to type in the place where we have “Not in the list? Tap here to search”
- Work Hours: User will manually enter the timings for opening and closing timings (09-05_Add Restaurant_Work Hours.png), format is 00:00..based on what is entered it will be shown in 05-02_Item Detail_Information.png.
- Food (09-06_Add Restaurant_Food.png): In this screen, user will enter the type of food available in that restaurant. On selecting cuisine, will show a drop-down as shown in “06-03_Add Review_Select Cuisine.png, 06-04_Add Review_Select Cuisine.png”. (within the drop-select, a user will need to have the ability to type to search - so allow them to type in the place where we have “Not in the list? Tap here to search”). Similarly on tapping in “Currency” will show list of currencies in a drop-down like cuisine and also have the ability to type and search.
Submit and Error Screens:
- Once the user has added all details, they will click on the “Submit”(09-07_Add Restaurant_Submit.png) to add the restaurant. If any mandatory fields are missing then they are shown with errors.
- In this prototype, make it like when the user taps on “Submit” show this error screen (09-08_Add Restaurant_Error.png).
- Tapping on “Submit” again will show Validating information pre-loader (09-09_Add Restaurant_Validating.png) and show success information (09-10_Add Restaurant_Validated.png)
10) Settings (10-02_Settings.png):
- Selecting “Settings” in navigation or from the dashboard (10-01_Settings.png) will take the user to this screen (10-02_Settings.png).
- Follow the options shown in this screen, most of them will be toggle buttons that enables user to switch off/on..in the on state, it will be blue in color and off state it is shown as grey in color.
- Currency will be a drop-down as shown in 09-04_Add Restaurant_Form_Restaurant Type.png and provide the ability to type and search.
11) FAQ (11-04_Menu_FAQ.png):
- Selecting FAQ in navigation will show this screen
- FAQ’s are categorized by topics and allows user to switch between topics
- Under a topic, we show questions and tapping on each question will show/hide the answer ..this works like an accordion.
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 (MIT License) for this contest.
Browsers Requirements:
- Safari & Chrome Mobile Browsers.
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.