Кампус — приложение с расписанием пар, лентой «Подслушано» и анонимными отзывами на преподавателей. Работает на Android и iOS.

Бизнес построил стратегию монетизации: увеличить количество пользователей, повысить их вовлечённость и продавать контекстуальную рекламу внутри приложения.

Мои задачи в рамках стратегии

• Визуально обновить Android-приложение, чтобы сохранить текущую аудиторию и создать основу для привлечения новой.
• Сделать ленту «Подслушано» со сторисами, чтобы повысить вовлечённость пользователей.
• Встроить рекламные блоки внутрь приложения.

Результаты бизнес-стратегии и улучшений Android- и iOS-приложения

• Раньше пользователи заходили в приложение в среднем 32 раза в месяц на 35 секунд, а стали заходить 81 раз на 39 секунд.
• Количество пользователей увеличилось с 247 000 в 2021 году до 750 000 в 2023 году.
• 244 000 активных пользователей в пиковые месяца.

Итерационно вернул Android-приложение «из прошлого века»

Прежде чем добавлять ленту, сторисы, рекламу и привлекать новую аудиторию, я доработал существующий функционал и привёл в порядок нативную навигацию, компоновку экранов, цвета, типографику и иконки.

Расписание занятий

Страница занятия

Переходы к вложенным страницам сделал полноэкранными:

Избранные расписания

Перенёс переключение между избранными расписаниями из настроек на главный экран и добавил в выпадающее меню поиск расписания другой группы или преподавателя.

К примеру, если нужно встретиться с друзьями из другой группы или передать работу преподавателю, а его нет на кафедре:

Настройка избранных расписаний
По умолчанию избранные расписания отображаются в порядке добавления. Порядок можно изменить в настройках:

Отзывы о препродавателях

Студенты анонимно оставляют отзывы, которые помогают другим составить первое впечатление о преподавателе до пары или экзамена. Если кто-то напишет ложь, его задизлайкуют.

Страница преподавателя

Написание отзыва

Оформление

В приложении были нейтральные светлая и тёмная темы, в которых можно менять основной цвет.

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

• «После обновы пропала тёмная тема, вернее она осталась но это скорее голубой в темных тонах».
• «Добавьте тогда уж чёрную тему».

Поэтому вернул темы в нейтральные тона:

Я допустил ошибку, забрав у пользователей привычное оформление. Вместо этого стоило оставить нейтральные темы и добавить цветную как эксперимент.

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

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

Лента «Подслушано»

Место, где студенты вуза делятся трешовыми историями, шутят, обсуждают моральные ценности, популяцию кенгуру и ищут вторую половинку.

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

Добавили пост дня, который выбирался среди всех вузов по количеству лайков за предыдущий день:

Закреплённая кнопка «Предложить пост» закрывала посты и создавала визуальный шум, когда появлялась или исчезала при смене направления прокрутки:

Когда появилась строка сторисов, перенёс в неё пост дня и кнопку «Предложить пост»:

К истории «Пост дня» прикрутили нейронку, которая генерировала контекстную картинку. Нейронка делала такие же трешовые картинки, как и сами посты, поэтому студенты ловили «ха-ха»:

Эту сторис для кейса сгенерировал ChatGPT в 2026 году без дополнительной настройки промпта. Получилось уже не так трешово.

Сторисы открыли дорогу к новым форматам взаимодействия с пользователями: подборкам смешных постов, голосованиям за лучшего преподавателя, предложениям стажировок и вакансий, рекламе курсов для подготовки к сессии.

Вывод

Я подготовил Android-приложение к привлечению новой аудитории и маркетинговой активности: обновил существующий интерфейс и добавил ленту «Подслушано» со сторисами как основу для рекламных форматов.

Заложенная мной основа помогла начать реализовывать бизнес-стратегию. Текущая продуктовая команда продолжает развивать её в новых сценариях, рекламных форматах и механиках вовлечения.

Что было самым сложным

