Сайт и сервис для Slider Ai — онлайн-редактора презентаций, который использует шаблоны, аналитику и встроенные Ai-сервисы

Главное о кейсе

Slider Ai — онлайн-редактор презентаций, который использует шаблоны, аналитику и встроенные Ai-сервисы.

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

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

Мы начали с дизайна сайта — а закончили полным редизайном двух продуктов Slider Ai:
1. провели анализ целевой аудитории, 10 кастдевов с пользователями, конкурентный анализ;
2. создали дизайн сайта. Разработали его на Astro;
3. полностью переработали дизайн редактора презентаций Slider Ai;
4. переработали личный кабинет пользователя. Разработали его на React.

Результат

Сайт Slider Ai решает поставленную задачу — рассказывает о продукте Slider Ai и мотивирует переходить в сам редактор презентаций. Об этом говорят нашему заказчику сами пользователи. Например, такой отзыв получил сайт от представителя ЦА:

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

А сам клиент говорит так: «За первые дни мы получили несколько десятков личных сообщений от пользователей, партнёров, коллег и все в восторге от нового сайта».

Немного цифр
— Снижение отказов более, чем в 1,5 раза.
— Скорость загрузки сайта выросла практически в 4 раза — несмотря на то, что сайт стал гораздо более масштабным и с множеством анимаций.
— Показатель скорости загрузки сайта по Lighthouse — 100%.
— Уложились в сжатые сроки: обновили и релизнули дизайн сайта и редактора презентаций за 2 месяца!

Как проект изменил жизнь пользователей

Сайт Slider Ai:

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

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

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

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

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

3. Сайт быстро работает: загрузка и переход между страницами моментальные, а скорость загрузки — 100% по Lighthouse.

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

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

2. Добавили в редактор презентаций голосовой помощник. Теперь пользователь может просто включить голосовой курсор, кликать на слайды и голосом редактировать презентации. Эта функция закрывает потребность пользователей, которую мы обнаружили во время кастеевов с ЦА.

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

Бизнес-задача и ее решение

1. Изначально цель проекта — создать сайт, который будет рассказывать о редакторе презентаций Slider Ai.

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

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

Работа над продуктами Slider Ai состояла из 5 этапов.

1. Провели продуктовое исследование. Мы взяли 10 интервью с представителями ЦА, выяснили, какие боли надо закрыть на сайте и в сервисе.
Построили CJM и провели анализ конкурентов, на основе которых создали карту болей пользователей. На основе полученной информации разработали варфреймы сайта с учётом SEO-адаптации и фич-лист сайта и редактора презентаций.

2. Создали новый дизайн сайта Slider Ai — сверстали, протестировали и запустили его.

— Полностью переработали дизайн и структуру сайта. Теперь весь сайт Slider Ai работает на погружение пользователя в редактор презентаций Slider Ai.

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

— Фронтенд сайта создали на Astro. Этот фреймворк хорошо подходит для сайтов со статичным контентом. Он закрывает все потребности сайта для качественной работы — и при этом не усложняет его разработку (что особенно ценно, учитывая сжатые сроки проекта).

3. Разработали новый дизайн редактора презентаций Slider Ai.
Обновили визуал сервиса — сделали его более свежим и комфортным для пользователей.

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

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

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

4. Обновили дизайн и сверстали личный кабинет внутри редактора презентаций Slider Ai.

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

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

— При работе над фронтенд-частью личного кабинета использовали фреймворк React — это обеспечило быструю работу продукта.

Крафт (мастерство), реализация, технические детали

1. Использовали верстку вместо тяжелых покадровых анимаций на сайте.

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

В итоге мы решили не делать покадровые анимации (было бы больше 1000 кадров) — а полностью сверстали их. То есть все реальные интерфейсы повторно сверстали специально для сайта. Сейчас частота кадров анимации равна частоте экрана пользователя (60+ кадров в секунду), а скорость сайта 100% по Lighthouse.

2. Разработали голосового помощника.

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

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

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

3. Через дизайн отразили на сайте симбиоз пользователя и ИИ.

Подход команды Slider Ai про то, что ИИ — это союзник человека. Инструмент, который работает в одной команде с пользователем. «Человек остаётся у руля, а ИИ это штурман: он анализирует, предлагает, берёт на себя мелкие задачи и помогает принимать более взвешенные решения».

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

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Самый важный челлендж проекта — ограниченные сроки. Если изначальной задачей было только создание -сайта, то впоследствии мы параллельно взяли на себя обновление дизайна самого сервиса. При этом в ходе редизайна сервиса мы не просто изменили его внешний вид, но и пересобрали структуру внутреннего дашборда. Не сдвигая при этом дедлайн — на всё про всё было 2 месяца!

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

Прочая информация о кейсе

Slider Ai is an online presentation maker that utilizes templates, analytics, and built-in AI services.

The workflow is simple: a user formulates a request. For example, "Create a presentation template with a competitor analysis for brand X." They then add details to the prompt: a list of competitors, the presentation structure, and style preferences. Within minutes, Slider Ai selects visuals and generates text, then combines them into a ready-to-use presentation. After that, the presentation can be edited by adding text or images.

Slider Ai approached Oxem to update their website. Its purpose was to clearly communicate the product’s value and drive users to the presentation maker.

We started with the website design and ended up with a complete redesign of two Slider Ai products:
1. Conducted target audience analysis, 10 customer development interviews with users, and competitor analysis;
2. Created the design for the website. Developed it using Astro;
3. Completely overhauled the design of the Slider Ai presentation maker;
4. Redesigned the user's personal account. Developed it using React.

Result

The Slider Ai website solves its intended task—it effectively communicates the value of the Slider Ai product and motivates users to visit the presentation maker itself. Our client hears this directly from users. For example, here's feedback the website received from a target audience representative:

"I've always wondered how to present a product in the most visually clear and comprehensive way, so that it's immediately obvious what it is and how it works. I saw your website and understood: this is the perfect format. Everything is clear, concise, and down to the smallest details."

And the client themselves says: "In the first few days, we received several dozen personal messages from users, partners, and colleagues, and everyone is thrilled with the new website."

Result in Numbers
— The bounce rate was reduced by more than 1.5 times.
— The website loading speed improved almost 4 times (despite the website becoming much more extensive and feature-rich including numerous animations).
— The website's speed performance score is 100% according to Lighthouse.
— We met the tight deadline: we updated and released the designs for both the website and the presentation maker within 2 months!

Комментарий заказчика

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