Explore

Продуктовые и разводящие страницы, документация

Роль в проекте

Работал над продуктовыми и разводящими страницами сайта, документацией, промо- и рекламными лендингами.

Взаимодействовал с разработкой от этапа дизайна до тестирования.

Контролировал создание иллюстраций/иконок и срок их реализации.

Принимал участие в UX-исследовании страниц с целью повышения конверсии в целевое действие.

Конструктор внутренних страниц

Контекст

В проект я пришел в сентябре 2021. В то время в компании Voximplant уже постепенно внедряралсь дизайн-система для корпоративного сайта.

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

⁠

Пример компонента блока

Построенный таким образом процесс помогал также и маркетологам. Они знали на каких компонентах мы создаем страницы и могли изначально подстраивать контент под вариации дизайна.

Продуктовые страницы

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

Примеры реализованных страниц можно посмотреть на

сайте компании⁠

в разделе Products.

⁠

⁠

Демо-блок с чат-ботом Avatar

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

см. блок на сайте⁠

⁠

Редизайн документации

Контекст

Хорошая документация делает три важные вещи.

Увеличивает ценность продукта.

Уменьшает потребность в поддержке.

Повышает репутацию компании.

Однако перейдя на разводящую страницу документации в текущем дизайне, пользователи сталкиваются с целым рядом проблем.

⁠

⁠

Текущая версия разводящей страницы документации

Основные проблемы

1. Неинформативный первый экран и поиск без саджестов.

2. Отсутствие навигации. По статистике доскроливают до конца ~12%.

2. Кнопки Log in и Sign up. Ккак-будто сначала нужно войти / зарегистрироваться, чтобы прочитать документацию.

3. Неправильная иерархия блоков. Serverless Javascript выделен так сильно, будто это какой-то отдельный продукт.

Решение

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

Для более удобной навигации добавили фиксированный при скролле сайдбар-оглавление. Все разделы всегда на виду и есть возможность проваливаться сразу к нужному.

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

⁠

⁠

Громоздкие плашки и выделяющиеся блоки заменили на небольшие информативные айтемы, сгрупированные по группам.

⁠

⁠

Какие планы после релиза

Разметить новую страницу гугл аналитикой для сбора метрик:

переход на другую страницу документациипо нажатию на ссылки

переход в Stackoverflow из баннера

переход в сообщение тех. поддержке

глубина проскроливания страницы

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.