Впервые столкнулся с обратной связью от полумиллиона пользователей, на которых раскатили обновление.

Как я с этим справился
Мы вместе с ЛПР собрали проблемы из отзывов пользователей, обсудили их и я внёс корректировки в дизайн.

Что сейчас происходит с продуктом

Я занимался дизайном приложения и поддерживал его в ходе разработки с середины 2022 до середины 2023 года.

В 2024 году продукт зарабатывал и инвестировал всю прибыль в развитие.

На 2025 год:

• Количество пользователей iOS- и Android-приложения превысило 1 000 000.
• В среднем пользователи заходят в приложение 109 раз в месяц.
• В пиковые месяцы приложение набирало 350 000 активных пользователей.

Посты и отзывы, показанные в кейсе, отражают частные субъективные мнения пользователей. Разработчики приложения не присоединяются к мнению их авторов.

Евгений Смирнов
Дизайнер

Евгений Гребенщиков
Арт-директор

IceRock Development
Команда разработки

Электропочта • Телеграм

В приложении пользователи выбирают оконные профили и фурнитуру, взаимодействуют с их интерактивными 3D-моделями и отправляют заявку на расчёт стоимости, замер и изготовление окон. К заявке можно приложить черновик окна, созданный в калькуляторе.

На проекте

1. Собрал схему связи сервисов между собой и согласовал её с аналитиками.
2. Продумал навигационную модель интерфейса, взяв за основу линейно-параллельную навигацию каталога.
3. Вместе с Backend-разработчиком унифицировали визуальное отображение окна, чем упростили создание его вариаций в админке и ускорили отрисовку моделей в приложении.
4. Инициировал внедрение брендированных иллюстраций, чтобы усилить визуальную идентичность продукта и упростить передачу состояний интерфейса.
5. Обсуждал реализацию интерфейса с разработчиками и находил альтернативу спорным решениям.

Клиент

VEKA Rus — дочерняя компания концерна VEKA AG — мирового лидера в производстве оконных конструкций с годовым оборотом 1,5 млрд. €.

Задача

Бизнес решил объединить приложения «Каталог VEKA», «Замерщик окон 2.0», «VEKA Конфигуратор AR», «VEKA Калькулятор» и административную панель в единый сервис. Это должно сократить время создания, обработки и выполнения заявок от клиентов.

Моей задачей было спроектировать интерфейс, который свяжет сервисы между собой на функциональном и навигационном уровнях.

Решение

Спроектировал интерфейс с бесшовной навигацией и двусторонней связью между каталогом, калькулятором и формой заявки.

Калькулятор как самостоятельный раздел приложения

Эргономика элементов управления
Человек меняет параметры окна и комбинирует их в произвольном порядке, поэтому окно настраивается на одном экране, а не пошаговой формой:

Поля ввода
В горизонтальной ориентации клавиатура занимает половину экрана, поэтому поля ввода планировал открывать в модально-диалоговом окне, чтобы не прокручивать форму:

Во время обсуждения с разработчиками выяснилось, что реализовать стабильное поведение модального окна над клавиатурой не получится. Поэтому остановились на варианте с прокруткой формы при фокусе на поле ввода:

Модальное окно
Расположил модальное окно с выбором ламинации в правой части экрана, чтобы палец после нажатия на поле мог сразу взаимодействовать с ним без дополнительного движения к центру экрана:

Идея пришла не сразу. Чтобы реализовать её, пришлось бы менять расположение модальных окон в уже готовом дизайне, поэтому в финальной версии модальное окно осталось по центру:

Оптимизировали визуальное отображение окна
Раньше дизайнер под каждую комбинацию створок рисовал отдельную 3D-модель, а админ вручную назначал нужную картинку для каждого набора условий.

Проблемы:

1. Тяжёлые картинки долго рендерились.
2. Нагружалось хранилище сервера.
3. Админ мог ошибиться при выборе нужной картинки из множества вариантов.

