Контекст
Weeek - Российский аналог Clickup, Asana и Notion или же B2B SaaS-платформа для управления задачами, проектами и командами, с базой знаний, CRM и аналитикой. 968 000+ пользователей, 30 000+ активных команд
Мобильное приложение — карманное дополнение к веб‑сервису, повторяющее его ключевые сценарии с учетом гайдлайнов мобильного проектирования. Приложение скачали более 100 тыс. раз в Play Market и более 40 тыс. — в RuStore.
За всё время работы в Weeek я лично отвечал за весь UX/UI мобильного приложения. До меня оно уже было в сторах, но морально и визуально заметно отставало от конкурентов. Я поменял визуальный язык приложения и спроектировал множество новых сценариев, а чтобы улучшить масштабируемость, внедрил дизайн‑систему.
Первый инпут
Редизайн
Второй инпут
Дизайн система
Интерфейс Android со временем расползся: компоненты и паттерны были из разных эпох, часть устарела, одинаковые сценарии работали по‑разному — каждую фичу приходилось собирать вручную, и всё держалось на том, что дизайнер помнит легаси.
Когда разработчик начал перенос на Jetpack Compose, я предложил CEO обновить визуал и параллельно собрать дизайн‑систему, чтобы унифицировать решения, ускорить разработку и сделать продукт масштабируемым без зависимости от одного человека
Семантику в названии цветовых токенов
Систему шрифтовых стилей
Систему поверхностей (Сёрфейсы, Праймери и Контейнеры)
А также паттерны для радиусов и отступов
А от себя:
Завёл всё перечисленное выше в переменные
Добавил поддержку двух тем
Добавил сетку иконок
Собрал UI Kit из основных компонентов
Для каждого добавил состояния через функционал Булианов, Вариантов и Инстансов
Также добавились и Слоты, когда Фигма их добавила в инструментарий
Описал каждый хедер и футер в приложении
Третий инпут
Адаптив всей базы знаний и для Ios, и для Android через Webview модуль
Систематизировал визуальные решения, которые до этого существовали как отдельные компоненты и локальные договоренности. В качестве основы я взял гайдлайны от Material design. От M3 взял:
Семантику в названии цветовых токенов
Систему шрифтовых стилей
Систему поверхностей (Сёрфейсы, Праймери и Контейнеры)
А также паттерны для радиусов и отступов
А от себя:
Завёл всё перечисленное выше в переменные
Добавил поддержку двух тем
Добавил сетку иконок
Собрал UI Kit из основных компонентов
Для каждого добавил состояния через функционал Булианов, Вариантов и Инстансов
Также добавились и Слоты, когда Фигма их добавила в инструментарий
Описал каждый хедер и футер в приложении
Четвёртый инпут
Изменение глобальной навигации
К навигации в приложении со временем приросло слишком много всего — и каждый новый раздел усложнял путь к базовым вещам. В итоге пользователь почти всегда начинал с одного и того же «универсального» футера.
Он держал на себе три задачи:
Контекстный футер — виден почти на любом экране (кроме карточки задачи и настроек), но наполнение менялось от сервиса к сервису и часто не совпадало с тем, что человек делает прямо сейчас.
Вход в сущности — проекты, документы и воронки открывались оттуда же, через тот же набор кнопок.
Переключение сервисов — отдельная страница, до которой нужно было сделать три тапа.
Я разобрал навигацию целиком и собрал её заново вокруг одного принципа: основные действия должны находиться там, где их ожидают. Выход к проектам переехал в хедер слева — логично рифмуясь с привычной кнопкой “← Назад”, а страница проектов стала полноценным хабом
Теперь из этого хаба можно:
переключать сервис из футера;
выбирать конкретный проект/документ/воронку;
менять воркспейс той же кнопкой слева вверху;
открывать уведомления, поиск и настройки профиля.
В результате ключевые действия собрались в одном месте, хедеры и футеры начали работать по единому паттерну, а убранный футер со страниц сервисов вернул 64 px полезного пространства снизу — без потери удобства.
❇️ Результат
Спроектировал и запустил новые сценарии, которые позволяют командам вести проекты и задачи даже вне рабочего места
Упорядочил подготовку макетов и ускорил вывод новых фичей за счёт дизайн‑системы на Material 3
Обновил визуальный язык приложения и привёл интерфейсы к единому стандарту
Спроектировал модуль базы знаний, упростив синхронизацию между веб‑ и мобильной версиями и сократив затраты на разработку отдельных редакторов
