DigiHub

DigiHub — от первого вопроса до совместной работы

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

Собственный проект DigiHub.

Композиция экранов сайта и рабочего пространства DigiHub на раннем этапе развития

О продукте

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

Задача

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

Решение

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

История Диги и его характер

Основа: общий язык бренда

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

Правила фирменного знака в исходном брендбуке DigiHub
Исходный брендбук: встречные скобки и центральный лаймовый ромб.

Первая версия: сайт и кабинет

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

Первоначальное визуальное направление сайта DigiHub из брендбука
Архивная концепция из брендбука — одна из исходных точек развития сайта.

Диги: характер становится помощью

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

Знакомство: от кейса к своей задаче

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

Первый экран ранней версии сайта DigiHub со скобками и лаймовым названием
Архивный экран сайта. Он показывает фирменную композицию, а не нынешние сценарии помощи Диги.

Работа: обсуждение рядом с результатом

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

Рабочее пространство DigiHub на раннем этапе развития с тестовыми данными
Архивный экран кабинета, снятый на локальном аккаунте с тестовыми данными. Совместные доски и новые подсказки здесь не показаны.

Развитие: договорённости переходят в план

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

Редактор портфолио DigiHub в ранней версии интерфейса
Архивный экран редактора портфолио, сохранённый как часть истории продукта.
Архитектура DigiHub: клиент, команда, результат и технические слои
Схема основных процессов и технических слоёв из ранней версии кейса.

Как это работает

Начать с одного вопроса

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

Посмотреть кейс с проводником

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

Найти ближайший шаг в кабинете

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

Обсудить решение на общей доске

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

Продолжить работу из договорённостей

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

Результат работы

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

  • Go
  • React
  • TypeScript
  • PostgreSQL
  • Yandex Cloud