Все работы
п
2025ITArchitectureCase

Технический документ, который дочитывают до конца

Одностраничный лендинг-документ с якорями. Interactive-toggle между «тех-глубина» и «product summary» одной кнопкой.

Результаты

≤ 400 слов
на секцию
20 сек
на trade-off таблицу
2×
аудитории на одном документе (product + tech)

Проблема бизнеса

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

Технические концепт-документы обычно = стена markdown + диаграмма-микрокошмар. Никто не дочитывает, decision-makers пропускают. Задача: сделать IT-концепт-документ, который проходит и как техдок для инженеров, и как case-study портфолио.

Гипотезы

Что я предположил.

  • H1Одностраничный лендинг с якорями читается лучше многостраничного PDF.
  • H2Секции ≤ 400 слов удерживают внимание, длиннее, теряют.
  • H3Excalidraw-диаграммы в SVG работают лучше PNG-скринов Miro.
  • H4Trade-off таблица (варианты × критерии × emoji-скор) читается за 20 сек.

Ограничения

С чем работал.

  • ·Технический контекст должен остаться точным (без упрощений в ущерб корректности).
  • ·Один документ, никаких multi-page PDF.
  • ·Должен работать без JS для accessibility.

Дизайн-решения

Как я это сделал.

  1. 01

    Формат: одностраничный лендинг с якорями (context / decision / trade-offs / rollout). Каждая секция ≤ 400 слов.

  2. 02

    Диаграммы через Excalidraw, экспорт в SVG inline.

  3. 03

    Trade-off таблица: 3 варианта × 5 критериев × emoji-скор.

  4. 04

    Rollout-план в виде timeline: 4 фазы, риск-регистр рядом.

  5. 05

    Interactive-toggle «тех-глубина» / «product summary», переключение аудитории одной кнопкой.

Пользовательский сценарий

Линейный flow.

  1. 01
    Открыл документ
    landing-hero + toggle
  2. 02
    Выбрал режим
    product / tech
  3. 03
    Читает секцию
    context → decision → trade-offs
  4. 04
    Смотрит timeline rollout
    риски рядом

Что не получилось сразу

Пришлось переделывать.

  • Первая версия toggle-а полностью прятала тех-детали. Инженеры жаловались что документ «пустой». Изменил на progressive-disclosure: expandable-блоки внутри секций.

Результат

Итог

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

Следующий проект

Квартальный отчёт собирается за 2 часа вместо двух дней

Ozon · система корпоративных презентаций