iOS Contest 2023 (Call UI)

The Task is to implement a redesigned flow for audio and video calls in Telegram for iOS based on the provided mockups. The submission must precisely reproduce the provided design – this includes all elements, their colors, proportions and positioning on the screen, as well as all animations and transitions:

Resources

  • The archive containing all the mockups and visualizations is available here. For Figma, follow this link.
  • The source code of Telegram for iOS is available on GitHub.

Contest Requirements

  1. No third-party UI frameworks are allowed.
  2. Your implementation must not affect app performance (for more details, see the Optimizations section).
  3. Your changes should not interfere with the basic functionality currently implemented in calls or with the stability of calls. This means your changes must not introduce any crashes or audio/video issues (such as display problems with video output, etc.).
  4. The contest features and interfaces must be built from scratch. Using any third-party implementations to add the contest animations or transitions is not allowed. Entries violating this requirement will be disqualified.

1. Call Background

1.1 General Info
The Call Background is a gradient based on 4 anchor points. You may reuse this component from Telegram for iOS – when sending messages, the app applies chat background transitions by crossfading static images.

1.2 State Color Logic

  • Initiating Call. When a call is being initiated, the app should start an animation cycle with a “Blue-Violet” background.

Initiating a Call

  • Call Established. Once a call is connected, the background should switch to “Blue–Green”. For the transitioning order, refer to 'Visualization.mp4'.

Established Call

  • Weak Signal. If the ongoing voice call is affected by weak network conditions, the app should switch the background to “Orange-Red”. This background is never used in the general transition queue and is reserved for weak signal conditions.

Weak Network Signal

2. Design References

For gradient color parameters, precise layout and more, refer to the Figma file.

3. Profile Picture Waves

You may reuse this component from Telegram for iOS – spheres with dynamic shapes are used when recording voice messages and when participating in video chats. In the redesigned call interface, they should represent the volume of the call partner's voice.

4. Emoji Key

The app must display the tooltip below the emoji key combination in all calls until the user taps it at least once. After that, showing the tooltip is no longer required.

Emoji Key

5. Rate Call Screen

The app should present a Rate Call screen if prompted by the server. Pressing any value should produce an animated effect inside the star box. The app should additionally play a fullscreen effect, when a call is rated with 4 or 5 stars.

Rate Call Screen

Optimizations

To preserve battery life, once a call is established, whenever the interface is idle for 10 seconds:

  • Background transitions should be paused. To prevent the interface from freezing between color states, the app should switch the background color to one of the main color states.
  • Profile Picture Waves should gradually stop after the call lasts 10 seconds or more. If the proximity sensor indicates that the user is holding their device near their ear, the waves should be paused immediately, even if fewer than 10 seconds have elapsed.

Both background transitions and profile picture waves should resume if the user starts interacting with the interface again.

Questions, concerns and more

For further clarifications and requests regarding the contest task, refer to the official Telegram Contests group. Kindly include #ios_calls with any questions.