Главный экран, который клиент собирает сам

Контекст

• Платформа: веб, десктопная и мобильная вёрстки.
• Команда: продакт, техлид, аналитик, 3 разработчика, 3 тестировщика.
• Период: декабрь 2025 – июль 2026.

Проблема

Рабочий стол задумывался личным пространством клиента — как домашний экран iOS или Android, где виджеты каждый расставляет под себя. Но настроить здесь можно было только состав: включить или выключить виджет из списка чекбоксов на отдельной странице. Вдобавок на мобильной вёрстке цвет был только на свёрнутой шторке, а при развороте стол становился серым.

У десктопной вёрстки был размер XS в треть ширины, которого не было в мобильной — собранный на одной платформе стол съехал бы на другой, поэтому такая сетка делала кастомизацию невозможной.

Моя задача

• Убрать размер виджетов XS и свести десктоп с мобильной вёрсткой к одной сетке
• Вернуть цвет шторке на мобильной вёрстке
• Спроектировать режим редактирования: перемещение, удаление, выбор размера виджетов
• Превратить список чекбоксов в галерею виджетов с полноценным предпросмотром и выбором размера
• Придумать способ продвижения виджетов

Решение

1Одна сетка на все устройства

Первым решением я убрал размер XS. Это закрыло сразу два долга: исчез супермелкий блок, под который пришлось бы отрисовывать состояния каждого виджета, а сетки десктопа и мобильной вёрстки наконец совпали.

2Цвет вернулся на рабочий стол целиком

Оказалось, решение с серым рабочим столом продиктовано техническим ограничением мобильных браузеров: статус-бар не может быть прозрачным и имеет только один сплошной цвет. При этом настройка цвета находилась на экране с чекбоксами и его смена подтверждалась снекбаром, а видно цвет только в свёрнутой шторке.

Я замаскировал стык между шторкой и статус-баром накладным переходным градиентом и перенёс настройку цвета прямо на стол: пользователь нажимает «Настроить» и видит, как стол перекрашивается на глазах.

3Рабочий стол стал редактируемым

Переместить, изменить размер или удалить виджет раньше было нельзя нигде — режим редактирования появился впервые. Я спроектировал его на паттерне iOS: покачивание виджетов — язык, знакомый по домашнему экрану айфона, а в нашей аудитории на мобильной вёрстке преобладают устройства на iOS. Для более живой анимации покачивания я написал CSS с рандомизацией фазы для каждого виджета.

4Список чекбоксов стал галереей

Виджеты получили обложки, предпросмотр и выбор размера ещё до добавления. Обложки рисовали иллюстраторы, а согласовывали мы в паре с арт-директором.

5Блок продвижения и уведомление о новых виджетах

Под рабочим столом появилась карусель «Подборка виджетов»: в ней показываются новые виджеты, а ещё продуктовые команды могут продвинуть там свои. Когда в галерее выходит новинка, точка-уведомление появляется сразу в двух местах: на самом виджете и на кнопке «Добавить виджет».

Результат

Рабочий стол теперь собирается под пользователя: цвет, состав, размер и порядок виджетов — на десктопе и на мобильной вёрстке одинаково.

Только через карусель «Подборка виджетов» клиенты добавили 2,5 тыс. виджетов за июнь. За первые два месяца после релиза:

+12%

переходов в «Настроить» за май — июнь

+60%

еженедельных добавлений виджетов за месяц

Итоги работы и выводы

• Первым шагом кастомизации стало выравнивание сеток: без него остальные фичи не имели смысла
• Удалось вернуть цвет шторке одним простым фиксом
• Редизайн галереи виджетов привёл к росту ключевых метрик, и это закономерно: пользователи выбирают глазами

← Предыдущий кейс — «Сквозной поиск»

Следующий кейс — «Кредитные карты» →