Вместе с Backend-разработчиком пришли к системе из основ конструкций и набора створок, которые админ может комбинировать с помощью сдвигов по координатам.

Основы конструкций:

Створки:

Красивые модели окон остались в каталоге. В калькуляторе важнее быстро различать конструкцию окна, поэтому визуально упростил модели.

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

Сейчас я бы улучшил интерфейс
Снизил визуальный шум, увеличил изображение окна и разделил кнопки иерархией:

А ещё лучше — подумал, как превратить калькулятор в интерактивный лендинг, который совмещает рассказ о продукте с его настройкой.

Связь созданного окна в калькуляторе с формой заявки

Шаг 1 — контактные данные
После нажатия на кнопку «Рассчитать стоимость» открывается форма заявки. Если пользователь авторизован, контактные данные заполняются автоматически:

Шаг 2 — окна для расчёта
Отображается окно, которое пользователь только что создал в калькуляторе. Можно скорректировать размеры, профиль и цвет фурнитуры, добавить москитные сетки и монтаж:

Шаг 3 — уточнения

Брендированные иллюстрации
На страницах брендбука нашёл форменные «наряды» сотрудников. Появилась идея создать иллюстрации, которые передают ценности бренда, усиливают идентичность продукта и помогают объяснять состояния системы на человеческом языке.

Подготовил презентацию для клиента о том, зачем бренду и интерфейсу нужны иллюстрации, и отрисовал концепты:

Составил задание, а иллюстратор превратила концепты в готовые к релизу иллюстрации:

Иллюстратор спросила, делать персонажей в полный рост или по пояс. Я выбрал второе, потому что действие на иллюстрациях происходит в верхней части тела. Смысловая часть увеличилась в размере и стала быстрее распознаваться:

С каждой страницы продукта в каталоге можно перейти в калькулятор с предзаполненными параметрами окна

Например, профилем и его ламинацией:

Добавил хлебные крошки с выпадающими списками, которые позволяют переключаться между разделами каталога и страницами продуктов внутри текущей категории.

Например, можно переключаться между детальными страницами продуктов одной категории, чтобы сравнить их:

Или перескочить в другой раздел каталога. Например, выбрать дверь после просмотра окон:

С каждой страницы продукта в каталоге можно оформить заявку на расчёт стоимости и изготовление

На втором шаге заявки можно выбрать окна для расчёта, которые были созданы в калькуляторе:

Или создать новое окно:

Вывод

Удалось ли спроектировать интерфейс, который свяжет сервисы между собой на функциональном и навигационном уровнях?

Да. Я объединил каталог, калькулятор окон и форму заявки в единую систему с бесшовными переходами между сценариями выбора, настройки и оформления окон. Покупатели могут в одном месте принять решение о покупке окон.

Что было самым сложным

Сохранить паттерны навигации, которые сложились в существующих сервисах.

Как я с этим справился
Разобрался, как устроены существующие сервисы и как они будут связаны между собой. После этого придерживался правила: навигация должна быть последовательной и обратимой.

Что сейчас происходит с продуктом

Приложение выпущено в 2023 году. После выпуска я завершил участие в проекте.

Дизайн сделал в середине 2022 и поддерживал его в ходе разработки в 2022—23.

Евгений Смирнов
Дизайнер

Евгений Гребенщиков
Арт-директор

IceRock Development
Команда разработки

Электропочта • Телеграм

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

На проекте

1. Проводил ревью iOS-версии дизайна и формировал предложения по адаптации интерфейса под Android и улучшению кастомных элементов.
2. Корректировал свои предложения с учётом ограничений разработки.
3. Согласовывал результаты ревью с арт-директором, дизайнером клиента и самим клиентом.
4. Дизайнил интерфейс Android-приложения для телефона и планшета.

Клиент

FlippingBook предоставляет ИТ-решения для работы с флипбуками компаниям из Fortune 500. Флипбуки — электронные каталоги и презентации с эффектом перелистывания страниц и интеграцией звука, видео, ссылок и корзины покупок.

Задача

