Сайт для REDSMS
REDSMS помогает бизнесу общаться с клиентами через SMS, звонки, MAX и другие каналы. У каждого оператора свои тарифы, условия и сценарии подключения. Мы объединили эту информацию в одном интерфейсе, чтобы пользователь мог легко разобраться в услугах, рассчитать их стоимость и узнать условия подключения.
Главная точка контакта устарела
REDSMS пришли к Mish с понятной проблемой: сайт морально устарел и уже не соответствовал уровню и возможностям продукта. Главную точку контакта с клиентами нужно было пересобрать так, чтобы сервисы, тарифы и условия подключения перестали выглядеть как квест.
Продукт было трудно считывать
Чтобы разобраться, каким REDSMS должен стать после обновления, команда Mish вместе с заказчиком проводили мозговые штурмы. Мы обсуждали позиционирование, характер продукта и искали новый визуальный образ.
От REDSMS к RED
К моменту дизайна появился ещё один важный контекст: REDSMS выкупили домен red.ru и были готовы к более смелому шагу — перейти от REDSMS к RED.
Новый фирменный стиль
На основе новой концепции мы разработали обновлённый визуальный язык бренда и доработали логотип. На этом этапе главной задачей дизайна было сделать интерфейс современнее и отразить новый характер RED.
3D помогает различать сервисы
Для разных каналов и разделов создали собственные 3D-иллюстрации. Они помогают быстро отличать сервисы друг от друга и поддерживают содержание страниц. Поэтому графика меняется вместе с контентом, но бренд не теряется.
Айдентика работает внутри интерфейса
В основу сайта легли фирменные цвета, дискретные градиенты, 3D-графика и баблы. Мы перенесли новый визуальный язык в интерфейс так, чтобы он работал не только на промоэкранах, но и в продуктовых страницах, таблицах, калькуляторах и документации.
Предсказуемая структура — ключ к доверию
Продуктовые страницы мы построили по общей логике. Сначала пользователь знакомится с каналом и его возможностями, потом смотрит сценарии использования и только после этого идёт в функции, стоимость и подключение. Никаких новых правил игры на каждой странице.
Понятный бюджет ещё до разговора с менеджером
Для предварительной оценки бюджета мы добавили калькулятор. Пользователь выбирает канал, задаёт параметры рассылки и сразу видит примерную стоимость. Так мы помогаем клиенту закрыть один из главных вопросов ещё до начала коммуникации, показывая, что RED обеспечивает максимальную прозрачность.
Таблица цен с сотнями комбинаций
Стоимость зависит от услуги, оператора, страны и других параметров. Обычная таблица здесь быстро превратилась бы в стену цифр, поэтому мы сделали динамическую таблицу цен с фильтрами, вкладками и подсказками. Детали спрятали до момента, когда они действительно нужны.
Подключение без лишних вопросов
Мы верим, что любой процесс подключения гораздо проще понять, когда перед глазами есть сам интерфейс. Поэтому текстовую инструкцию синхронизировали с экранами продукта. Во время прокрутки пользователь сразу видит, куда перейти, что выбрать и на что нажать. Сложная техническая настройка превращается в короткий наглядный гайд.
Документация всегда рядом
Знакомство с сервисом — только начало пути, особенно для разработчиков. Поэтому мы добавили отдельную точку входа в раздел интеграций. Оттуда можно перейти к технической документации, инструкциям по подключению API и примерам запросов.
Разработка под реальную инфраструктуру
Сайт сразу проектировали для работы на Битрикс, поэтому в разработке важно было сохранить компонентный подход и упростить дальнейшую поддержку. В основе использовали связку Vite, TypeScript, Pug и SCSS, а чтобы подружить Pug с Vite написали собственный пакет @mish.dev/vite-convert-pug-in-html
RED без красных флагов
Внутри у продукта по-прежнему много сервисов, тарифов, операторов и условий. Но теперь вся эта сложность собрана в понятную систему, которая помогает быстрее подводить пользователя к выбору сервиса и подключению. А новый визуальный язык дал RED характер, который легко масштабировать на новые продукты, страницы и коммуникации.
