drag

кейс

ВТБ Капитал Форекс

Дизайн и фронтенд-разработка сайта и личного кабинета для одного из крупнейших форекс-дилеров России

vtbforex.ru
задача

Разработать трейдинговый портал для физических лиц — дизайн и frontend-разработка сайта и личного кабинета в соответствии с фирменным стилем группы ВТБ.

клиент

ВТБ

отрасль

Банки

год запуска

2020

что сделали

Дизайн сайта
Дизайн личного кабинета
Frontend-разработка

Совместили всё, что необходимо трейдеру: от информации об услугах до аналитических обзоров.

Дизайн с характером

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

Фоновые паттерны с линиями на главной странице ссылаются на фирменный стиль ВТБ.

Кнопка призыва к действию

Выстроили CTA-кнопки в иерархию значимости для клиента, увеличив таким образом мотивацию пользователя открыть брокерский счет. Кнопки призыва к действию находятся в верхнем блоке, в самом меню и в конце страницы — пользователь может перейти к форме, находясь в любой точке сайта.

Главная кнопка «Открыть счет» находится на всех страницах и является самым ярким его элементом, потому что направляет клиента к форме заполнения.

Навигация внутри разделов

Вынесли подзаголовки в отдельное меню и настроили визуальный прогресс-бар. Например, в блоке «Индекс настроений трейдеров ВТБ Форекс» с помощью бокового меню пользователь ориентируется по всем блокам и может вернуться к необходимому, а в блоке «Обзоры» меню выступает в роли фильтра для разделов. Применили разные решения, ориентируясь на объем контента и цели, которые он выполняет.

Автоматическое построение графиков и диаграмм

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

Перевели все сложные цифровые статистические данные в визуальные диаграммы и графики.

Адаптивная версия сайта

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

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

Личный кабинет

Личный кабинет — ключевой инструмент трейдера ВТБ. Пользователь самостоятельно управляет своим брокерским счетом: получает отчеты по сделкам, видит календарь, может выводить средства в нескольких валютах, общаться на форуме, следить за рейтингом трейдеров, регулировать юридические вопросы и оформлять справки 2-НДФЛ.

Собственная аналитика и анализ рынков

Пользователь получает полную картину состояния рынка Форекс: аналитические обзоры, таблица национальных процентных ставок, анализ рынков, справочник по мировой экономике, экономический словарь и новости о движении валют.

технологии

Pug

SCSS

JavaScript

SVG

D3.js

GSAP

Webpack

смотрите также

EOS app

Мобильное приложение для компании, работающей с кредитной задолженностью

Шишки парк

Айдентика, 3D-дизайн, сайт и контент для экстрим-парка в сосновом лесу

Yota Support

Дизайн, маркетинг и разработка для существующих и новых продуктов компании

связаться

Расскажите о своей задаче

Мы Red Collar, а как зовут вас? Чтобы связаться, нам нужен ваш e-mail Ого, какой тяжелый файл! Больше 10 MБ ждем на hello@redcollar.ru Пожалуйста, проверьте, правильно ли написан e-mail

Нажимая кнопку, вы соглашаетесь с нашей политикой в отношении обработки персональных данных.