Увеличить лояльность аудитории компании ― предпринимателей, маркетологов, продавцов и менеджеров ― за счет «карманной» доступности флипбуков.

Решение

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

Интерфейс адаптировал по гайдлайнам Google Material Design 2, а позднее обновил по Material You. Такой подход обеспечил современный внешний вид, привычное и предсказуемое поведение элементов, сократил бюджет на разработку и поддержку.

Как выстроил процесс

Реализовал 6 спринтов дизайна мобильного и планшетного Android-приложения

Работа строилась спринтами

1. Изучал техническое задание.
2. Получал от дизайнера клиента iOS-макеты. Отсматривал их и отмечал, какие элементы будут адаптированы и улучшены.
3. Сначала обсуждал предложения с арт-директором и дизайнером клиента, некоторые отсеивали или искали им замену, которая устроит обе стороны: обновились требования, недопонял макет, попал в ограничения разработки — рабочий процесс. Затем предложения аргументировал клиенту.
4. После согласования собирал макеты Android-приложения.

Сначала адаптировал навигационные элементы

Верхняя навигационная панель

1. Увеличил высоту.
2. Поменял серую заливку на белую.
3. Убрал разделитель.

Панель перестала конкурировать с содержанием за внимание и сохранила свою изолированость:

Когда страница прокручивается, появляется тень, отделяющая панель от содержимого:

Нижняя навигационная панель

1. Сравнял по размеру с верхней, чтобы элементы навигации имели общий признак и проще распознавались.
2. Повысил контраст между активным и неактивным разделами.
3. Облегчил цвет заливки и вместо разделителя добавил тень для изоляции от содержания.

Впоследствии обновил навигационные панели по гайдлайнам Material YOU:

Переходы к вложенным страницам сделал полноэкранными
Следующая страница появляется над текущей, двигаясь справа налево. Предыдущая появляется из-под текущей, которая сдвигается слева направо:

Переключатель содержимого секции
Сделал во всю ширину экрана, потому что он меняет содержимое секции, а не значение параметра внутри неё:

На планшете ограничил ширину сегментов переключателя, чтобы сохранить его целостность и обозначить область нажатия сегмента:

Панель инструментов
На странице флипбука, в панели инструментов увеличил область нажатия кнопок-иконок, поменял серую заливку на белую, чтобы сохранить общий признак с навигационными панелями:

После навигации занялся адаптацией элементов управления

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

Меню действий с флипбуком
Удалил «flipbook» из названия пунктов, чтобы действия считывались лучше. Так можно, потому что меню открывается при нажатии на три точки у карточки флипбука, и действия контекстуально относятся к нему:

Добавил иконки пунктам «создание публичной ссылки» и «Удаление», чтобы выделить их как ключевые и опасные действия

Впоследствии обновил меню по гайдлайнам Material YOU:

Затемнение без размытия
Экран ожидания открытия флипбука в iOS сделан с размытием фона. Выяснил у Android-разработчиков, что на реализацию размытия уйдет много времени, а результат будет отличаться от дизайна. Оставил затемнение с использованием фирменного цвета:

Небольшие элементы тоже влияют на целостность восприятия интерфейса, сделал их привычными

Троббер

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

Диалоговое окно
Вместо барабана сделал список радиокнопок:

Тумблер

Когда приложение уже выглядело и вело себя как андроидное, улучшал кастомные элементы

Разделитель
Ссылки сгруппированы по дате создания и разделяются отцентрованной линией, но из-за одинакового стиля разделителей список сливается в единую массу.

Сделал разделитель во всю ширину для разделения дат. Разделитель, прижатый к правому краю и с отступом от левого края, разделяет ссылки, вложенные в дату:

В результатах поиска флипбуков использовал тот же принцип: первый элемент в иерархии — папка, а второй — флипбуки, вложенные в неё:

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

При прокрутке вниз кнопка уезжает под верхнюю панель, чтобы освободить вертикальное пространство для содержания, а при прокрутке вверх — появляется обратно:

