Рассказываем, что вдохновило коллег из агентства «бета» на создание концепции технологичного сайта для «Платежного сервиса А3» — https://www. a-3.ru/. Мы пройдемся по основным этапам — от задумки до разработки — и покажем результат нашей совместной работы.
Знакомство
В 2022 году мы — «Платежный сервис А3» — обратились к агентству «бета» в поисках визуальной концепции для нового сайта. Важно было, чтобы она отражала все сложноустроенные процессы компании.
Перед нами стояла достаточно сложная задача: объединить на одном корпоративном сайте все целевые аудитории, с которыми взаимодействует платежный сервис А3, и показать продуктовую линейку компании. На рынке b2b мы сотрудничаем с разными организациями: среди них есть и банки, и поставщики услуг ЖКХ, и другие платежные сервисы. Наш продукт — технологически сложный. Со стороны партнеров решения о сотрудничестве и реализации принимают как руководители, отвечающие за развитие компаний, так и технические специалисты. Поэтому нам также важно было показать на сайте всю необходимую информацию и для бизнеса, и для IT-специалистов.
А3 предоставляет бизнес-решения в области электронных платежей, которые можно кастомизировать под задачи конкретных партнеров. Можно сказать, что это «трансформер» на рынке финтеха, предоставляющий услуги и продукты по двум направлениям: b2b и b2c. И это в том числе нужно было отразить и объяснить с помощью нового сайта.
Каждый месяц оплачивая коммунальные платежи или мобильную связь через банк, вы с большой долей вероятности платите через «Платёжный сервис А3».
Концепция
В процессе работы над концепцией родилась идея разделить всю визуальную составляющую сайта на светлые и темные стороны. На светлой рассказать о том, что лежит на поверхности бизнеса — о преимуществах для партнеров и конечных потребителей и финальных визуализациях, которые увидит рынок. А на темной — о том, что скрыто от поверхностного взгляда: о технологическом устройстве продуктов и о том, как внедрить тот или иной сервис.
Визуально на сайте темная сторона представлена отдельной страницей, на которой расположены все основные технологические продукты «Платёжного сервиса А3».
А еще в каждом цветовом продуктовом блоке есть темные «вставки» — технологии, которые описывают, как мы предоставляем / внедряем ту или иную услугу.
Еще одна задача сайта была в том, чтобы предоставлять одинаковые продукты (платеж, уведомления) с разным позиционированием, понятным для каждого сегмента рынка, где эти продукты могут быть востребованы. Что-то мы продаем по API, что-то как web-форму — это разные методики, которые сложно объединить, и для банков, и для поставщиков услуг. Решением было разделить сайт на цветовые блоки для разных потребителей. Это позволило выстроить коммуникацию с каждым нашим сегментом, подчеркивая уникальные торговые преимущества продукта.
Продукты А3 — модульные, каждый состоит из множества блоков. Мы решили отобразить это и придумали для сайта модульную систему, которую подчеркнули с помощью цветов. Получилось, что каждая страница — это набор модулей, и в них содержится разный контент, а цвет зависит от направления контента, от того, какие задачи он решает. Так мы показали, что продукты А3 не похожи один на другой — они решают разные задачи и в зависимости от потребностей могут собираться и кастомизироваться по-разному.
Engine
При создании нового сайта очень важно было отстроиться от конкурентов — показать, чем А3 отличается от других платежных сервисов.
Сначала мы подумали про ракеты. Они, как и продукт А3, скоростные и технологичные, а также состоят из модулей, и их можно собрать по-разному в зависимости от задачи. Потом стали дальше развивать метафору. Нам хотелось рассказать партнерам о том, что в продуктах А3 есть секретный ингредиент — то, что помогает им работать быстрее и лучше, создавать удобный и хорошо работающий продукт. Как фирменный двигатель в автомобиле — например, Turbo Engine у Volvo. Существует множество разных моделей этой марки, но внутри них — тот самый особенный двигатель. Так мы пришли к концепции, которую между собой так и назвали — Engine. Секретный механизм, который помогает А3 быть лидером на рынке. Мы общались с сотрудниками компании, чтобы разобраться, какой секретный механизм есть у А3, в чем их секрет. И поняли: это накопленный опыт работы с платежными системами в России, сильная команда и технические наработки — готовые быстрые модули, с помощью которых можно подобрать идеальное решение для любых партнеров.
Engine — одна из страниц сайта, выполненная в темно-синем цвете с анимированным шаром на основном экране страницы. Здесь собрана вся информация об уникальных технологиях и опыте компании, который помогает принимать оплату, оказывать поддержку клиентам и аккумулируем данные для платежей.
Итак, мы разобрались, что является нашим двигателем. А как его изобразить? Мы долго искали подходящую форму — совершенную, технологичную. И в итоге придумали крутящийся шар, который постоянно находится в движении. Этот шар — многослойный и состоит из точек. Так же, как технологии компании А3 многослойны и состоят из множества элементов. Шар — это волшебный двигатель, объединяющий в себе секретные компоненты.
Когда мы нашли эту метафору, она задала форму для всех остальных элементов сайта. Подчиняясь идее секретного двигателя, они тоже стали многослойными, закругленными — совершенными и технологичными, состоящими из множества модулей.
Реализация
После проработки символа, шара-двигателя, сложилось четкое понимание того, как должен выглядеть сайт: технологично, многослойно, с текучими градиентами и с основой в виде темно-синего цвета — цвета компании.
Затем были добавлены яркие акценты в виде оранжевого и сиреневого цвета, которые идеально дополняли общую палитру.
Одной из сложных задач было придумать, как структурировать сайт — по какому принципу упорядочить разные продукты, которые есть у А3. С нами работал опытный редактор, который провел интервью с главами направлений. Благодаря этим интервью мы поняли, чем разные продукты отличаются друг от друга, как мы можем их классифицировать и рассказать о них потенциальным партнерам. И так стал рождаться контент для сайта, разложенный по разным модулям.
Результат
Главным результатом сотрудничества мы считаем то, что нам удалось максимально понятно и структурировано донести до целевой аудитории ценность наших продуктов. Об этом говорит и обратная связь от наших постоянных партнеров, и заявки на сотрудничество от новых организаций.
Уверена, что заказ креативной концепции и дизайна в агентстве оправдан даже в случае наличия собственной разработки, так как коллеги смогли привнести в проект свою экспертизу и навыки, которых у нас внутри компании не было.
Классный домен!
Дизайн красивый, нравится.
Сделайте шрифты все woff2 для быстрой первой отрисовки.
Картинки на пол мегабайта - такое себе удовольствие, тут надо не более 100 кб.
У видео уберите аудиодорожку и перезалейте, будет меньше весить.
Рекапча - адище делает по скорости загрузки.
На скрине - текст внутри блока нечитабельно мелкий.
привет! спасибо за конструктивный комментарий!
1. Шрифт у нас в woff2 и всегда был.
2. Про аудиодорожку интересная идея. Полметра сэкономили.
3. К несчастью, рекапча и системы аналитики это техническая необходимость. Без них мир был бы лучше, согласен.
4. Картинка на полмегабайте была для постера видео, не заметили, пожали, спасибо!
5. Текст на скрине нечитаем скорей не из-за размера а из-за контрастности. Подумаем, что с этим можно сделать.