Это просто космос! Как мы создавали новый сайт для SingularityApp

SingularityApp развивается с 2018 года, и за это время сайт прошёл большой путь — от яркого промо с 3D-графикой до сложного продуктового инструмента. Приложение заметно выросло по функциональности, вышло за рамки личного планировщика, получило командные сценарии и AI-возможности. К началу 2025 года стало понятно: текущий сайт больше не отражает масштаб продукта и требует переосмысления.

Итого, нам требовалось:

— Переосмыслить сайт как часть экосистемы продукта, отражающую его масштаб, смыслы и развитие.

— Синхронизировать редизайн сайта с продуктовыми релизами и работой внутренних команд.

— Показать широкий функционал приложения компактно и без перегрузки пользователя.

— Сохранить фирменный характер продукта, одновременно сделав визуал более зрелым и современным.

— Обновить контент и базу знаний, упростив путь пользователя к нужной информации.

— Обеспечить технически стабильный и бесшовный запуск нового сайта без простоя и потери данных.

Если коротко и тезисно, то у нас получилось сделать вот что:

— Провели полноценную аналитику и сформировали единое видение сайта как части продуктовой экосистемы.

— Спроектировали структуру и прототипы, зафиксировав смыслы и тексты до перехода к дизайну.

— Разработали дизайн-концепцию с балансом между зрелым визуалом и фирменным характером бренда.

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

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

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

— Провели технический рефакторинг и перенесли сайт на новую платформу.

— Обеспечили бесшовный деплой с сохранением данных, стабильности и SEO-показателей.

А теперь подробнее.

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

На этом этапе мы полностью собрали и проверили требования:

— опросили ключевых стейкхолдеров и зафиксировали общее видение продукта, задач сайта и смыслов, которые важно отразить;

— проанализировали конкурентов, отметив удачные решения и приёмы, от которых пользователи уже устали;

— изучили метрики, составили портрет пользователя и проверили роль сайта в общей CJM продукта.

В результате мы чётко сформулировали, каким должен быть новый сайт и какие задачи он должен решать.

Итогом этапа аналитики стал бэклог страниц со статусами:

— страницы, которые остаются без изменений;

— страницы, которые нужно усилить новыми фичами;

— страницы, которые требуется полностью переосмыслить — и по структуре, и по контенту.

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

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

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

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

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

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

В итоге эта креативная концепция легла в основу промоблока посадочной страницы AI-ассистента.

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

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

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

Отдельной задачей стало компактно показать ключевые возможности приложения. Для этого мы использовали анимации по скроллу: интерфейсы «разъезжаются», между ними появляются описания фич, которые можно разворачивать и сворачивать, а контент на экране меняется по ходу просмотра.

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

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

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

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

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

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

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

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

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

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

— страницы, где контент требовал полной замены

— страницы с сохранённой структурой, но нуждающиеся в редактуре и адаптации под новую логику сайта

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

Старый сайт SingularityApp работал на Битриксе, но за пять лет к нему накопилось слишком много вопросов, в первую очередь — по безопасности. Для нового сайта мы выбрали Laravel, однако полностью переписывать код не хотелось. На старом сайте уже было реализовано много критически важных функций — от рассылок до рекуррентных платежей, — поэтому мы пошли по пути рефакторинга.

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

— страницы, где структура почти не менялась и бэкенд уже был на Laravel

— страницы, требующие доработок из-за изменений в дизайне

— страницы на Битриксе, которые нужно было реализовать с нуля

Это позволило трезво оценить объём работ и выстроить приоритеты разработки.

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

Отдельным этапом стал деплой. Для сайта с десятками тысяч пользователей в сутки было критично запустить новую версию без простоя, потери данных и просадки SEO. Мы провели несколько репетиций деплоя, развернули дополнительное stage-окружение, идентичное продакшну, и собрали подробный чек-лист запуска. Переносить вручную ничего не пришлось — всё происходило через CI/CD (непрерывные интеграцию и деплой).

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

После релиза мы провели смоук-тесты с распределённой ответственностью между QA-специалистами. Проверяли ключевые сценарии: интеграции, оплаты (включая зарубежные), переходы между сервисами, а также скорость загрузки и соответствие требованиям Google PageSpeed.

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

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

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

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

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