Для смартфонов с диагональю 5,5-5,7 дюймов предложил показывать шит сортировки сверху вниз. Кнопка перехода к нему расположена вверху экрана, поэтому после нажатия палец остаётся сверху и сразу может взаимодействовать с настройками:

Идея интересная, но финально реализовали универсальное поведение для всех смартфонов.

Вывод

Удалось ли увеличить лояльность аудитории компании ― предпринимателей, маркетологов, продавцов и менеджеров ― за счет «карманной» доступности флипбуков?

Да. Приложением начали пользоваться клиенты веб-версии продукта. За год их число выросло до 10 000, а ещё через год — до 50 000. Андроид-приложение следует принципам платформы, сохраняя привычную пользователям рутину и освобождая их сознание для осмысленных задач.

Что было самым сложным

Двойное согласование: сначала с дизайнером клиента, затем с самим клиентом. Аргументация отнимала много времени и сил, а часть идей в первых спринтах отсекалась одним словом: «Нет».

Как я с этим справился
Изменил подход к аргументации. Для дизайнера: с опорой на гайдлайны, ограничения разработки, реальные примеры и опыт с других проектов. Для клиента: улучшения для пользователя → какую пользу они принесут бизнесу.

В сложных ситуациях, чтобы ускорить согласование, просил помощи у арт-директора. С высоты своего опыта ему проще давался живой диалог с клиентом.

Отзыв о работе

«Мы сотрудничаем с IceRock Dev уже больше 2 лет. Процесс продолжается, впереди еще много целей. Отзыв о совместной работе могу оставить самый положительный. ... »
Алексей Родионов, руководитель проекта со стороны клиента

Что сейчас происходит с продуктом

Количество клиентов компании FlippingBook растет, а вместе с ним — и количество пользователей приложения.

Я завершил своё участие в проекте и с интересом наблюдаю за улучшениями и изменениями, которые органично развивают мой дизайн.

Дизайн сделал в середине 2022 и поддерживал его в ходе разработки в 2022—23.

Евгений Смирнов
Дизайнер

Евгений Гребенщиков
Арт-директор

IceRock Development
Команда разработки

Электропочта • Телеграм

Сделал дизайн-концепт и продумал взаимодействия с содержанием.

Задача

Объединить выразительную верстку с читаемостью и продуманными взаимодействиями.

Посадочная каталога

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

Изменение размеров создаёт ощущение глубины, побуждая продолжать прокрутку.

Принцип работы горизонтальной прокрутки

Контейнер прокручивается в сторону движения курсора на пройденное мышкой расстояние.

Когда курсор попадает в область контейнера прокрутки, запускается отслеживание его координат. Точка входа по X фиксируется в переменную mouse_x_start и становится точкой отсчёта. Текущая позиция курсора обновляется каждые 0.01 секунды и записывается в mouse_x_present.

В ответ на изменение положения курсора `Content Container` прокручивается с помощью «scroll to» по формуле:

round(
max( /* Округляет число для плавной прокрутки */
0,
min( /* Задаёт границу прокрутки вправо равную максимально возможному значению прокрутки */
`Content`.width - `Content Container`.width,
scroll_offset_start
+ (
mouse_x_present
- mouse_x_start
)
* 2 /* Дистанция, пройденная курсором, с множителем для ускорения прокрутки */
)
)
)

Прокрутка за пределами экрана

Не смотря на то, что курсор упёрся в границу экрана, мышь продолжает движение, а следовательно продолжается и прокрутка контента.

После движения, например вправо, при возврате мыши с отрывом от стола на 1—2 мм сенсор перестаёт считывать её положение. Курсор остаётся зафиксированным у границы, а следующее движение в ту же сторону продолжает прокрутку без рывков.

Зафиксированный у края курсор легко повести в обратную сторону для изменения направления прокрутки.

Для прокрутки также можно использовать тачпад или мышку с боковым колесом.

Категория с группировкой по тегам

