Challenge Summary
Welcome to the AT&T WebRTC Video Conferencing UI Design Concepts Challenge. The goal of this challenge is to design a video conferencing call interface, built on WebRTC, for use on both desktop and mobile. This is going to be a high visibility project for a big brand, and the opportunity to design something really functional!
Round 1
Please submit your designs for (at least) all screens in the Conference Call User Flow, for checkpoint review.
Round 2
Please submit all required screens (both Party-to-Party Calls, and Conference Call User Flow), after incorporating checkpoint feedback.
Challenge Description:
AT&T, a multinational telecommunications company, is looking to build a WebRTC based Voice and Video Conferencing system. This system should allow participants to dial telephone numbers and video and voice chat with other users. It should also allow some customization so that developer can easily add this chat client into other applications. Customization will be allowed so that the developer and customize and brand this tool to meet their needs.
Required Screen Sizes:
- Desktop Standard Size: 1100px width and variable height as required
- iPhone 6 Size: 750px x 1334px
Please design desktop-first, and then show at least two (2) screens in each (conference and party-to-party call user flows) for mobile.
Supporting Documents:
- ATT_Logo.zip
- Color_Pallette.zip (color guidelines)
- ATT_Screenshots.zip (These are screenshots of the application built for testing purposes, not to be used as part of the new design. They are only for outlining the basic functions of the video conferencing application)
Fonts and Colors:
- Typography: The brand fonts are ClearviewATT and Verdana. You can use similar fonts if you do not have these.
- Please follow colors according to attached Color_Pallette.zip (color guidelines)
Design Goals:
- The application should be easy to use, think simple but effective solutions
- We are looking for modern responsive designs including best UI practices, make sure the application is visually appealing. Design desktop-first, and make sure your design is adaptable for mobile too.
- Should be able to easily toggle between modes: Call and Conference
- This will be built on WebRTC platform, you can see its features here: http://www.webrtc.org/web-apis/chrome
User Flow:
A basic user flow is outlined in the test-application screenshots attached. The kind of person using this app would be a user/person that wants to call, video chat, or instant message to another person. These would typically be people you know, close friends, customers or co-workers.
- There are basically two modes of operation: Party-to-Party calling (individual), or Conference Calls.
Branding Guidelines:
- AT&T branding guidelines, see attached (?)
Design Requirements:
We need you to design the user experience for this interface, incorporating all the required functions. These are the core features that the application must include:
- AT&T Enhanced WebRTC Core Functions
- Real Time Chat
- Keypad
- Calling Modes: Party-to-Party Call or Conference Call
- Media Options: Audio only or Video
- Recipient Options: US domestic telephone number or email address
These are the available Party-to-Party Call Functions, grouped by scenario:
Outgoing Call:
- Dial
������- Cancel
Incoming Call:
- Answer
- Reject
Connected Call:
- Hangup
- Mute and Unmute
- Hold and Resume
- Move (same user, different logged in device)
- Add Call (dial a 2nd call and put current call on hold)
���- Switch (toggle between current call and background call)
These are the available Conference Call functions:
Host-side - Initiate
- Start (initialize the conference)
���- Cancel
Host-side – Initiated Conference
- End
- Add Participant(s) (invite other parties to join by dial a telephone number or email address)
- Get Participant List (get a list participants)
- Remove Participant(s)
- Hold and Resume
- Mute and Unmute
- Add Call
���- Switch
Participant-side – Incoming
- Reject
���- Join Conference
Participant-side – Joined Conference
- Hangup
- Hold and Resume
- Mute and Unmute
- Add Call
���- Switch
Screen Requirements:
This is a basic outline/suggestion of screens we would like to see, you may provide a different set of screens as per your UX solution, you do not need to stick to this or the provided screenshots, just look at the features required and see how to best incorporate them.
1) Login Screen:
Needs to include
- AT&T Logo
- Username and Password fields
- What should be the first screen the user sees upon Login? A list of contacts, the keypad, recent notifications? Whichever makes for the best user experience, please design a landing page accordingly.
- The user needs to be able to toggle between Call mode and Conference mode, think of a way to easily toggle between the two modes.
3) Party to Party Call - Outgoing Call Screen
- Incorporating features as listed above
4) Party to Party Call - Incoming Call Screen
- Incorporating features as listed above
5) Party to Party Call - Connected Call
- Incorporating features as listed above
6) Conference Call - Initiate / Initialize Conference
- Including related screens like Add Participant, View List of Participants, etc. Think of features that could be useful in a conference call situation.
7) Contacts List
- List of contacts that the user frequently calls
8) Search for and Add Contact
- The user can search for other users based on US telephone number, or email address
Target Audience:
- AT&T Users looking to connect with people they know (both personal or professional contacts)
Judging Criteria:
- Cleanliness of your graphics and design.
- Creativity, user experience and ease-of-use
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.