Slider Ai: клиент пришел за редизайном сайта, а получил полное обновление сайта и сервиса

Slider Ai — российский сервис для создания презентаций с помощью искусственного интеллекта (здесь и далее Ai пишем со строчной буквой i, так как это фирменное написание названия сервиса). Работает он так: пользователь формулирует запрос — например: «Создай презентацию с анализом конкурентов бренда Х» и добавляет в промпт детали — список конкурентов, информацию о бренде и пожелания по стилю. Slider Ai за пару минут формирует структуру, подбирает визуал и генерирует текст — а потом комбинирует это в единую презентацию. И дальше ее можно редактировать: добавлять свой текст или картинки.

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

Коллеги из Slider Ai обратились к нам за обновлением сайта. Цели сайта:

1. рассказывать о продукте Slider Ai: чтобы уже с первого касания пользователи понимали, что это за сервис и как он поможет им в создании презентаций;

2. вести пользователей на сам продукт — в редактор презентаций Slider Ai.

Чтобы достигнуть этих целей, нам нужно было обновить дизайн сайта, сделав его особенным, выделяющимся среди любых других аналогов.

Мы начали с дизайна сайта — а закончили полным редизайном редактора презентаций Slider Ai и запуском сайта. И все это в те же сроки, что были заложены на запуск сайта — фактически за 2 месяца с момента старта работ по дизайну!

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

Мы предложили клиенту обновить не только сайт, но и сам продукт — при этом не сдвигая сроки запуска. Естественно, весь редизайн мы предложили взять на себя. Клиент дал добро, так что в итоге мы:

1. Провели продуктовое исследование: анализ целевой аудитории, 10 кастдевов с пользователями и конкурентный анализ. На основе полученных данных построили структуру сайта и самого редактора;

2. Создали дизайн сайта и сверстали его на Astro;

3. Параллельно полностью переработали дизайн редактора Slider Ai: в том числе создали дизайн новых фичей — например, голосового помощника;

4. Переработали структуру и дизайн личного кабинета пользователя, собрали его на фреймворке React.

Провели 10 интервью с пользователями. Среди респондентов были такие роли:

— CEO/фаундеры стартапов

— Директора в b2b компаниях

— Маркетологи

— HR

— Бизнес-аналитики

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

Вторым шагом стало построение CJM. Мы построили путь пользователя Slider Ai от зарождения потребности до решения о повторном использовании. Проследили:

— какие боли возникают на каждом чекпоинте,

— какие точки соприкосновения с сервисом встречает клиент,

— и даже что за эмоции испытывает человек.

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

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

— внешний вид;

— тарифы;

— встроенные шаблоны;

— возможность обучения на платформе.

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

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

Разработали дизайн десктопной и мобильной версии сайта (главная + 14 внутренних страниц с состояниями). Теперь пользователь может посмотреть, как работает редактор презентаций Slider Ai — просто находясь на сайте. Ему не нужно переходить в сервис, чтобы понять его визуал, функционал, особенности — мы добавили на сайт анимации, которые в реальном времени показывают, как работает редактор презентаций Slider Ai.

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

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

Интересный вызов: сайт должен был показывать технологичность продукта, подсвечивать работу с Ai — но при этом быть человечным и вызывать эмоции у пользователей. Это отражает подход команды Slider Ai: коллеги часто подчеркивают, что ИИ — это лишь экзоскелет, помощник в работе. А создаёт презентацию всё-таки человек.

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

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

Эффект волшебства от ИИ составляющей продукта передали и через дизайнерские решения. Например, создали кнопки на сайте с эффектом свечения и добавили им градиенты.

Также технологичность подчёркивают чистый, минималистичный дизайн и практичные гротескные шрифты Manrope и TT Hoves Pro.

В рамках SEO-оптимизации сайта перед запуском мы проработали мета-теги и внедрили разметку Open Graph.

Так как обновлять дизайн редактора презентаций Slider Ai мы с клиентом решили в процессе работы, то и срок на запуск у нас был ограниченный. А именно: 2 месяца на запуск сайта и редактора презентаций с момента старта работ по дизайну.

Поэтому при обновлении редактора презентаций Slider Ai мы сосредоточились на самом главном для повышения лояльности пользователей — на визуале (структура редактора хорошая и не требовала сильной переработки).

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

Также полностью пересобрали структуру личного кабинета пользователя.

Наша цель — создать редактор с чистым и минималистичным дизайном. Чтобы он вписывался в дизайн-концепцию бренда и сохранял «сервисность»: удобный UX и простой UI.

Чтобы добиться этого, мы добавили тёмную тему и микроанимации.

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

