Challenge Overview
Welcome to Ebay Talent Bridge UI Prototype Challenge Phase 2
Talent Bridge is an Application that allows ebay employees to actively engage in their professional development at ebay.
The main goal of this project is to build the eBay Talent Bridge HTML-CSS3 UI Prototype by following the provided storyboard screens. This prototype will use a Responsive Design solution that will support Desktop/Tablet and Mobile Platforms.
This is Phase 2 of the eBay Talent Bridge UI Prototype Challenge series, in which we will need you to create additional screens by use winning prototype on previous challenge.
Final Submission Guidelines
Notes:
- Main browsers need tested for this UI Prototype are Chrome, Firefox, and most recent version of Internet Explorer. Your submission needs to display correctly on these browsers.
- You need to make sure all new pages are linked with the existing prototype pages
Existing Prototype Updates
- candidate-details.html pages should be linked from any candidate photo or participant photo thumbnails. For examples:
dashboard.html
my-applications.html
program-details.html
mentors.html
protoges.html
slideshow that contains photo thumbnails.
Any other pages with similar layout/content?
PAGE REQUIREMENTS:
1. Message Inbox
screenshot: 01_1_Message_Inbox.png
- User land on this page after click Message menu in the left side bar
- Message page show tabs on top side
- Number indicator need placed next to tab title. Refer other pages look
- Action dropdown show on top left, and Create New Message button on top right
- Create New Message button will take user to New Message page
- Checkboxes on top need checked all checkboxes in page
- If one of checkboxes in table body uncheck, the header top left check all checkbox should be uncheck.
- If all checkboxes in table body checked, the header top left check all checkbox should be checked
- Re-use existing pagination style
- Unread message indicate with bold username text title
- You need to create function to toggle favorites icon
- All row on table need clickable
2. New Message
screenshot: 01_2_New Message.png
- This is Create new message page
- Match style from attached screenshot for each fields.
- “To” is input field, user can type there.
- “Subject” is input field, user can type there and replaced the "Lorem Ipsum" text
- When user click "+" button need added username
- You need to show the ability to remove user by click the “x” button
- Subject is an input field.
- Text area message should show “Type Message Here” by default. Text will disappear when user starts typing
- Attach document button will open dialog to insert files
- Save as draft, cancel and send messages placed in the bottom
- Cancel button will take user back to Message Inbox page
3. Calendar
screenshot: 02_1_Calendar.PNG
- You need to make sure all Calendar buttons link to this page
- Set Reminder and Create Event button placed on top right
- You just need focus on Month view content, make other view option disabled.
- User can navigate prev and next month
- We need an easy way to set up event and task dynamically on calendar. Documentation the instruction on your submission for each single date or date range
- Also, need an easy way to set reminder for each date.
- Tasks and Event tabs displayed below the calendar
- Reminder section displayed as table list
- Edit button placed in the right side of Reminder title, use dead link for now.
4. Set Reminder
screenshot: 02_2_Set Reminder.PNG
- User land on this page after click Set Reminder button in previous page
- Remind on a day is toggle option
- Cancel and Save button placed on top and bottom side
- Cancel button take user back to Calendar page
5. Application Program
screenshot: 03_Application-Program.jpg
- Create new “Create Application” button on index.html > Participants tab
- Refer existing style on index.html > Mentors tab
- This page shows up after click Create Application button on index.html
- Show dummy tooltips content for “?” character. Tooltips needs to show up.
- Follow design style for tooltips.
- Match content based on storyboard
- Save application button placed in the bottom right
6. Mentor Application
screenshot: 04_Mentor-Application.jpg
- This page shows up after a user clicks Create Mentorship application (Refer to index.html > Mentors tab > Create a Mentorship Opportunity)
- Show dummy tooltips content for “?” character. Tooltips need show up.
- Match content based on storyboard
- Save application button placed in the bottom right
7. Create Program Flow
You can link to this page from “+” button on my-applications.html
Flow for “Host Leader” User Type dropdown
screenshot: 02-1-Form-Create-Program copy.jpg
- This flow below when user selects “Host Leader” on User Type dropdown.
- This is the form when a user creates a new program
- Back button take back to Applications page
- Page divided by create application form and page builder in the right side
- Page builder can use fixed width but application form area need use fluid width
- Match form content and style
- Blue links and icons inside application builder are clickable
- Follow font style on each form inputs when user typed and edit (screenshot: 02-2-Input-Texts copy.jpg)
- Dropdown of User type will contains of “Candidates” and “Host Leader” (screenshot: 02-3-Dropdown-Menu-Show copy.jpg)
- Hover style for dropdown value (screenshot: 02-4-Hover-Hosted-Leader copy.jpg)
- After selected “Host Leader” option, Search input show up in the right side
- You need create autocomplete function. (screenshot: 02-5-Selected copy.jpg)
- After selected autocomplete value, input field will turn into username information with edit link in the right side (screenshot: 02-6-Autocomplete copy.jpg)
- Click Edit link will convert into input field again
- Hover style above Add Form button (screenshot: 02-7-Hover copy.jpg)
- Click add Form Button will show some rows of field that allow user to add elements. (screenshot: 02-8-Add-Elements copy.jpg)
- Hover state for Template Name link (screenshot: 02-9-Hover copy.jpg)
- Notice, Save as template button show up in the top left side
- Show 5 rows by default
- User can move up/down each row
- Select Element options are “Text Form”, “Email Form”, “File Upload”, “Checkbox”, “Radio Button” and “Dropdown.
- User can checked on and off each checkboxes
- Valued filled after click template link (screenshot: 02-10-Use-Template copy.jpg)
- Hover style for Save button (screenshot: 02-11-Hover copy.jpg)
- Notice "Save as Template" button (02-9-Hover copy.jpg) updated into Template 2 text
- After click Save button, success message show up on top (screenshot: 02-12-Success-Create-Program-for-Host-Admin copy.jpg)
- User can close the notification by click “x” button and back to Create Program (screenshot: 02-13-Create-Program-for-Candidates copy.jpg)
Flow for “Candidates” User Type dropdown
- This flow below when user select “Candidates” on User Type dropdown.
- Blank form look (screenshot: 02-14-Inpute-Texts copy.jpg)
- After user fill the form (screenshot: 02-15-Dropdown-Menu-SHow copy.jpg)
- When user hover the dropdown (screenshot: 02-16-Hover copy.jpg)
- After selected, needs to show the input (screenshot: 02-17-Selected copy.jpg)
- Create autocomplete function (screenshot: 02-18-Autocomplete copy.jpg)
- Hover style for Add form button (screenshot: 02-19-Hover copy.jpg)
- Bottom area show up after click Add Form button (screenshot: 02-20-Add-Elements copy.jpg)
- Hover state for Template Name link (screenshot: 02-21-Hover copy.jpg)
- When user clicks Template it will automatically fill the values (screenshot: 02-22-Template-Format copy.jpg)
- Hover style for Save button (screenshot: 02-23-Hover copy.jpg)
- After click Save button, success message show up on top (screenshot: 02-24-Success-Create-Candidates.jpg)
8. Profile
screenshot: 07_1_Profile.PNG
- User landed on this Profile Page after click the Profile Picture and Profile name on left sidebar. Make sure all pages on your prototype are linked.
- Match header and details content
- Edit button placed on top and bottom.
9. Profile Edit
screenshot: 07_2_Profile Edit.PNG
- This is screen when user edit the profile
- Match new styling for inputs and textarea.
- Male and Female will be toggle option
- Match other form content.
- Cancel and Save button placed on top and bottom side
- Cancel button will take back to Profile page
10. Talent Matching
screenshot: 08_Talent_matching.jpg
- This is talent matching page triggered from program-details.html > Participants tab > View Participants button
- Page divided by Criteria and scrolling Talent Matching area
- Use fixed width for Criteria
- Talent matching area will be use fluid layout.
- Talent matching area need scrolling function.
- If browser width larger than scrolling area, prev and next button need disabled.
- If there still have Talent matching columns in, next button will turn to blue. Vice versa for the prev button
- Action buttons placed in every Talent matching columns
11. Search Updates
screenshot: 09_1_Search Option.png
- You need to update all search button functionality on existing prototype
- When user focus or type on Search input, you need to show search option
- There are 3 options that need to be displayed.
- User can toggle on/off the checkmark
- Set grey colored text and icon for checked off option
- Search button placed in the bottom
- Click the button will take user to Search Result stated below
- Those selected option will affect to Search Result tabs that need displayed. You need create javascript function to support this functionality
- Click enter button on keyboard need trigger to search button
12. Search Result
- Tabs displayed based on selected option on Search input
- You need hide the related tab if the option checked off
Participants tab
screenshot: 09_2_Result_Participants.png
- Keep dead link for Filter button
- Pagination show up on top and bottom
- Match participant table content, you can re-use existing content on prototype.
Programs tab
screenshot: 09_3_Result_Programs.png
- Keep dead link for Filter button
- Pagination show up on top and bottom
- Match programs table content, you can re-use existing content on prototype. Make sure progress load by default
Opportunities tab
screenshot: 09_4_Result_Programs.png
- Keep dead link for Filter button
- Pagination show up on top and bottom
- Match opportunities table content, toggle option need works for every row
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
- HTML/CSS/JS code consistency with existing UI prototype
The following pages are required in your submission:
Existing Prototype Updates
1. Message Inbox
2. New Message
3. Calendar
4. Set Reminder
5. Application Program
6. Mentor Application
7. Create Program Flow
8. Profile
9. Profile Edit
10. Talent Matching
11. Search
12. Search Result
HTML/CSS Requirements:
Your HTML code must be HTML5 compliant.
You're encouraged to use and take advantage of CSS3.
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 lay out 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 stylesheet.
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 Browser Requirements section.
Browsers Requirements
- Chrome, Safari, Firefox Latest Version
Documentation Provided
storyboard-phase-2-images.zip & storyboard-phase-2-psd - eBay Talent Storyboard Design
ebay-talent-bridge.zip - Base of your prototype update