Огранчиение горизонтальной прокрутки при быстром вериткальном движении курсора

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

Если пересечь контейнер прокрутки быстрым вертикальным движением курсора, то он останется в состоянии покоя.

Точка входа по X и Y фиксируются в переменные mouse_x_start и mouse_y_start. Текущая позиция курсора обновляется каждые 0.01 секунды и записывается в переменные mouse_x_present и mouse_y_present.

Для включений горизонтальной прокрутки проверются условия:

№1

abs(
  mouse_x_present - mouse_x_start
)
> 16 px /* Смещение курсора по X в диапазоне 0–16 px считается случайным, чтобы избежать дёргания контейнера */

№2

abs(
  mouse_x_present - mouse_x_start
) /* Путь, пройденный курсором по горизонтали */
≥
abs(
  mouse_y_present - mouse_y_start
) /* Путь, пройденный курсором по вертикали */

Навигация между тегами

Поиск

Если результатов поиска > 10, они группируются по тегам, как на страницах News, Publisher и Shop:

Если результатов поиска ≤ 10, они отображаются в одной горизонтальной строке:

Детальная страница

Галерея с вертикальной прокруткой

Модуль просмотра подстраивается под соотношения 21:9, 2:1, 16:9, 4:3, 1:1, 3:4:

Экспрессивная вёрстка

Создал выразительную и структурированную вёрстку, продумал взаимодействия с ней. Пользователь вовлекается в содержание, а бизнес поддерживает сайт без привлечения дизайнера.

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

Макеты оживлял в ProtoPie. Зондируя идею, учёл краевые сценарии и отсеял плохие решения до разработки. И да, использовал ИИ — процесс похож на вайбкодинг, но код провалидировать я не могу, а вот логику внутри ProtoPie — могу.

Дизайн сделал в начале 2025.

© Изображения и текстовые материалы, использованные в концепте, принадлежат Slanted Publishers и взяты с https://www.slanted.de/.

© Семейство шрифтов: Pragmatica Next by Paratype https://www.paratype.ru/.

Электропочта • Телеграм

Обновил дизайн страниц «О компании», «Услуги», «Каталог» и «Детали продукта». Новые страницы структурированно подают информацию и масштабируются без участия дизайнера.

Задачи

1. Cтруктурированно подать информацию об услугах и продуктах компании, чтобы повысить доверие клиентов.
2. Обновить визуал, чтобы он шёл в ногу с технологиями, которые применяются в продукции.

О компании

Пункты навигации сгруппированы и дополнены описанием, которое раскравает экспертизу компании и спектр её услуг.

Для фона используется близкий к бетону оттенок, который передаёт ощущение устойчивости и надёжности.

Услуги

Страницы устроены единообразно, чтобы сайт был «стабильным»: одинаково работал как на уровне иерархии информации, так и на уровне взаимодействия с интерфейсом.

При этом построение адаптируется под разную информацию и её объём, вовлекая в просмотр за счёт ритмических соотношений элементов.

Направления продукции

Каталог

Сетка позволяет добавлять новые категории по мере расширения ассортимента без привлечения дизайнера.

Страница продукта

Модуль предпросмотра

Панорамные изображения 21:9 и 2:1 фиксируются по высоте и выходят за пределы модуля по ширине, благодаря чему основной объект остаётся по центру, крупным и читаемым.

Форматы 1:1 и 4:3 фиксируются по высоте и ширине, чтобы сохранить детали верхней части изображения.

Сетка

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

Сетка адаптируется под разную информацию и её объём за счёт дополнительных направляющих линий и трёх размеров шрифта: 32 px — для навигации, 96 — заголовков, 24 — основного текста.

Страницы выглядят целостно и масштабируются без участия дизайнера.

Дизайн сделал в середине 2024.

© Большинство изображений и текстовых материалов в концепте принадлежат Abex Windows и взяты с https://abexwindows.com/. Остальные сгенерированы с помощью ИИ.

Электропочта • Телеграм