Slider Ai — новый сайт и редизайн онлайн-редактора презентаций

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

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

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

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

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

РЕЗУЛЬТАТ

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

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

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

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

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

САЙТ SLIDER AI:

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

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

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

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

РЕДАКТОР ПРЕЗЕНТАЦИЙ SLIDER AI:

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

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

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

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

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

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

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

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

1) ПРОВЕЛИ ПРОДУКТОВОЕ ИССЛЕДОВАНИЕ

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

2) СОЗДАЛИ НОВЫЙ ДИЗАЙН САЙТА SLIDER AI — СВЕРСТАЛИ, ПРОТЕСТИРОВАЛИ И ЗАПУСТИЛИ ЕГО

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

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

3) РАЗРАБОТАЛИ НОВЫЙ ДИЗАЙН РЕДАКТОРА ПРЕЗЕНТАЦИЙ SLIDER AI

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

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

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

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

4) ОБНОВИЛИ ДИЗАЙН И СВЕРСТАЛИ ЛИЧНЫЙ КАБИНЕТ ВНУТРИ РЕДАКТОРА ПРЕЗЕНТАЦИЙ SLIDER AI

• При разработке структуры личного кабинета опирались на выявленные на этапе аналитики боли пользователей.

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

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

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

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

В итоге мы решили не делать покадровые анимации (кадров было бы несколько тысяч, если не десятков тысяч) — а полностью сверстали их. То есть все реальные интерфейсы повторно сверстали специально для сайта. Сейчас частота кадров анимации равна частоте экрана пользователя (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, information about brand, and style preferences. Within minutes, Slider Ai forms structure, 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:
Conducted target audience analysis, 10 customer development interviews with users, and competitor analysis;
Created the design for the website. Developed it using Astro;
Completely overhauled the design of the Slider Ai presentation maker;
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 проявили настоящую гибкость, глубоко погрузились в проект и подошли к работе по-человечески: с пониманием, поддержкой и вовлеченностью на каждом этапе.
И результат говорит сам за себя: мы уже получаем отзывы от пользователей, хотя официального анонса обновления сайта еще не было.