Previous Project

Contact

Next Project Close

Design Features for Telegram Contest 2024

If Romeo and Juliet used Telegram, they would survive.

Contest

The task was to create 3 short demo videos for 3 different new features for iOS and Android in the Telegram Blog.

Idea

Romeo and Juliet died because the message from Lorenzo got lost because they didn’t use a secure messenger. To support the theme, I also made thematic background.

Custom background with the skull, rose, heart and other elements from the story

iOS: Create Appointment from Message Text

I always have to rewrite appointments from Telegram to my calendar and dream that it would be parsed automatically. The scenario:

  1. User writes date and time in the message.
  2. App parse date and time and make it active.
  3. User could click on the ADD TO CALENDAR button (jump to step 6) or with long tap open dialog.
  4. In the dialog, user could choose between options: Add to Calendar (skip to step 6), Edit and Add to Calendar (next step), and Remind Me Here (already exists in Saved Messages).
  5. Show application dialog with calendar and location. User could edit the date, time and location.
  6. After clicking the Save button, user will see the message with proof that event was added to system calendar.
  7. The event appears in the system calendar.

First 4 steps from initial message till parsing date time and dialog Last steps from editing event datetime and location and watching final result

iOS: Hide messages from certain users

Sometimes in group chat you need to write a message for a group of people only and hide it from a specific person. The scenario:

  1. User wrote the message.
  2. User make long tap on the send button.
  3. Application displays a dialog with options: Send without sound, Schedule message (existing features) and Publish only for specials (next step).
  4. App shows dialog with list of chat members and suggestion to send to selected contacts only or to everyone except contacts.
  5. User selects contacts from the list.
  6. (Optional) User could create a new chat with typed message and selected members.
  7. (Optional) User could choose rule/group for future.
  8. App could publish a message and show who could see the message.

First 4 steps from writing the message to choosing users from group for reading this message Last 4 steps in scenario with creating new chat with chosen group, saving selection for future and publishing message for some of the users

Pin-Code to Delete All Questionable Messages

Sometimes you need PIN-code that not only save your data but delete all compmising chats. The scenario:

  1. User for logging in type the PIN-code.
  2. App check the PIN-code. If the PIN-code is ordinary then auth starts if the PIN-code is special then only previously chosen chats would be visible and auth is starting.
  3. User see only selected before chats and messages.

PIN-code typing Logic between different PIN-codes and result

Problems and Insights

All designs and states were made in Figma. But it was a bad decision to use CapCut for animation because of the poor work with keyframes.

I prefer to make storyboards then animation.