Challenge Overview
Welcome to Praxair Travel Buddy Mobile Application UI Prototype
The main task of this project is to create the Praxair Travel Buddy Mobile Application UI Prototype based on the provided PSD Storyboard design.
For this challenge you just need focus on Mobile layout. In the end of this challenge we need solid UI prototype result with best practice solutions
Final Submission Guidelines
Notes:
- Provided storyboard design use Retina sizes, your task also need create any graphics to support standard sizes. Reference for Standard & Retina Images usage: http://www.sitepoint.com/css-techniques-for-retina-displays/
- All pages need use fluid layout when transform into landscape or portrait view.
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow. Refer attached 00_Note.jpg for click flow
- Your prototype need submit correct informations. Pay attention to all small details, let us know if need clarifications.
Files Downloadable
Final-Fixes-TravelBuddy.zip - Praxair Travel Buddy Storyboard Design
Sidebar-Menu.zip - Sidebar Menu Design
Details Page Requirements:
1. Splash Screen
screenshot: 00_Splash.png
- This splash screen show up on page load
- Background need created using CSS properties
- Praxair logo placed on top
- After some seconds, it will auto take user to Login page.
- Create separate page that show different splash screen using gradient color (screenshot: 00_Splash_Screen_X.png). You need create gradient from css properties.
2. Login
screenshot: 01_Login_Image.png
- Logo placed on top of page
- User can type on LAN ID and password
- Remember me works as toggle option. Green colored rounded is selected state
- Login button will take user to Dashboard
- New user ? Create Profile will take to Create Profile Page
- Forgot password need take user to Forgot Password page (screenshot: 01_Login_Image_Forgot_Password.png)
- Forgot password screen show 1 input to allow user type the email address
- Clicking on either Send Mail or Cancel can revert back to login screen (01_Login_Image.png).
- Create separated pages to show Login page and Forgot Password page with plain background (01_Login_Color_Background_Forgot_Password.png and 01_Login_Color_Background.png)
3. Create Profile
screenshot: 02_2_Create Profile.png
- Create Profile title always display centered
- Back button will take user to Login page
- Arrow in the right side of field show as background. Arrow in the right side are not clickable, and user can just type the text directly on the left of Arrow.
- Match all fields content
- User can type text in the right column
- Click thumbnails will allow user to replace pictures. Put dead link for now
- Finish button will take user to Dashboard page
4. Profile Page
screenshot: 03_2_Profile.png
- User landed on this page after click your own profile via Dashboard or on another user’s profile when searching new rides under Discover Trip
- Match content for Profile Page
- Clicking I look great button goes back to 04_1_Dashboard.png
- Create separated screen show other user profile, you need link this page from Discover Trip (03_3_Other User Profile.png)
- Click Menu need access sidebar navigation (Refer attached: Sidebar-Menu.zip)
5. Dashboard
screenshot: 04_1_Dashboard.png
- User arrive at this page after logging in or finishing creating a new user profile.
- Buttons must always displayed in 2 column and row format
- Each button need take user to related pages:
-- “Create Trip” -> 07_Create a Trip.png
-- “Discover Trips” -> 05_2_Discover Driving Trip.png
-- “Manage My Trips” -> 09_1_Manage My Trip.png
-- “Trip Alerts” -> 10_1_Trip_Talk.png
6. Discover Trips
screenshot: 05_2_Discover Driving Trip.png
- This is Discover Trips page
- User can type text on Start Point and End point
- Click date will show native datepicker (Screenshot: 05_3_Pick Start Date.png)
- Refer this site to trigger date picker (http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/)
- There’s checkbox to “Save search for future Trip Alerts”.
- Click Search button take user to Search Result
7. Search Result
screenshot: 06_1_Search Result.png
- Would arrive at this page after filling out search criteria in Discover a Trip, and hitting Search.
- Back arrow goes back to 05_2_Discover Driving Trip.png
- Results are expandable/collapsable. Initially loaded in collapsed state.
- Clicking right-facing triangle will expand that individual search results (see 06_2_Expanded.png)
- Checking the checkbox for a result will auto-expand result and auto-check both departing and return trips (06_2_Expanded.png shows just the departing trip checked)
- Checking the checkbox will highlight into green row
- Tapping on user profile pic goes to 03_3_Other User Profile.png
- Click Request Trip button take user to Manage My Trip page
8. Create a Trip
screenshot: 07_Create a Trip.png
- Show “Trip name” as read-only, as “Brent’s Danbury-Buffalo Trip”.
- Other fields, user can type the text
- Pick start date and time need trigger native selection (07_Create a Trip_B.png & 07_Create a Trip_C.png)
- Save button will take to Manage Trip page
9. Manage My Trip
screenshot: 09_1_Manage My Trip.png
- Arrive here from Dashboard “Manage My Trips” button, 07 - Create a Trip, or 06 - Search Results, after requesting rides.
- On page load all rows need to be collapsed.
- Clicking on triangle to left of trip name will expand trip details.
- Clicking on notification on trips I own goes to 09_4_Riders Pending.png
- Page separated into 2 sections. Top section = trips I own (I’m the driver). Bottom section = trips I’ve requested (I’m the rider).
- Click Riders will take to Already Riding page (screenshot: 09_3_Riders Already Riding.png)
- Tab look for Pending tab (screenshot: 09_4_Riders Pending.png)
- Clicking on green circled +show success message (screenshot: 09_6_Accepted.png)
- Clicking on red circled X rejected message (screenshot: 09_7_Rejected.png)
- Click thumbnail will show the Rider Details (screenshot: 09_5_Rider Details.png)
- Clicking Accept show success message (screenshot: 09_6_Accepted.png)
- Clicking Reject show rejected message (screenshot: 09_7_Rejected.png)
- Done button will close the modal and go to Already Riding page
10. Trip Alert
- Arrive here from Dashboard “Trip Alerts” button.
- Trip Talk will be repurposed as “Trip Alerts” (screenshot: 10_1_Trip Talk.png)
- Page separated the page into 2 sections. Top section = “Pending Trip Requests” for trips I own where there are outstanding rider requests. Bottom section = “Trip Discovery” for trips that match one of my saves searches.
- Click on “1” notification goes to 09_4_Riders Pending.png
- Click on Trip Discovery row will take user to Trip Discovery page
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.
- Documentation of your prototype
The following pages are required in your submission:
1. Splash Screen
2. Login
3. Create Profile
4. Profile Page
5. Dashboard
6. Discover Trips
7. Search Result
8. Create a Trip
9. Manage My Trip
10. Trip Alert
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.
Browsers Requirements
- Safari Browsers on iPhone (iOS7)
- Android Browsers (4.2)