Challenge Overview
Welcome to Ebay Talent Bridge Responsive Design - Desktop Version UI Prototype Challenge
This responsive design concept is designed for an ebay employee. The goal of the Application is to enhance the user experience with the ebay Talent Bridge.
The Talent bridge is a Application that allows ebay employees actively engage in their professional development at ebay.
Final Submission Guidelines
The main task of this project is to create the eBay Talent Bridge HTML-CSS3 UI Prototype based on the provided PSD Storyboard design. UI Prototype will use Responsive Design solution that will works within Desktop/Tablet and Mobile Platform.
On this 1st phase of eBay Talent Bridge UI Prototype Challenge series, we need you focus to create prototype that will fully work within DESKTOP platform.
In the end of this challenge we need solid UI prototype result with best practice solution, that can be updated easily in the future challenges when improved the codes to support Tablet and Mobile version.
Read more details UI Prototype Requirements and Flow below.
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.
- You’re encouraged to use HAML to make the HTML code clean, provide source files on your submission.
CSS3
- 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.
- You’re encouraged to use LESS/SCSS or SASS to make the CSS code clean, provide source files on your submission.
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.
- You’re encouraged to use coffescript to make the JS code clean, provide source files on your submission.
Documentation Provided
psd.7z - eBay Talent Storyboard PSD
images.7z - eBay Talent Storyboard Screenshots
Talent-Bridge-Flow-UPDATE.pdf - eBay Talent Design Flow
PAGE REQUIREMENTS:
General Notes
- All pages of Talent Bridge UI Prototype must support responsive design solution.
- Pages requirements below looks like a lot of screens, but there's a ton of reusable code can be re-used on your UI prototype submission.
- Sidebar must displayed on the left side of browser screen, with another content placed fluid as browser width.
- Notice the left sidebar and right sidebar background must always fill the browser height.
- As possible we need all pages on this prototype linked each other. You can view attached Talent-Bridge-Flow-UPDATE.pdf for application flow. Let us know if you need clarification about the flow.
- For this Desktop Version, as possible create hover state for buttons and links.
1. Homepage
screenshot: 01.1-Home.jpg
- This is default homepage look and feel
Header
- All header area need use fluid layout.
- eBay Inc logo will always take user to Homepage. Make sure linked for other pages on your prototype.
- In the right there’s a notification and a email icons with number indicator above it. Both icons need clickable. You need make sure indicator background not break when filled more than 2 digit characters. They need always show as 1 line.
- You can put dead link now for notification and email icons.
- Search input placed in the right side. Zoom icon is clickable. User also can press enter via keyboard to start searching. Search function not required.
Left Sidebar
- This area must always placed in the left side on every screen width. You can put fixed width.
- Account information, Profile picture will wrapped by css border. You need anticipate design look same when changed with another picture.
- Profile picture and Profile Name are clickable.
- Edit link will take user to edit their profile.
- Match style and icons for left sidebar menus. Also style for active and inactive state.
- Active menu show darker background and white colored text.
- Dashboard menu need correct styling like attached 01.4-Home-Mentors.jpg (Gray text and gray icon for inactive item). These pages show incorrect styling: 01.1-Home.jpg, 01.2-Home-Participants.jpg, 01.3-Home-Leaders.jpg, 01.5-Home-Protoge.jpg
- Notice there’s also number indicator for each menu. You need make sure indicator background not break when filled more than 2 digit characters.
- Left side background must always fill the browser height.
Right Side Area
- Right side area will expand as browser width.
- We need you create fullscreen background that will resized as browsers width. Refer this sample demo
- FYI: Fullscreen background will re-use in some other pages.
- Make sure all text above the background remain centered
- There’s tab design on the bottom part of background. Match tab styling for active and inactive state
- Each tabs will support number indicators too, You need make sure indicator background not break when filled more than 2 digit characters.
- All tabs title need use consistent padding/margin.
- On page load, there’s no active tab, content below tab will show the Talent Bridge information
Participants Tab
screenshot: 01.2-Home-Participants.jpg
- Participants tab show quick introduction on top of page
- Featured Program area will act as slideshow. Arrow Prev and Next will slide the content.
- Previous Arrow button will be hidden when showing starting slide and vice versa for Next Arrow button.
- Pagination slide need slide to selected order.
- You need create slideshow that support responsive design when resized on any screen width.
- Match item layout for each Featured Program slides.
- Click View button on row will take user to “Program Detail” page
- Click “Apply” button will take user to “Apply Program” page
- Zebra list background need add automatically via css or js solution
- You need make the Program Admin linkable, notice the edit icons
- Participant and Opportunities show number indicator
- Status column, on page load you need show quick progress animation effect.
- On Status column, there’s also CLOSED and OPEN option
- Click Apply button on each row will take user to “Apply Program” page
- Click View button on row will take user to “Program Detail” page
- Need refer other screen for correct styling (01.4-Home-Mentors.jpg) and no need the dotted line on table rows.
Leaders Tab
screenshot: 01.3-Home-Leaders.jpg
- This Leaders Tab will show same layout like Participant Tabs
- You need match content based on storyboard
- Make sure buttons and links are linked to correct pages.
- Need refer other screen for correct styling (01.4-Home-Mentors.jpg) and no need the dotted line on table rows.
Mentors Tab
screenshot: 01.4-Home-Mentors.jpg
- This mentors Tab will show same layout like Participant Tabs
- Notice the differences of “Available Mentor Opportunities” format, there’s no Participant and Opportunities and Status column.
- Slideshow content will be different for this tab
- You need match content based on storyboard
- Make sure buttons and links are linked to correct pages.
Protege Tab
screenshot: 01.5-Home-Protoge.jpg
- This Protege Tab will show same layout like Mentors Tabs
- Need remove that gray border below active Proteges tab.
- You need match content based on storyboard, to make sure both pages look different
- Make sure buttons and links are linked to correct pages.
- Need refer other screen for correct styling (01.4-Home-Mentors.jpg) and no need the dotted line on table rows.
2. Dashboard
screenshot: 02-Dashboard.jpg
- This is Dashboard page look, page use 3 column layout.
- You can set fixed width for the right side but center column need fluid
Left Column
- Match “Dashboard” as active menu
Center column
- On top on this column, page show User Dashboard with profile picture and welcoming message
- Profile picture will wrapped by css border. You need anticipate design look same when changed with another picture.
- Each sections below Welcome User area are have toggle functions to collapse/expand their content.
- Right arrow need point up for collapsed section. Vice versa for expanded section
- You need make sure each section will still look proportional when resized on wider screen
My Programs
- Profile picture will wrapped by css border. You need anticipate design look same when changed with another picture.
- Put dead link for View button
- Blue colored text are page links
Program Timeline
- Match Program timeline active and inactive state
- You need suggest easy way to modify active and active state.
- Below timeline milestone, there’s timeline information.
- The blue steps could be clickable to view related step info. Need disabled for grey steps.
- Arrow need placed exactly below active timeline, make sure when current timeline changed, arrow pointer also placed in correct place
- Program Checkpoint should have flexible height when filled with more datas.
My Application
- This will be list of Application Name
- There’s status for “Open” and “Closed”
- User can edit the application and copy the template, put dead links for now.
Application Templates
- This list will be similar like My Applications
- Need add “+” button next to Application Templates title
- But action buttons needed are “Edit”, “Copy” and “Delete”
Pending Application
- This will be similar like My Applications
- Need add “+” button next to Application Templates title
- But action buttons needed are “Edit”, toggle options
- Toggle options need show correct functions
- Bulk action button placed in the bottom right. When click the arrow need show dropdown content. We need your help code the style that will match.
My Tasks
- This will be list of My Tasks information
- User can selected the row on checkboxes
- Match status for any tasks, notice there’s icons
- User can toggle status of any tasks.
- Bulk action button placed in the bottom right. When click the arrow need show dropdown content. We need your help code the style that will match.
Right Column
- At first page load, show quick animation on Program Progress
- We need easy way to set progress in the future updates.
- Activity Feed Tab placed below the Program Progress
- Notice there’s arrow button in the right side of Activity Feed, put dead link for now.
- You need make sure tab works when navigate between tabs.
- Task Tab content refer to 3.2-Program-Detail-Participants.jpg
- and Messages Tab refer to 03.3-Program-Detail-Tasks.jpg
- on Message tab, you need simulate function to reply the message
- Follow list content for Comments Tab
- Prev and Next pagination need works to update the content
- Simulate how comment added after click Send button
3. Program Landing Page
screenshot: 3.0-Programs.jpg
- Program Landing page will show as 2 column layout
- Featured Program area will act as slideshow. Arrow Prev and Next will slide the content.
- You need create slideshow that support responsive design when resized on any screen width.
- Match item layout for each Program slides.
- Click Apply button will take user to “Apply Program” page
- All Program will show list of Programs.
- You need make sure pagination working correctly
- Participant and Opportunities show number indicator
- Status column, on page load you need show quick animation effect.
- On Status column, there’s also CLOSED and OPEN option
4. Program Detail
screenshot: 03.1-Program-Detail-Opportunities.jpg
- This page will use 3 column layout similar like Dashboard page
- Make sure active state on left sidebar set to Programs menu.
- You can re-use completed right sidebar content
- Program Title area on top header should use fluid layout
- Program Picture need wrapping use css rounded border
- Make sure pagination works to display list by select show per page or navigate pagination
- Use consistent pagination design like show in other page. This page show the old design.
Opportunity Tab
screenshot: 03.1-Program-Detail-Opportunities.jpg
- This tab contains list of Opportunity list
- Notice there’s “+” button next to page title. Put dead link for now.
- User can toggle select preference options for each row
- Submit button on bottom list will save the toggle value
- Use consistent pagination design like show in other page. This page show the old design.
Participants Tab
screenshot: 03.2-Program-Detail-Participants.jpg
- This tab will show list of Participants
- Pagination placed on top side
- Email button placed in the left side.
- Each participant row can move up and down by click the top and bottom arrow on each row
- There’s edit, setting also toggle options next to move buttons
- Talent match area should dark background with “View Participants” button
- Pending Application section show separate pagination and list
- Same row functions need applied similar with list Participant list
Tasks Tab
screenshot: 03.3-Program-Detail-Tasks.jpg
- Match Program timeline active and inactive state
- Below timeline milestone, there’s show timeline information.
- Arrow need placed exactly below active timeline
- Program tasks placed below timeline
- There’s “+” button that will allow user to add Program
- Match status for any tasks
- User can toggle status of any tasks.
- Bulk action button placed in the bottom right.
- Use consistent pagination design like show in other page. This page show the old design.
5. Apply Program
screenshot: 6.1-Apply-Detail.jpg
- This screen show form when user apply a program
- Match All form inputs styling.
- You need anticipate that all inputs/select works across required platform (desktop/tablet and mobile)
- Big submit button placed in the bottom
6. Mentors Page
screenshot: 4.0-Mentors.jpg
- This is Mentors landing page
- Metor slideshow placed on top
- Slideshow need show fluid design, with Mentor picture always show centered
- View button will take to Details page
- Mentorship request list placed in the bottom
- Make sure pagination works to display list by select show per page or navigate pagination
7. Candidates Details
screenshot: 5.0-Candidate-Detail.jpg
- Top area use same background design and function like Candidates Page
- Below slideshow, layout divided into 2 column:
Candidates Form
- Candidates picture, and quick information placed on top
- Phone and email are clickable
- Match form content
- User can toggle gender option
- Export Profile button placed in the bottom
Candidate Status
- Candidate Status have toggle option
- User can add notes on textarea
- Comments section will show list of comments
- Make sure Prev and Next button works to navigate the pages
8. Leaders Page
screenshot: 5.0-Leaders.jpg
- This is Leader Landing Page
- This page use same template like previous completed Candidates Page
- You need match content like storyboard design
9. My Application
screenshot: 6.0-Applications.jpg
- This is My Application
- Page use 2 column layout
- This page is full version page of My Application, Application Templates and Pending Application
- You need make sure fluid solution applied for this page
10. Proteges Page
screenshot: 7.0-Protoges.jpg
- This is Leader Landing Page
- This page use same template like previous completed Candidates Page
- You need match content like storyboard design
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 codes
Browsers Requirements
- Firefox & Chrome Latest Version