Challenge Overview
Welcome to the AT&T Enhanced WebRTC Audio/Video Call and Conferencing UI Prototype Challenge
The main task of this project is to create the AT&T WebRTC Audio/Video Call & Conferencing UI Prototype based on the provided PSD Storyboard design.
Final Submission Guidelines
IMPORTANT!
- This application will use Bootstrap for responsive design purpose. Please follow coding standards and write clean code.
- Javacript library usage will be up to Competitor
- When resize browsers into mobile screen width, all element need transform using fluid layout
- Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
- Provided storyboard contains Desktop and Mobile Retina version.
- On Desktop browser, all icons need remain in consistent size when resized into mobile layout.
- Your UI Prototype need support Retina and Standard size when viewed on mobile devices.
- Provided desktop version use 1100px width. In your fluid prototype you need make sure web version starting from 980px!
Files Downloadable
AT&T WebRTC Storyboard.zip - Storyboard screens and PSD files
AT&T WebRTC Audio/Video Call & Conferencing UI Prototype Requirements
1. Login Page
A. Desktop Version
screenshot: Web/1 Login.jpg
- This is login page look and feel
- Application logo placed on top, you can set dead link for the logo
- Login form and logo need always remain centered in page
- Username and Password show text placeholder
- When user click on input, text placeholder will be hidden
- Show red border for error validation
- Login button display below the text input
- Click Login button take user to Landing page
- Click Remember Me label should checked on/off the checkbox
- Show us how checked on state styling for the checkbox
- Register Now! can use dead link
- All elements inside the page need created as CSS properties
B. Mobile Version
screenshot: Mobile/1 Login.jpg
- Login form on mobile version need to place centered of page
- There’s no differences layout
- Login box need to be fluid as browser screen
2. Landing Page
screenshot: Web/2 Landing Page.jpg
A. Desktop Version
- This is Landing page look after user logged in
- Page divided by 2 columns
- Left side can use fixed width
- Right side need to be fluid as browser screen
Left Side
- There’s tab function for “Call” and “Conference” on top of left sidebar
- Search & Add Contact displayed below the tab
- Contact List displayed below the input
- On each Contact list, there’s colored dotted indicator above Contact Photo, match the color based storyboard
- Contact Name and Contact Numbers display as stacked line. Match the text color
- In the right side there’s Mic and Camera buttons
- Click those buttons need take to different flow to let user calling or do conference
- FYI: this contact list need show scrollbar when filled with more data. refer screenshot for scrollbar styling (screenshot: Web/7 Contact List.jpg)
Right side
- This right side is area for calling progress or video Conference for user
- You need make sure all elements inside this are use fluid width.
- You need reduce the whole page width to support minimum 980px screen by adjust this right section. Left side can use fixed width
- By default, before user click anything, in the right user see “Call” and “Conference” message and buttons
- In the bottom, action bar showing default state, here’s the function from left to right:
-- Pause (Click this button should toggle to Play button)
-- Volume (Click this button should toggle to Volume Off button)
-- Camera Off (Click this button should toggle to Camera On button)
-- Mic On (Click this button should toggle to Camera On button)
-- Add New Call (Need show Add Call flow)
-- Hang up (Close current calling)
-- Keypad (Need show Add Call flow)
-- Fullscreen View (Click this button will need covered whole area with the right side and hide the left side )
- FYI: you need make sure when user click on buttons, it toggle to different state. Refer provided button variation (screenshot: ASSET ICON.jpg)
Call Tab
screenshot: Web/3 01 Party to Party Call - Outgoing Call Screen-Initiate.jpg
- Press Call tab need show active state in top tab
- Enter Phone number or email placed in the bottom
- In the right side of input there’s “call input icon”
- Press the button will show floating “numbers” input (screenshot: Web/8 Search for and Add Contact.jpg)
- Cancel and Dial button show disable state with less transparent color by default
- After user type email or phone number on input, Dial button become action (screenshot: Web/3 02 Party to Party Call - Outgoing Call Screen-Adding Phone number and email.jpg)
- Thumbnails show up in the bottom of right side area
- Press Dial button show calling progress (screenshot: Web/3 03 Party to Party Call - Outgoing Call Screen-Starting Call.jpg)
- You need show animation on calling progress for the dotted graphic
- If possible we need animation created as javascript function instead gif animation
- On calling progress, notice the Cancel Button become active
- Click the button will cancel the calling progress
- Simulate in your submission, after some seconds, user pick up the calling (screenshot: Web/3 04 Party to Party Call - Outgoing Call Screen-Connected Call.jpg)
- Match active button looks in the right side bar
- The right side area show caller image placeholder
- Make sure all element in the right side use fluid layout
- In connecting calling state, we need update the bottom bar, please re-use consistent bottom bar like previous screen (screenshot: Web/3 03 Party to Party Call - Outgoing Call Screen-Starting Call.jpg)
- Match size for every caller image placeholder
Incoming Call
screenshot: Web/4 Party to Party Call - Incoming Call Screen.jpg
- Create the separate page show incoming Call screen look
- Overlay covered all page area
- Overlay background not clickable
- Modal placed in the centered of right side area
- Reject button will hide the modal
- Accept button need show big image placeholder in the right side (screenshot: Web/5 Party to Party Call - Connected Call.jpg)
- Show animation for dotted graphic
- In connecting calling state, we need update the bottom bar, please re-use consistent bottom bar like previous screen (screenshot: Web/3 03 Party to Party Call - Outgoing Call Screen-Starting Call.jpg)
- Match active button looks in the right side bar
Conference Tab
screenshot: Web/6 01 Host-side -Initiate - Conference.jpg
- This is Conference tab look
- Show active state for Conference tab
- Add Participant input below tab
- Start button in disable mode by default
- User can add participant after type in the input (screenshot: Web/6 02 Host-side - Adding Participant.jpg)
- Click the add user icon will add new line in the bottom (screenshot: Web/6 03 Host-side -Participant Added.jpg)
- After add one participant, Start button become enable
- User can remove the participant by click “-” button (screenshot: Web/6 04 Host-side -Participants List Added.jpg)
- Show hover state for “-” button
- Click cancel button will toggle of the “Conference” tab
- Click start button showing calling progress in the right side (screenshot: Web/6 05 Host-side -Starting Conference.jpg)
- Host screen connected, full size image show up in the right side (screenshot: Web/6 06 Host-side -Connected.jpg)
- Photo show “Remove” button when hover on rounded photo placeholder
- Match action buttons in the bottom bar
Incoming Conference
screenshot: Web/6 07 Participant-side -Incoming.jpg
- Create separated screen show incoming Conference
- Show Reject button and Join button
- Reject button need hide the incoming message
- Join button need show joined conference (screenshot: Web/6 08 Participant-side -Joined Conference.jpg)
Contact List
screenshot: Web/7 Contact List.jpg
- Contact List show up by click “+” button in the bottom bar
- Contact List need support more than 4 rows
- You can add scrollbar in the Contact List area. Match scrollbar styling
- Scrollbar on desktop need works when user scrolling the mouse roundwheel
- For this screen, you need add Contact List and Participant List in the left side. Storyboard not show Participant list, you need grab from completed prototype.
- Each Contact List and Participant List need show scrolling bar
- In the Contact List, the video and mic icons should be replaced by mini version of Call and Conference icons. From within the list, user can click Call to call the contact directly. Or click Conference to add the conference to the participant list.
- Click Call and Conference icon should load calling in the right side. Refer (3 04 Party to Party Call - Outgoing Call Screen-Connected Call.jpg) & (6 06 Host-side -Connected.jpg)
- When user types or use email or phone number, do not change the icon, take no action; We don’t have a flow for add /modify/delete contact,
Search and Add Contact
screenshot: Web/8 Search for and Add Contact.jpg
- This flow shows up when user click “keypad” button in the bottom bar
- User can just filled with numbers
- User see phone numbers keypad when click the button in the right side of input
- Click related number will reflect to the input text
- Go button placed in the bottom of calling numbers
- Click Go need show photo placeholder in the right side
Add Call
screenshot: Web/9 01 Add Call Initiate - When + Button Clicked.jpg
- This Add Call flow shows up when user click “+” button in the right side.
- This function show up when user still on calling with other contact
- Add Call input on the top of screen
- Cancel button enabled by default
- Add Call button disabled by default
- After user type the email address, Add call button become enabled (screenshot: Web/9 02 Adding Email or Phone Number.jpg)
- Email address format need to be validated?
- Show red border for error validation style
- After click the Add Call button, another thumbnails show up in page (screenshot: Web/9 03 Add Call Done and On Hold.jpg)
- And previous caller showing Pause state
B. Mobile Version
screenshot: Mobile/2 Landing Page.jpg
- On Mobile layout, you just need displayed left side in page
- Make sure content is scrollable when filled with more data
- Call tab look (screenshot: Mobile/3 01 Party to Party Call - Outgoing Call Screen-Initiate.jpg)
- When user click “Grid” icon showing keypad (screenshot: Mobile/3 02 Party to Party Call - Outgoing Call Screen-Adding Phone number and email.jpg)
- After user click Dial button Calling information show up in the bottom of page (screenshot: Mobile/3 03 Party to Party Call - Outgoing Call Screen-Starting Call.jpg)
- After calling connected (screenshot: Mobile/3 04 Party to Party Call - Outgoing Call Screen-Connected Call.jpg)
- User can set full screen mode that will covered all screen area (screenshot: 3 05 Party to Party Call - Outgoing Call Screen-Connected Call-Fullscreen.jpg)
- User can turn off the fullscreen view by click the right button in bottom bar
- This is screen when user get incoming call (screenshot: 4 Party to Party Call - Incoming Call Screen.jpg)
- Modal window placed centered of page.
- After user answer the call (5 Party to Party Call - Connected Call.jpg)
- This is how Conference tab look (screenshot: Mobile/6 01 Host-side -Initiate - Conference.jpg)
- User can add Participant (screenshot: Mobile/6 02 Host-side - Adding Participant.jpg)
- And ability to remove them (screenshot: Mobile/6 03 Host-side -Participant Added.jpg)
- Connecting to conference screen (screenshot: Mobile/6 04 Host-side -Participants List Added.jpg)
- Click Start button need show the modal (screenshot: Mobile/6 05 Host-side -Starting Conference.jpg)
- Screen when host connected (screenshot: Mobile/6 06 Host-side -Connected.jpg)
- Participant Incoming Calling Screen look (screenshot: Mobile/6 07 Participant-side -Incoming.jpg)
- Screen when participant connected (screenshot: Mobile/6 08 Participant-side -Joined Conference.jpg)
- This is how Contact List look (screenshot: Mobile/7 Contact List.jpg)
- User can search and add contact (screenshot: Mobile/8 Search for and Add Contact.jpg)
- After Call initiate calling screen show up in the bottom (screenshot: Mobile/9 01 Add Call Initiate - When + Button Clicked.jpg)
- After add email address (screenshot: Mobile/9 02 Adding Email or Phone Number.jpg)
- After new calling added to page (screenshot: Mobile/9 03 Add Call Done and On Hold.jpg)
- Full screen view look (screenshot: Mobile/9 04 Add Call Done and On Hold Fullscreen.jpg)
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)
- Each element (icon or action label) should be individual placed at the same location so that user can optionally hide/unhide, enable/disable them without changing the locations of other elements.
- 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.
- You can use Jquery or Jquery mobile. Also, feel free to confirm with us in challenge forum if you have different framework when build the prototype
Windows & Mac OS
- Firefox latest version
- Chrome latest version
Tablet/Mobile
- Chrome Mobile