Challenge Overview
Welcome to IBM - Smart Parking Mobile Application UI Prototype Challenge
The main task of this project is to create the IBM - Smart Parking Mobile Application UI Prototype Challenge based on the provided PSD Storyboard design.
For this challenge you just need focus on Mobile layout with fluid layout that works all iPhone platforms. In the end of this challenge we need solid UI prototype result with best practice solutions
Final Submission Guidelines
Notes:
- All pages need use fluid layout when transform into Landscape or Portrait view.
- FYI: Provided storyboard is Retina version, your submission need support Standard version too
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- Match similar fonts in your submission. "HelveticaNeue" and “Arial” the iOS iPhones support this font.
- Your prototype need submit correct informations. Pay attention to all small details, let us know if need clarifications.
- Expected frameworks for UI Prototype Challenge is AngularJS. You can also use jQuery as Javascript library
Files Downloadable
storyboard.zip - Storyboard Design
UI Prototype Page Requirements
1. Homepage
- On page load splash screen show by default (screenshot: 01-1_Splash screen.png)
- Car Background image need display correctly when viewed on Landscape view
- By Default graphic show “Park” sign. After some seconds then animation progress bar show up (screenshot: 01-2_Splash screen.png & 01-3_Splash screen.png)
- After progress bar completed Homepage show up (screenshot: 02-1_Home_End User.png)
- Notice there’s dots pagination in the bottom of screen
- User can swipe the page to other “Saved Location” content (screenshot: 02-2_Home_End User.png)
- Tap on each icon need take to Find Building page (02-6_Home_End User.png)
- Tap and hold the icon need show the “delete button” on top right of each icons (screenshot: 02-3_Home_End User.png)
- After icon removed, you need make the other icons automatically move to filled the deleted slot.
- On homepage, tap top left menu button will open the sidebar navigation (screenshot: 02-4_Home_End User.png)
- Navigations need displayed are:
-- Home
-- Map
-- Setting
-- Feedback/Report Bug
-- Administrator Login
- Match active and inactive state for menu navigation
- When sidebar opened, content area should not scrollable
- on Homepage screen, notice the “Park” sign turn into yellow colored after loading finishes.
- Application Logo need remain centered when viewed on Landscape view
- Smarter Parking Mobile text need editable
- Below the center graphic, there’s Welcome message and “Find Building Near Me” button
- On homepage, there’s 2 inputs for “City” and Building show on top of screen
- These 2 inputs show grey colored input and arrow by default.
- When user focus on City input, it will show Selection screen in the bottom of page (screenshot: 02-5_Home_End User.png)
- Cancel need close the selection area and clear the input values
- This screen show list of all cities when user tap Select City input
- User can scrolling the page
- Tap the alphabet index in the right need take user to related first name
- After select the city, both inputs turn into blue colored style.
- Then user see Building selection (screenshot: 02-6_Home_End User.png)
- This is Building selection, user can swipe each slides
- Building page divided by 2 sections: “Building Information” and “Parking Availability”
- On “Building Information”, there’s photo in the left side. This can use fixed width
- Address and Phone number need to be fluid
- On “Parking Availability” section, Last update information placed on top of screen
- Show different status for “No Space”, “A few spaces” and “Lots of spaces”
- User can swipe the page to see another content ( 02-7_Home_End User.png)
- Show different content for another slide (screenshot: screenshot: 02-8_Home_End User.png)
- Tap Phone number need activate calling function in mobile devices
- Slide change need also affect the active pagination
- Save Location and Get Direction placed in the bottom of each slide
- Tap Save Location button need show Save Confirmation alert (02-9_Home_End User.png)
- Press Ok button in alert window need close the alert
- Dots pagination need displayed fixed in the bottom of screen
- User can tap the dots to take to related slide
- Get Direction button take to Get Direction Screen
2. Map
screenshot: 03-1_Map_End User.png
- User view this screen after tap “Map” from menu navigation
- Menu button and Search button placed on top of page
- “Last updated” message displayed on top of map
- Map need created on Google Map Api
- In Map, there’s some type of Marker. Match look and feel for each map marker
- Also, there’s 1 “user” type marker
- Tap each marker, you need show the quick information (screenshot: 03-2_Map_End User.png)
- Building picture display in the left side
- Building information and phone number display in the right side
- Status placed in the bottom
- Show different status for different marker
- View Details can be dead link for now
- Get Direction button take to Get Direction Screen
- Marker flyout information need closed when user tap “x” button
- Tap search button need show the search input (screenshot: 03-3_Map_End User.png)
- Cancel button will close the search input
- Show search result after user typing (screenshot: 03-4_Map_End User.png)
- Tap each row need hide the search result and show in map
4. Get Direction
screenshot: 04_Get Directions_End User.png
- This page show after user tap Get Direction button
- Direction message display on top of page
- Line direction need created on Google Map Api
- Show marker from user and build
- Is there additional function that will be useful from Get Direct Google api features? Let us know.
5. Setting
screenshot: 05-1_Settings_End User.png
- This is Setting page, user landed on this page after tap “Setting” on Menu navigation
- Add Location placed in the right side and take to Add Location screen
- Each row need have auto expand height when filled with longer text for Building and City name
- Edit and Delete button show up in the right side after user swipe each row (screenshot: 05-2_Settings_End User.png)
- Edit button take to Edit Location Setting page
- Delete button need show confirmation alert window (05-3_Settings_End User.png)
- Cancel and Delete button need hide the alert
6. Add Location Setting
screenshot: 05-4_Settings_End User.png
- User can add location after tap “Add Location” button
- City and Building inputs need works like explained on homepage
- Notify me toggle display in the bottom of page
- When toggle turn on, there’s additional information user need filled (screenshot: 05-5_Settings_End User.png)
- Tap Start Time/End Time need native time picker in the bottom of row (screenshot: 05-6_Settings_End User.png)
- FYI: date picker need placed between the row, you might need create custom style.
- When Repeat Notification turn on, need show additional forms (screenshot: 05-7_Settings_End User.png)
- Repeat notification can select more than one option. Checkmark placed in the right side
7. Edit Location Setting
screenshot: 05-8_Settings_End User.png
- This is edit page, basically look same with Add Location.
- This Screen show after tap Edit on Setting page
- Cancel and Save button take user back to Setting page
- Building and City is in view only mode
- Time displayed selected time, tap the input need load native time picker
- User can toggle on checkmark on repeat notification
8. Feedback/Report Bug
screenshot: 06-1_Feedback_End User.png
- This page load when user tap “Feedback” menu
- Cancel button take to homepage
- Textarea displaying on top of screen
- Submit button need load the modal window(screenshot: 06_Feedback_End User.png)
- Ok button need take back to homepage
9. Administrator Login
screenshot: 07-1_Login_Admin.png
- Note that the user gets to this page from clicking "Administrator Login" on the menu, accessed from the hamburger menu at the top left.
- Application Logo need remain centered when viewed on Landscape view
- Smarter Parking Mobile text need editable
- There’s text placeholder for both inputs.
- When user start typing on inputs, text placeholder become hidden
- Login button use same width like the inputs
- Create error validation style (screenshot: screenshot: 07-2_Login_Admin.png)
- After user typed on input, there’s “x” button in the right side to remove the values.
- Tap Login button again take user to Homepage
10. Administrator Homepage
screenshot: 08-1_Home_Admin.png
- Basically this page similar like Homepage on User role version
- There’s some differences on menu navigation (screenshot: 08-2_Home_Admin.png)
-- Home
-- Map
-- Manage Parking Indicators
-- Settings (Create different screen for Administrator)
-- Feedback/Report Bug (Create different screen for Administrator)
-- Logout (Need take to Login page)
- Basically this screen similar like Find Building page on User role version (screenshot: 08-3_Home_Admin.png)
- Add new action “Change Availability” button for each slide
- Tap this button should take to 10-1_Manage Indicator_Admin.png
- Save Location button need load the alert (screenshot: 08-4_Home_Admin.png)
12. Administrator Map
screenshot: 09-1_Map_Admin.png
- Basically this page similar like Map on User role version
- Show details need add new action “Change Availability” button (screenshot: 09-2_Map_Admin.png)
13. Administrator Manage Parking Indicator
screenshot: 10-1_Manage Indicator_Admin.png
- User landed on this page after tap the “Manage Indicator Admin” button
- You can re-use layout from Find Building page
- There’s Save button in the right side
- Edit button placed in the right side of Parking availability row
- Tap Edit button need show other menu options (screenshot: 10-2_Manage Indicator_Admin.png)
- Tap the option need change the selected availability
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 Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
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.
Browsers Requirements
Safari Browsers on all iPhone version (Landscape & Portrait View)