Также перерисовали иконки в едином стиле и переработали цветовую гамму: заменили синий на более глубокий и насыщенный оттенок. Всего мы проработали более 350 макетов различных состояний редактора с учетом двух цветовых тем.

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

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

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

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

Из примеров фич голосового ввода, которые мы проработали совместно со Slider Ai:

— пользователь наводит курсор на слайд и надиктовывает мысли — а Ai сам составляет тексты, картинки и наполняет выбранный слайд;

— пользователь наводит курсор на элемент презентации — и голосом может его редактировать;

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

Личный кабинет Slider Ai — важный раздел внутри редактора презентаций. Тут пользователь управляет подпиской, данными, а также видит разделы со своими презентациями, шаблонами, командой, корзиной. 

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

Это снижает страх чистого листа. Теперь пользователь сразу может выбрать, как начать работу: с помощью промпта, встроенного шаблона или загрузки и изменения старой презентации. А раньше процесс начинался только при переходе в редактор! И стартовать можно было только с шаблона.

Нам было важно, чтобы раздел был интуитивно понятным. Поэтому мы до мелочей продумали логику пути пользователя и сделали его максимально простым и понятным. Например, на вкладке «Участники» добавили блок приглашения члена команды. Он встроен в саму систему, поэтому пользователь не тратит время на переход в почту или открытие поп-апа.

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

Итак, мы уже завершили дизайн сайта Slider Ai и завершаем дизайн редактора презентаций. Следующий шаг — разработка этих продуктов.

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

Сайт реализован в формате SPA (Single Page Application). Он не перезагружается при переходе между страницами.

Еще один из интересных вызовов проекта — как добавить на сайт множество покадровых анимаций, но не в ущерб скорости и работе сайта. Поясним: нам важно было показать на сайте сам редактор презентаций Slider Ai. Так, чтобы пользователь уже на сайте понял, как работает продукт.

Обычно в такой ситуации разработчики просто ставят покадровые анимации на сайт или видео. Но в случае со Slider Ai анимаций было очень много (было бы несколько тысяч, если не десятков тысяч) — в покадровой реализации они съедали бы трафик пользователя и сайт бы долго грузился и подтормаживал.

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

Сейчас частота кадров анимации равна частоте экрана пользователя (60+ кадров в секунду).

Благодаря верстке анимаций, фреймворку и работе наших ребят-разработчиков, мы добились быстрой работы сайта — 100% показатель скорости загрузки по Lighthouse.

При работе над фронтенд-частью личного кабинета редактора презентаций Slider Ai использовали фреймворк React. Он позволяет легко находить ошибки в коде и добавлять новые фичи. А ещё не нагружает браузер и ускоряет сервис!

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

Пользователи обновление уже оценили! Коллеги из Slider Ai поделились с нами: «Хотя официального анонса обновления сайта еще не было, за первые дни мы получили несколько десятков личных сообщений от пользователей, партнёров, коллег и все в восторге от нового сайта».

Вот, например, один из таких отзывов пользователя: «Я всегда задумывался, как можно максимально наглядно и полно показать продукт, чтобы с первого взгляда было понятно, что это и как работает. Увидел ваш сайт и понял: это идеальный формат. Всё ясно, чётко и до мельчайших деталей».

Результат по каждому продукту

1. Сайт Slider Ai.

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

Теперь пользователь может понять, как работает редактор презентаций, не заходя в сам сервис. На сайте он видит особенности Slider Ai, его визуал и функционал.

При этом сайт отражает ключевой посыл Slider Ai: ИИ — это полезный помощник, но главным в создании презентации остаётся человек. Адаптировали сайт для SEO, чтобы пользователи легко находили его в поисковиках и быстрее переходили к самому редактору.

2. Редактор презентаций Slider Ai.

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

Привели в порядок существующие элементы, (например, иконки), сделали их более читаемыми. Это помогает пользователю быстрее освоить редактор. Разработали и систематизировали масштабную дизайн-систему с UI-китом.

Изменили старые UX-фичи, такие как окно ввода промпта, которые помогают пользователю в создании презентации.

Также добавили новый функционал: например, тёмную тему и голосовой помощник.

Кардинально обновили личный кабинет пользователя внутри редактора презентаций Slider Ai. Сделали пространство интуитивно понятным, с простым и приятным дизайном, добавили новый функционал — чтобы работа с ЛК была максимально комфортной клиентам Slider Ai.

А теперь результат в цифрах!

— Снижение отказов на сайте почти в 1,5 раза.

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

— Показатель скорости загрузки сайта — 100/100 баллов по Lighthouse.

— Уложились в сжатые сроки: обновили и запустили новый дизайн сайта и редактора презентаций за 2 месяца с момента старта работ по дизайну.