Android Design Competition 2021

The task in this competition is a UI and UX redesign for voice and video calls on Telegram for Android, including private calls and group calls in Voice Chats.

Русская версия этого документа

Deadline: August 1, 23:59 Dubai Time.

Prize fund: at least $30,000 – from which the 1st place winner will receive $10,000 if any submissions qualify for the 1st prize.

The Task

Develop a comprehensive concept of voice and video calls for Telegram X on Android that includes one-on-one calls, as well as group calls in voice chats.
Start from scratch, carefully considering every detail and each interaction.
Unify common components and interface logic, making sure that elements that do similar things require similar interactions from the user.
Create simple and accessible interfaces.

The winning design may be implemented in Telegram X for Android as part of an upcoming contest for Android developers.

Submission format

Closer to the deadline, you will be able to submit an archive with your design to @ContestBot. The archive must contain all the resources a developer would need to implement your interface — this includes screen layouts, animations, icons, logic description (where needed).

The layouts can be implemented as static .png files and animated .mp4 movies without sound for animation demos.
Your archive may also include source files.
If you include videos, all key frames must also be provided as static .png files (to be used by developers as a reference for element size and layout dimensions).
Icons must be in the vector drawable format with 24x24 viewportWidth and viewportHeight (display color is determined by the app theme, the display size is determined by the width and height properties inside the vector drawable). Material icons are allowed.
If you use complex animated icons (such as the person waving their hand in the current implementation of voice chats), you must use the lottie json or .tgs format.

For more information on the suggested contents of your archive, see the Checklist below.

Creative ways of making it easier for a developer to interpret and implement your design are likely to get you bonus points. (For example, providing Figma/Sketch layouts in addition to the basic .png and .mp4, etc.)

Evaluation criteria

Our judges will look for simple and intuitive interfaces, executed with attention to detail.

Any animations you implement must be clear, used only when appropriate, and never require the user to wait for them to end before doing something.

We expect comprehensive archives that include everything a developer might need to implement the interface (developers shouldn't have to guess how certain elements should look or work).

An ideal submission for this contest could be used to immediately start another contest with the goal to add private voice/video calls and voice chats to Telegram X for Android.

Suggested Approach

This section lists some examples of the things you should consider in your project. The list is not exhaustive, rather it is meant to give you an idea of what kind of thinking might bring you closer to winning in this contest.

We've also included a Checklist with a list of suggested layouts below.

Edge Cases

When considering edge cases, always remember that your main objective is to keep things simple for the majority of users. Support for edge cases must not affect basic usage.

For example, if a device only has one microphone, turning it on should require one simple tap. In the edge case where two microphones are connected and it is impossible to determine which one is the default, the app could require another tap asking which of the microphones should be used — but this must not affect any of the cases where this is obvious.

Input and Output Controls

Input and output controls must always adapt to the list of built-in and connected devices and other options available at a given moment.

Mute/unmute controls could work the same way in private calls and voice chats (with push-to-talk when muted) — the only difference would be in the initial state when you join the call (in voice chats it's muted, in private calls it's unmuted).
Input/output controls should work the same way both in voice chats and private calls, whenever possible: a) a simple on/off toggle when only two options are available; b) a selector when several options are available and the default one can't be determined (e.g. choosing audio output when several devices are connected); c) On/off mode with a hidden selector for advanced users, when the default option is known (e.g. changing the microphone to the phone's built-in microphone when headphones with a microphone are connected);
Screensharing must be available in both private calls and voice chats. Note that broadcasting both screen and camera video simultaneously is currently only supported in voice chats. In private calls, it's only possible to broadcast one video stream at a time. This may change in the future.

We suggest thinking through each of the following scenarios:

Microphone

One mic available, a simple on/off toggle may be used.
Ability to speak is restricted, must raise hand first (voice chats).
Two mics are available, the default one is known (e.g. headphones with a mic are connected, the headphone mic will be the default; however, it could be possible to switch to the built-in mic too).
Several mics are available and the default one is not known (e.g. a wireless and an analog mic are connected at the same time; the app could offer a choice of microphones after the first time input is activated — and remember that choice later).

