Telegram Design Contest

Две недели работы — и вот я готов поделиться своим решением конкурсного задания от Телеги 📱

Задание получилось довольно объемным: нужно было с нуля создать новую экосистему Nodes внутри сервиса и адаптировать решение под iOS и Android в светлой и темной темах.

Начал я с понимания того, что такое ноды и зачем пользователю выбирать их, а не обычные группы. Для этого изучил, как устроены серверы в Discord — в чем их суть и принципиальные отличия от привычных чатов. В задании также говорилось, что решение должно быть ready for dev, то есть нужно по максимуму использовать то, что уже есть, и не изобретать велосипед. Поэтому из основных фич нодов я выделил несколько, близких к уже реализованным:

1) Интеграция ботов, в том числе ИИ, которые могут использоваться участниками нодов и модерировать каналы и треды

2) Треды. Если в канале появляется side talk, не относящийся к теме, его можно перенести в тред, чтобы поддерживать порядок в беседе

3) Интеграция аппов в видеозвонки. Пользователи смогут использовать встроенные аппы Телеги как для рабочих задач (транскрибация беседы, доска для мыслей), так и для развлечений (квизы и другие совместные игры)

4) Приложения в каналах. Можно добавить приложение в канал и, например, вместе с другими участниками зарубиться в Веселого фермера 😀

В своем решении я ограничил пользователя одним Node-профилем на аккаунт. Внутри этого профиля он может создавать сколько угодно нодов на разные тематики — работа, друзья и так далее.
Присоединиться к ноду можно по пригласительной ссылке или найдя его в общем поиске, если нод публичный. Также сама Телега будет рекомендовать ноды по схожим тематикам.

Поиск точки входа
Затем перешел к поиску точки входа. Первая идея — разместить ее в шапке и переключаться между чатами и нодами. Но я быстро отказался от этого решения, потому что:
— Ноды — это не вид чатов, а отдельный сервис со своим профилем, сообщениями, контактами и звонками.
— В шапке и так много навигации, которую нельзя трогать, так как она связана со сторис и эмодзи-статусом — фичами, важными для конвертации обычных юзеров в премиум.
В общем, после нескольких заходов я решил, что лучше всего оставить навигацию в нескольких точках:
— Долгое нажатие на кнопку настроек раскрывает все аккаунты и связанные Node-профили.
— В Node-профиль можно перейти из раздела «Настройки».
— Двойной тап по кнопке настроек переключает пользователя с основного аккаунта на Node-профиль. Такое же решение используется в Инстаграме, поэтому подумал, что для пользователя это не будет чем-то из ряда вон.

Проектирование экрана нодов
После определения точки входа перешел к проектированию самого экрана нодов. В задании было несколько моментов, которые нужно учесть. Во-первых, упоминалось, что навигацию в нодах предлагается реализовать в виде левого сайд-меню, через которое можно вернуться в основной профиль и переключаться между нод-профилями. Ну и что идею можно подсмотреть в Discord.

При создании решения для IOS я уже знал, что навигация в андроидовской Телеге отличается кардинально, поэтому это не стало сюрпризом. Спасибо ребятам из Свеженьких, которые поделились скринами. Затем на помощь пришел мой старенький Meizu, на котором я продолжил изучать структуру андроидовского решения.

Финальный босс
В конце меня ждал финальный босс — анимация решения в After Effects. Изначально я выделял на это минимум два дня, но со всеми темными и светлыми темами у меня остался всего один день. Когда я сел за анимацию, стало понятно, что этого точно не хватит. А без анимации все 100500 макетов можно выкидывать. Я начал переживать, но тут повезло — срок сдачи продлили на день, и это помогло доделать решение (даже получилось жидкое стекло сделать)

Итоги
Результаты будут позже, но уже сейчас могу сказать, что вынес много полезного из всего процесса.
📱 Фигма-файл, макеты и 📷 превью можно посмотреть в специальном конкурсном канале

💬 Тултип