На выходе этапа аналитики мы получили список страниц в формате бэклога, где прописали их статус и состав:

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

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

Для Сингулярити мы сначала сделали чистую, «прототипную» версию дизайна. Потом подумали: «Может показать пользователю, что планировщик — это персональный АИ-ассистент, который поможет с декомпозицией, формулировкой задач по SMART и с подсвечиванием слабых мест в его планировании?».

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

В промоблоке мы использовали three. js для создания звёзд + GSAP для плавной анимации движения за курсором. Для оптимизации использовали веб-воркеры. Также GSAP в комбинации с CSS маской используется для анимации «светлячка», бегающего за курсором по контуру скриншотов приложения. Ну, а Warp-эффект — «отлетание» в гиперпространство в блоке с тестом по наведению на кнопку — это «чистый» Canvas.

Мы провели настоящие геометрические расчеты, как должны двигаться звезды, «светлячки» при наведении курсора и градиентный космический фон. Его, кстати, сразу же оценили пользователи и попросили «завезти» в приложение :)

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

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

Главная фишка бенто-сетки — иллюзия бесконечного скролла, которая создает ощущение, что возможности Сингулярити бесконечны (а может — это так и есть?).

Для бенто-сетки мы задействовали Masonry.js. Это библиотека, которая позволяет разместить блоки в вёрстке, как кирпичики в стене: чтобы они заполняли пространство плиткой без лишних промежутков. А для перетаскивания сетки мышкой мы использовали GSAP.

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

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

Singularity App — продукт мирового уровня. Поэтому нужно было сделать редизайн так, чтобы он выглядел «взрослым», но при этом хотелось сохранить ключевые смыслы и сингулярный «фольклор». Изменить себя, но не изменить себе.

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

Во время создания дизайна приходили новые неожиданные идеи: «бенто-сетка», тест с летящими звёздами, как в прыжке через гиперпространство, оммаж на «Звёздные войны» на странице «О компании».

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

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

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

Получилось настолько удобно, что мы планируем забрать эту идею на клиентские проекты.

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

• зеленые — структура страниц практически не изменилась, а бэкенд уже на Laravel (последние пару лет мы понимали, что будем неизбежно переезжать с Битрикса и разрабатывали новые страницы сразу на чистом фреймворке, без использования компонентов Битрикс);
• желтые — нужны доработки: бэкенд страниц на Laravel, но на этапе дизайна появилось много изменений, которые нужно состыковать с кодом;
• красные — страницы на Битриксе, которые нужно написать полностью.

Деплой — это всегда стресс для команды. Страшно, что в день релиза продажи встанут. Что сайт будет недоступен для пользователя. Что просядет SEO, и что редизайн не сработает на те цели, которые ставили перед проектом.

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

На проектах мы всегда используем DEV-сервер, где ведем всю разработку и проводим QA-тесты, а затем в большинстве случаев сразу переносим данные на реальный сервер заказчика.

Для сайта Сингулярити, поскольку над проектом работает очень большая командаи в работе одновременно может быть 5−10 веток кода с разными изменениями, мы развернули дополнительный сервер — Stage — с окружением, на 100% идентичным продакшну. Там мы проводим итоговые тесты после объединения кода из тех веток, которые собираемся деплоить.

• Переносить вручную ничего не приходится — всё происходит через CI/CD (непрерывные интеграцию и деплой).

Внося контент на stage-сервере, все затраты времени я фиксировала поминутно с помощью таймера Помодоро в SingularityApp, так как нам важно было понимать затраты времени на контент при реальном деплое.

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

Быть заказчиком и приятно, и сложно. Особенно с учетом того, что речь шла не только о дизайне. На сайт завязаны разные продуктовые процессы, например платежи, рассылки. И это тот случай, когда не должно быть ни секунды простоя. Поэтому мы репетировали деплой на два раза, вплоть до переноса контента. С таймером. И после деплоя тестировали в 10 рук.

Я душнила на всём. Душнила и готовила недостающий контент. Готовила контент и душнила. И переспрашивала. И пересматривала. И восхищалась, как заказчик, работой команды и ПМ-а на проекте. Тем, как спокойно и терпеливо разбирали каждый комментарий и решали любой вопрос.

С нашим сайтом был тот случай, когда «дизайн и разработка закончены» вообще не равно «всё готово». Мы на личном опыте прожили весь процесс от идеи до деплоя. И я могу с чистой совестью сказать любому заказчику: отточенный контент и смыслы — это задача и зона ответственности заказчика. Как бы ни хотелось переложить это на кого-то другого.

Каким бы ни был дефицит времени — есть вещи, которые надо сделать самостоятельно. Картинки, тексты, смыслы, сценарии. Это должно идти изнутри. А команда оформит это лучшим образом, сделает цельным, проверит и перепроверит.

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

Этот релиз — большой вызов. И самим себе, чтобы не спрыгнуть со своих же устаканившихся процессов (хотя порой очень хотелось). И отрасли, в которой давным-давно сложились свои паттерны, как рассказывать и показывать приложения для планирования с огромным количеством возможностей.
Мы сделали так, чтобы «нафаршированность» Сингулярити сыграла нам на руку и с первого экрана захватила пользователя. Вместо обилия скринов у нас акцент на лучшие фишки интерфейса приложения:

• оргазмические анимашки при выполнении задач и закрытии «Помидорок»;
• яркие «колбаски» привычек, которые закрываешь каждый день, испытывая удовольствие от тапа на них;
• медитативные перетаскивания тикетов канбан-режиме… 

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

В общем, получилось то, чего мы и сами не могли ожидать, когда только задумывали всю эту переделку. А именно — пушка-бомба-ракета для планировщика № 1!

От всей души благодарю всех причастных к этому проекту. Это была огромная и сложная работа с самыми замороченными заказчиками на земле (мной и Катей).

Ребята не только с успехом выдержали весь наш напор, требовательность, придирчивость, задро… скрупулезность. Но и воплотили всё это в реальность.

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