Полностью переосмыслили стилистику, типографику, цветовую систему, компоненты и пользовательские сценарии 5КАРТ. Объединили направления, от карт и переводов до ВНЖ и решений для бизнеса, в цельный цифровой продукт, в котором легко и быстро можно ориентироваться.
В результате сайт получил усиленный и узнаваемый характер, а дизайн-система позволяет масштабировать новые страницы без лишних временных затрат.
В результате сайт получил усиленный и узнаваемый характер, а дизайн-система позволяет масштабировать новые страницы без лишних временных затрат.
О проекте
5КАРТ – международный финансовый хаб: оформление зарубежных карт, трансграничные переводы, регистрация компаний, ВНЖ и гражданство. Десятки стран, сотни партнерств.
Ранее сайт сервиса решал понятную задачу – помогал быстро оформить зарубежную карту. Сегодня сервис вырос, а интерфейс перестал выдерживать вес международного бизнеса. Новые направления появлялись поверх старых страниц, сетки разъезжались, бренд терял лицо.
Задача требовала системного подхода. Вместо добавления новых блоков поверх старых мы перестроили весь фундамент. Редизайн стартовал с главной страницы и разработки дизайн-системы, которая теперь задает единый стандарт для всех смежных уровней навигации.
Ранее сайт сервиса решал понятную задачу – помогал быстро оформить зарубежную карту. Сегодня сервис вырос, а интерфейс перестал выдерживать вес международного бизнеса. Новые направления появлялись поверх старых страниц, сетки разъезжались, бренд терял лицо.
Задача требовала системного подхода. Вместо добавления новых блоков поверх старых мы перестроили весь фундамент. Редизайн стартовал с главной страницы и разработки дизайн-системы, которая теперь задает единый стандарт для всех смежных уровней навигации.
Цель: построить систему, которую будет удобно масштабировать
Нам нужно было создать масштабируемую дизайн-систему, которая объединит десятки сложных сценариев (карты, переводы, регистрация компаний, ВНЖ) в цельный цифровой продукт. Мы хотели упаковать сложный B2B2C-сервис так, чтобы им было одинаково удобно пользоваться и с iPhone в метро, и с рабочего монитора.
Обновить дизайн по новому брендбуку было лишь половиной дела. Нам было важно, чтобы за свежим визуалом стояла искренняя простота. Для этого мы поставили себя на место занятого предпринимателя или путешественника, у которого каждая минута на счету. Поэтому мы отказались от избыточных креативных решений в пользу проверенных временем паттернов банковских приложений.
Теперь нужная информация находится сама собой, а покупка совершается почти на автопилоте, экономя внимание и силы.
Обновить дизайн по новому брендбуку было лишь половиной дела. Нам было важно, чтобы за свежим визуалом стояла искренняя простота. Для этого мы поставили себя на место занятого предпринимателя или путешественника, у которого каждая минута на счету. Поэтому мы отказались от избыточных креативных решений в пользу проверенных временем паттернов банковских приложений.
Теперь нужная информация находится сама собой, а покупка совершается почти на автопилоте, экономя внимание и силы.
Наш путь: найти визуальный язык, привычный для целевой аудитории
Мы изучили современные цифровые продукты мирового уровня и выделили принципы, которые считываются интуитивно:
На этой базе мы разработали самостоятельный визуальный язык 5КАРТ. Красный остался главным акцентом бренда, но сменил роль: теперь он работает как маяк. Он подсвечивает активные элементы, важные условия договоров и ключевые точки сценария, направляя внимание пользователя туда, где оно нужнее всего.
- Крупная, уверенная типографика;
- Высокая контрастность для быстрого сканирования;
- Функциональный цвет вместо декора;
- Простая геометрия и модульность;
- Минимум визуального шума.
На этой базе мы разработали самостоятельный визуальный язык 5КАРТ. Красный остался главным акцентом бренда, но сменил роль: теперь он работает как маяк. Он подсвечивает активные элементы, важные условия договоров и ключевые точки сценария, направляя внимание пользователя туда, где оно нужнее всего.
Как мы наводим порядок: рождение дизайн-системы
Масштабируемый сервис невозможен без жесткой визуальной логики. Мы разобрали интерфейс до основания, выписали все компоненты и написали единые правила игры:
• Единая цветовая палитра, строгая сетка и системные вертикальные ритмы;
• Стандартизированные атомы (кнопки, поля ввода) и сложные молекулы (карточки продуктов, таблицы сравнения, блоки тарифов);
• Предсказуемые правила адаптации под смартфоны (где принимается решение), планшеты и десктопы.
Теперь продукт выглядит цельно на любом устройстве. Это дало команде маркетинга готовые кубики конструктора. Новые страницы теперь собираются за часы, а не дни или недели, при этом каждый экран сохраняет целостность образа бренда.
• Единая цветовая палитра, строгая сетка и системные вертикальные ритмы;
• Стандартизированные атомы (кнопки, поля ввода) и сложные молекулы (карточки продуктов, таблицы сравнения, блоки тарифов);
• Предсказуемые правила адаптации под смартфоны (где принимается решение), планшеты и десктопы.
Теперь продукт выглядит цельно на любом устройстве. Это дало команде маркетинга готовые кубики конструктора. Новые страницы теперь собираются за часы, а не дни или недели, при этом каждый экран сохраняет целостность образа бренда.
Как мы упростили выбор карты (самый массовый сценарий)
Мы стандартизировали архитектуру продуктовых карточек, ранжировав данные по степени важности для пользователя. Ключевые параметры (название, цена, сроки, выгоды) теперь вынесены в единую зону видимости.
Единая визуальная логика позволила сократить время принятия решения до нескольких секунд.
Единая визуальная логика позволила сократить время принятия решения до нескольких секунд.
Что изменилось глобально: внедрение единого стандарта компонентов
Мы прошли по всем ключевым точкам контакта и связали их воедино:
- Главная страница стала ясным входом: сразу понятно, чем занимается компания и куда идти со своим запросом.
- Каталоги банковских карт, международных переводов, ВНЖ и регистрации бизнеса подчиняются одной сетке – мозг больше не переключается между разными визуальными языками страниц.
- Страницы отдельных стран и программ визуально выровнялись, исчезло ощущение несобранности дизайн системы.
- Партнерская программа и раздел о компании стали частью общей архитектуры. Все формы, кнопки, меню и поп-апы теперь ведут себя предсказуемо. Все точки конверсии работают по одному закону, исключая потерю лидов на стыках сценариев.
Итог этапа: сайт собран в целостный цифровой актив. Навигация больше не спотыкается о визуальные различия, бренд выглядит надежным на любой глубине просмотра.
Результаты, которые можно потрогать руками
Теперь дизайн сайта отражает бренд, которому верят с первого экрана. Вместо разрозненных страниц – единый международный стандарт. Дизайн перестал спорить с продуктом и начал продавать его надежность.
Клиент получает скорость решений вместо сомнений. Понятная иерархия избавила пользователя от когнитивной нагрузки. Путь от входа на сайт до заявки стал короче, так как мозг больше не тратит энергию на расшифровку интерфейса.
Маркетингу стало гораздо проще. Команда собрала новые посадочные страницы за часы, используя готовые компоненты системы, а не заказывая их у дизайнеров и верстальщиков.
Полная адаптивность. Интерфейс корректно работает на всех устройствах без потери функциональности, сохраняя целевой опыт пользователя как на смартфоне, так и на десктопе.
Вся система полностью готова к масштабированию. Благодаря внедренной дизайн-системе запуск нового продукта, страны или направления теперь занимает часы, а не месяцы разработки.
Рост ключевых метрик. Упрощение выбора карты напрямую повлияло на поведение аудитории. Конверсия в добавление в сравнение увеличилась.
Клиент получает скорость решений вместо сомнений. Понятная иерархия избавила пользователя от когнитивной нагрузки. Путь от входа на сайт до заявки стал короче, так как мозг больше не тратит энергию на расшифровку интерфейса.
Маркетингу стало гораздо проще. Команда собрала новые посадочные страницы за часы, используя готовые компоненты системы, а не заказывая их у дизайнеров и верстальщиков.
Полная адаптивность. Интерфейс корректно работает на всех устройствах без потери функциональности, сохраняя целевой опыт пользователя как на смартфоне, так и на десктопе.
Вся система полностью готова к масштабированию. Благодаря внедренной дизайн-системе запуск нового продукта, страны или направления теперь занимает часы, а не месяцы разработки.
Рост ключевых метрик. Упрощение выбора карты напрямую повлияло на поведение аудитории. Конверсия в добавление в сравнение увеличилась.
В итоге ходе редизайна мы устранили визуальную разрозненность, привели интерфейс к единым правилам и упростили ключевые пользовательские сценарии
5КАРТ получил самостоятельную дизайн-систему, современный визуальный язык и масштабируемую структуру сайта. Теперь новые страницы и направления можно последовательно развивать, сохраняя целостность интерфейса и узнаваемый образ бренда.
Готовы превратить стремительный рост вашего сервиса в усиленную международную экосистему?
Если ваш бизнес перерос возможности текущего интерфейса – давайте создадим дизайн-систему, которая выдержит следующий миллион ваших клиентов.
Напишите нам: разберем ваши текущие процессы на молекулы, оптимизируем логику и соберем платформу, готовую к любому росту.
