Challenge Overview

Welcome to the Seto Corporate Directory New Look HTML5 UI Prototype Contest.

The goal of this contest is to build an HTML5/CSS3 Prototype based on the completed new look of Seto Corporate Directory Design.

Read the detailed breakdown below and ask unclear tasks on challenge forums



Final Submission Guidelines

Challenge Details
The purpose of this project is to build a social profile system that will aggregate the employee's related information and social activities and make it available to all.

We just got new look for Seto Social Application. This time we need your help building responsive design prototype that will support multiple browsers (Desktop/Tablet and Mobile). On this challenge you just need focus create UI Prototype for Desktop version only. We will run another challenge to get mobile version created. Keep in mind while build the prototype, your code should can accommodate and updated easily to build Mobile Version use winning submission from this challenge

IMPORTANT
- The result of this UI Prototype contest will run under Desktop/Tablet/Mobile.
- Submission result must contain 1 set of HTML5 with multiple CSS files for each platform. Use CSS3 Media Queries to load different styles for each page. don't build different page for different device/layout.
- Make sure the transitions/navigation effects running smooth and no lag.
- The design should work with the provided designs fluid/flexible nature.
- Application performance is our concern. Make sure prototype runs/load lightweight.
- As possible use shape and color CSS properties instead image based.
- Provide hover state for desktop versions. on Mobile, you need disabled them.
- We provide old prototype (old-prototype.zip). You can re-use existing functions, but make sure they will works on Desktop/Tablet/Mobile platform. Keep it mind, we need create totally new prototype for this challenge
- Storyboard use "Helvetica Nueue" as font family. What alternative safe web font that will look consistent accross browsers (Desktop/Tablet and Mobile)?
- As possible all pages should linked together

Create index.html page
This page will contains these following links, they need opened in new page:
1. Search Result
1.1 Search Result List View with Profile Picture Type 1
1.2 Search Result List View with Profile Picture Type 2
1.3 Search Result List View with Text
1.4 Search Result Grid View

2. Corporate Address Book
2.1 Corporate Address Book Default
2.2 Corporate Address Book Edit View
2.3 Corporate Address Book Modal Windows Redirect
2.3 Corporate Address Book Modal Windows Edit

Page Requirements
0. Layout

- Desktop version will have max 1000px page width and must displayed centered.
- Page divided by header, body and footer area.
- Match background color.
- Remember, we will build mobile version in the next challenge. Make sure your design anticipate that!

Header
- Company Logo will be dead link, use image based
- Click on Gear icon will show flyout. Click outside area will close
- Gear icon drop down menu containing these items:
-- “My Account” (Click this need take to “Corporate Address Book Default”)
-- “Sign Out” (“Put dead link”)
-- “Help” (“Put dead link”)
-- “Feedback” (“Put dead link”)

Footer
- my.seto.com & Legal are dead link
- Notice there’s shadow in the footer part

1. Search
1. 0 Search Landing Page