Sound

Two output sources are available (speaker and loudspeaker in the most common scenario), a simple toggle may be used.
Just one output is available (just one speaker on some tablets).
One or more built-in output sources and one external output available. The default output source will be determined by the system. However, it could also be possible to switch to a different source.
One or more built-in output sources and several external output sources are available.

Video

Two built-in cameras available (front and rear in the most common case)
Only one camera is available (some devices only have a rear camera)
Screencasting is available (may not be available on some devices).
Screencasting is available in parallel to the regular camera broadcast (may not be available on some devices).
Application used by the other party doesn't support video calls (can neither receive, nor send video)
External cameras / alternative video sources are available (edge case, but could be considered)

Private calls

Incoming calls must always leave the current UI unchanged (i.e. after declining an incoming call, the user must see exactly the same UI that they saw before receiving the call).
There are no restrictions on design, except those that are technical (such as missing permissions).
When receiving an incoming call while already in an ongoing call, the UI must offer to answer it, instead of auto-rejecting the new call.

Voice Chats

Remember that you're free to come up with any concept. For example, you could go for a grid view instead of a list of participants. For another example, you could display active speakers differently (as opposed to a constantly shuffling list of participants).

Picture-in-Picture

If the user hasn't allowed Telegram X to draw over other apps, use the regular Picture-in-Picture logic inside the app, and a system notification outside the app.

If the user gave the app permission to draw over other apps, use Picture-in-Picture logic across the system. A system notification might still be shown for technical purposes.

Bonus Ideas

Below are some examples of other things you may want to consider. You are free to focus on other details instead if you can think of something which would be relevant more often and for a higher percentage of users.

Microphone Testing

Users may find it useful to test how exactly other people will hear them during personal calls and voice chats. One way to implement this feature might be via a separate screen with a entry point in settings (where all options for advanced users are currently located).

Disconnection Notification

The signal strength indicator currently implemented in Telegram apps shows that connection issues exist but doesn't explain which side is causing them — even though it is sometimes technically possible to determine this.

The app could display different warnings for issues on your side, on your partner's side, and when their source can't be identified.

Checklist

Below are some of the required layouts. This list is by no means complete but contains things that certainly shouldn't be forgotten.

One-on-one calls

Incoming voice/video call and process of rejecting/accepting and establishing connection
Incoming voice/video call when the app is closed (if different)
Incoming voice/video call with a clear indication of which user is being called (when multiple accounts are logged in the current app)
Starting outgoing voice call with key exchange and connection establishing
Starting video call with key exchange and establishing connection
Finishing voice/video call
Losing and restoring connection during an active call
Managing microphone settings in different scenarios
Selecting output device in different scenarios
Enabling/disabling camera broadcast (with preview before enabling)
Switching cameras (e.g. from front to rear and back)
Starting/ending a screencast
Switching from/to camera to/from screencast
Start/end of a video stream from the other party
Rotating video orientations (from both sides)
Displaying the status of the other party’s microphone
Displaying the status of the other party’s battery (when it’s low)
Picture-in-Picture

Voice chats

Creating a voice chat, connecting to a voice chat
Active discussion between several participants (“speaking” status updates)
Creating and starting a scheduled voice chat
“Display me as…” before and after joining a voice chat
Editing voice chat title
Toggling permission of whether new members can speak or not
Recording a voice chat
Enabling/disabling camera broadcast (with preview before enabling)
Switching camera while broadcasting (e.g. from front to rear and back)
Enabling / disabling screencast
Enabling / disabling screencast during camera broadcast (and vice versa)
Start/end of a video stream from another party (parties)
Focusing/pinning a video stream to make it fullscreen
Changing volume of specific participants
Muting a participant only for yourself
Mute / Raise Hand / Allow to Speak flow
Changing screencast volume
Displaying “video is only available for the first X members”
Picture-in-picture
Ending the voice chat

Chat and chat list interfaces

Displaying that a voice chat is active from the chat list
Entry point to join an active voice chat while inside a chat
Entry point for creating a voice chat