Разработка фирменного стиля и сайта с индивидуальным дизайном для провайдера финуслуг «Элекснет»

Проблема

Клиент обратился в digital-агентство «Vedita» со старым сайтом, который визуально устарел, был непродающим, плохо адаптировался к просмотру на телефонах. Он медленно работал, хотя состоял лишь из шапки, подвала и текстового контента. Вместе с сайтом устарел и логотип: градиенты, блики, перегруженность деталями давно не в тренде. Представители «Элекснет» стремились создать современный и привлекательный облик компании в интернет-пространстве.

Задачи

Нам предстояло сделать редизайн фирменного стиля компании «Элекснет»: сделать логобук и гайдлайн; разработать сайт с индивидуальным дизайном. Задача усложнялась практически полным отсутствием фотоконтента: мы приняли решение рисовать 3D-модели.

Опытные дизайнеры «Vedita» разработали полноценный гайдлайн по использованию фирменного стиля. Там обозначены правила использования всех версий логотипа, основные и дополнительные фирменные цвета, типографика. Мы также нарисовали комплект иконок и элементы интерфейса: кнопки, поля ввода, управляющие элементы. Это стало основой дизайна сайта.

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

Практически все основные страницы сайта проектировались как продающие страницы (Landing Page). Располагать большое количество текста «кирпичами» — не наш вариант, такая информация сложно воспринимается. Мы отрисовали скетч-макеты всех страниц в разных адаптациях. Вышло более 300 вариантов дизайна. Каждый из них выполнен в минималистичном стиле и представляет большие объёмы информации, не перегружая пользователей.

Созданием карты также занимались наши разработчики. Необходимо было отметить более 4100 терминалов и реализовать умный поиск и сортировку. Данные о банкоматах загружаются и обновляются с помощью файла в CSV-формате. Мы разработали скрипт интеграции для быстрого импорта новых данных: обновлять информацию на карте требуется регулярно, поэтому так важно было сделать этот процесс простым. Карта работает на основе стандартного функционала Яндекс карт, который доработан под наши задачи. В первую очередь система показывает терминалы рядом с местоположением пользователя. В поисковой строке можно ввести адрес или объект. Есть ползунки для сортировки круглосуточных и партнёрских банкоматов.

Блок «Помощь» — это самая технически сложная часть сайта. В нём реализована электронная подача 4 типов заявлений: о возврате средств, техническом сбое, с претензией и в свободной форме. Программисты «Vedita» разработали на фреймфорке Vue.js анкеты, состоящие из 3-4 ступеней и более 30 сложных и зависимых полей. У нас большой опыт программирования на JavaScript — мы умеем создавать функционал под любые задачи. Введённые в форму данные в обязательном порядке проходят проверку на достоверность. Также мы позаботились о персональных данных пользователей и обезопасили их от утечек.

В разделе «Помощь» действует страница с ответами на часто задаваемые вопросы по категориям: «Уже оплатил», «Трудности с оплатой», «Хочу оплатить». Это упрощает и ускоряет поиск нужной информации. Также мы добавили в раздел-помощник функционал для проверки статуса платежа.