Screenshot: 01_2.jpg
- You no need create the Search landing page content, just focus creating the the header and input area.
- Follow header on this screen for all pages on prototype. Notice the header use teal color (#66cccc) instead of black.

Search Input Area
Screenshot: 01_3.jpg
Search input area contains of:
- Left down arrow allows user to select a category to search by.
- Common search categories displayed on list, they are:
-- Name
-- Nickname
-- Global ID
-- Email
-- Cost Center Organization/Department
- Click label should checked on/off the radios
- Criteria default should set to “Search Employee by Name”
- “Search Employee by Name” text disappears when you click in text box
- Show radio buttons on the left side for search criterias
- Selected search criterias will reflected on input field text.  
- There’s More link to open Advance Search
- Show listing of recent search in the bottom

Advance Search
Screenshot: 01_4.jpg
- Advance Search option show up after click “More” option link
- Layer toggle downward below the default criterias. (Use smootht accordion style)
- “Less” link show up when extra criterias displayed. Click this button will toggle upward advance search

Search Result
Notice there’s 3 view options placed on top left below “Search results for Whitewoood” on page, their functions are for:
-- Grid View
-- List View with Profile Picture
-- List View with Text

1.1 Search Result List View with Profile Picture Type 1
Screenshot: 02_1.jpg
On this type, search result consist of:
- Display “Search” term information on top. Results per page aligned in the right side.
- View option, pagination and results per page placed in same line. They also appear below table.
- Results per page dropdown need show “20”, “40”, “60” and “100” option
- Follow Pagination state for current inactive/active state also “...” and prev/next button
- Table header allow user to sort the column. Make sure this function works
- Match table content.
- Username and Profile Picture clickable
- Click Phone and email address will open in new page

1.2 Search Result List View with Profile Picture Type 2
Screenshot: 02_2.jpg
- This is alternate version of Search Result List View type 1
- Display “Search” term information on top. Results per page aligned in the right side.
- View option, pagination and results per page placed in same line. They also appear below table.
- Sort By dropdown need show “First Name”, “Location”, “Email” and “Organization”. This sort function need works on your submission.
- Notice there’s no table header on this type
- Table Columns divided by:
-- Name
-- Profile Picture
-- Profile Information
-- Social Profile Informations (divided on 2 columns)
- Click Phone and email address will open in new page

1.3 Search Result Grid View
Screenshot: 02_3.jpg
This is Search Result (Grid View type)
- Display “Search” term information on top. Results per page aligned in the right side.
- View option, pagination and results per page placed in same line. They also appear below table.
- Sort By dropdown need show “First Name”, “Location”, “Email” and “Organization”. This sort function need works on your submission.
- Match how layout look use 5 x 4 format
- Grid view content show Profile and User First and Last Name. Both links are clickable
- Grid layout use rounded corner, make sure shape remain same when filled with actual images

1.4 Search Result List View with Text
Screenshot: 02_4.jpg
This is Search Result (List View type)
- Display “Search” term information on top. Results per page aligned in the right side.
- View option, pagination and results per page placed in same line. They also appear below table.
- Table header allow user to sort the columns.  
- Match table header content.
- Table columns divided by:
-- First Name
-- Last Name
-- GID (must not have sort function)
-- Location
-- Phone (must not have sort function)
-- Email
- Click Phone and email address will open in new page. Then, update the style into bold text

3. Corporate Address Book
3.1 Corporate Address Book Default

Screenshot: 03_1.jpg
This is default look of Corporate Address Book page

Address Book page content divided by 2 column:
Left column
- Personal Information
--- This section will contains of Profile pic and quick information
- Contact Information
--- This section will contains of User Contact information
- Profile
--- Personal Bio displayed as list
--- Language, Interest, Skill displayed as tag list
--- Personal Bio as text

Right Column
- Hierarchy
--- Follow indentation structure
--- Each name is clickable
--- User profile marked as blue colored text
--- Hover on each name will tooltips. Make sure size dynamic when fill with some different content. Screenshot: 03_3.jpg
--  No hover tooltip current name
- Linked In
-- This section need pull data from linked
-- Use this site for refence of embeded LinkedIn profile badge: https://developer.linkedin.com/plugins/member-profile-plugin-generator?button-type-inline=true
-- Make sure style blend with current application
- Chatter
--- There will be list of Chatter consists of Profile Picture, Personal Bio
--- More link in the bottom is dead link
- Photos
--- This section show 4 x 2 layout format
--- More link in the bottom is dead link

- FYI: On EDIT version (read details), each sections need draggable and swap place.
- There’s timeline design with icons for each section. Notice there's a border with some icons tied to each section.
-  Use 96px x 96px for Profile image size.
- “Hear name Spoken Aloud” button will transform the small player.  Screenshot: 03_2.jpg
- Small player will contains of “Fast Backward”, “Play” and “Stop” button. All these button clickable. Put dead link for now.
- Match content for each section

3.2 Corporate Address Book Edit View
Screenshot: 03_4.jpg
- This is Corporate address Book page look when user logged in and have ability to edit fields
- Edit pencils should all be in line on the right and there should be a clear way to tell which box it is tied to.  
- Hover above Hierarchy Username (Screenshot: 03_5.jpg)
- All sections can are draggable, Put drag arrow for all sections. On storyboard drag arrow missing for “Personal Information”, “Contact Information“ and Profile
- Hierarchy, LinkedIn, Chatter and Photos are not editable
- Each boxes draggable and swappable between each section. Columns must remain same, but order can changed
- You need implement inline editing of fields and ability to save. Refer screenshot look: 03_7.jpg 
- Small player will contains of “Fast Backward”, “Play”, “Stop” and “Record” button. Screenshots: 03_7.jpg
- On this inline editable page, you need show Editable forms for “Personal Information”, Contact Information and Profile sections. All sections in the right column not editable
- Make sure inline editable and tag update works!
- Save All button appear in the bottom page. And reflect default page.
 
3.3 Corporate Address Book Modal Windows
Screenshot: 03_6.jpg
- Create Separate Corporate Address Book edit page that will show modal when click each Edit button
- User will see modal windows when edit in Profile section
- This modal only show up when click edit Pencils on Personal and Contact Information.
- Modal windows will contains text information, cancel and OK button
- When user click Profile section need show up this modal window. Screenshot: 03_8.jpg
- Create another different page to let user view this different style modal window with toggle hide/show. Screenshot: 03_9.jpg
- Each sections need show textarea

- Click Ok and Cancel button will close the modal

Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS code that works in all the requested browsers.
- All elements should be pixel precisions, pay attention to padding, margin, line-height, etc.
- Use best practice for Responsive Design UI Prototype. Possible to build mobile version in future updates using this winning submission codes?

Submission Deliverables
The following pages are required in your submission:

Index.html
1. Search Result
1.0 Search Landing Page
1.1 Search Result List View with Profile Picture Type 1
1.2 Search Result List View with Profile Picture Type 2
1.3 Search Result List View with Text
1.4 Search Result Grid View

2. Corporate Address Book
2.1 Corporate Address Book Default
2.2 Corporate Address Book Edit View
2.3 Corporate Address Book Modal Windows

File Attachments:
- seto-socials-storyboard-updates.zip : Use this storyboard to build your UI prototype
- old-prototype.zip: Reference of old UI Prototype

Specific HTML/CSS/JS Requirements
HTML5/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 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/titles, 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.
- Test in all the required browsers.
- Watch word typos in every place including the source code. Make sure they have correct meaning.

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 for this contest.

Browsers Requirements
- IE 10 and above
- FF latest Mac & PC
- Safari latest Mac & PC
- Chrome latest Mac & PC

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30042396