Как мы делали новый сайт Росбанка, и что из этого получилось +3



Всем привет! Я — Виталий Мазуревич, руководитель направления цифрового привлечения клиентов розничного бизнеса в Росбанке. Мы начинаем большое и новое дело — корпоративный блог, поэтому открыть его мы решили статьей о чем-то большом и новом — о сайте.

Обновление сайта крупной компании – дело непростое и небыстрое. Но очень важное. Мы совсем недавно прошли этот путь. И не только прошли, но и получили очень хорошие результаты. Сегодня я расскажу, как мы это сделали и с какими проблемами пришлось столкнуться.

image

Проект по запуску нового сайта банка возник в 2017 году. Главный поинт был в том, чтобы поставить сайт на digital-рельсы в рамках проекта по общей диджитализации банка. И, так как сайт становится входной точкой в воронке привлечения клиентов, нужно было сделать его очень «френдли» с точки зрения пользовательского опыта.

Раньше сайт был скорее визиткой, нежели продающим инструментом. Его новый вариант мы решили сделать более современным, применили самые передовые технологии с точки зрения фронтэнда (ReactJS). На бэке все более-менее стандартно: YII 2.

Наш подход – mobile first


Проект длился долго. Нам нужно было не только сделать полноценную реплику текущего сайта, но и переработать ее так, чтобы портал был современный, быстрый и продающий. Мы учитывали то, что сейчас полностью меняется поведение людей в сети, и не в последнюю очередь это связано с увеличением доли мобильного трафика. На момент запуска сайта он составлял 48%, буквально через полгода вырос до 52% и продолжает расти. Это говорит о том, что меняется пользовательский опыт. Во-первых, это другие требования к интерфейсу – он должен умещаться на экране мобильного телефона. Во-вторых, меняются требования к текстам: они должны быть лаконичные, простые и понятные. И вообще, если ты дома, за компьютером со стационарным интернетом – это одно, а если едешь в метро, тебя толкают, но ты стойко пытаешься отправить заявку на кредит – это совсем другой пользовательский опыт. Именно поэтому и был выбран подход mobile first. О его повсеместном применении заявляют практически все, но пока в большинстве случаев дальше разговоров дело не идет. А мы поставили этот подход во главу угла: начиная от прототипов, которые мы рисовали только под разрешения мобильных телефонов, и заканчивая выбором технологий и архитектуры на бэке, чтобы сайт был быстрым. Скорость стала для нас главной технологической метрикой, которая сейчас становится и бизнес-метрикой. Любой процесс мы пытались ускорить и максимально «облегчить» сайт. Лично мне близко такое понимание дизайна: хороший дизайн – это не тот, в который больше нечего добавлять, а тот, из которого нечего больше убирать. Я смотрел на каждый элемент и задавал себе вопрос: если мы его уберем, у нас все развалится? И если отвечал отрицательно – мы этот элемент убирали.

image

Выбор дизайна


Настал момент, когда весь Росбанк начал преобразовываться, и сайтом нужно было подчеркнуть, что мы «впереди планеты всей». Мы понимали, что он должен не просто соответствовать трендам, а опережать их. Если ты заявляешь, что ты классный и выдающийся, а встаешь в линейку со всеми остальными, то возникает вопрос: а чего вы так поздно в нее встали?

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

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

image

Раскатка нового сайта


Процесс проходил в два этапа: сначала мы по отдельной ссылке разместили новый сайт, и он был доступен параллельно со старым. Новую ссылку мы отдавали пользователям выборочно, потом повесили на сайте приглашение: «Хотите попробовать новый сайт – переходите». Все это время мы смотрели на работоспособность нового сайта: нет ли юзабилити-проблем, держит ли нагрузку. И когда поняли, что все хорошо (это произошло 5 июня), раскатали на доменном имени банка новый сайт на всех клиентов.

Новые и старые клиенты банка


Нужно понимать, что основная аудитория банковских сайтов – это новые клиенты, их примерно 75%. У старых клиентов основной маршрут – перейти в интернет-банк (сайт используется как точка входа) или посмотреть отделения и банкоматы. Для них продуктовая история не важна, они редко пользуются сайтом, чтобы посмотреть карты и вклады, вся эта информация есть в мобильном приложении и интернет-банке.

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

Сайт должен быть максимально удобен и тем, и другим.

Сейчас основной сценарий получения банковских продуктов через сайт – это заявка на обратный звонок. Раньше форма состояла из четырех полей – имя, номер телефона, регион и время звонка. Это очень много. Мы сократили до одного – номера телефона: регион подтягивается по IP-адресу, имя можно узнать первым же вопросом, а в поле «Время звонка» по статистике более 95% клиентов указывает «как можно скорее». В итоге мы получили всплеск и по заявкам, и по привлеченным клиентам.

image

Своя команда или аутсорс?


На момент старта проекта у нас внутри практически не было компетенций по дизайну и разработке. Мы пользовались услугами нескольких подрядчиков, а если точнее, то четырех: один занимался сбором требований и созданием верхнеуровнего концепта, второй – дизайном, и еще два – разработкой.

При этом внутри банка была проектная команда по запуску сайта, а также текущая команда поддержки сайта, которая не занималась новым, а продолжала поддержку на тот момент текущего портала.

После запуска мы решили собирать свою команду, развивать внутренние компетенции. На это выделили 5 ставок: два бэкэнда, два фронта, одного дизайнера. Сейчас мы их активно набираем в штат.

Найти идеального разработчика


При поиске разработчиков мы делаем упор на то, чтобы люди понимали, что они придут на чужой код. У них должна быть решимость и смелость все переписать, а не просто сказать, что все плохо. Я в своей жизни не встречал ни одного разработчика, который бы приходил на чужой код и говорил бы: «Блин, какой он классный, сам бы лучше не написал!». Претензии обязательно будут, и это нормально.

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

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

Также у всех разработчиков я спрашивал, что такое UX, и как они считают, касается ли разработчиков эта тема? Я убежденный сторонник того, что это не просто отдельная компетенция внутри команды, которой владеет кто-то один, а остальные просто пилят код и рисуют картинки. Ведь UX это не только то, насколько цепляет картинка, но и то, как быстро сайт работает, как отрабатываются ошибки на сайте, насколько качественно сделана анимация. Например, если провести сравнение с автомобилем: важна не только приборная панель и колеса, важны все характеристики. Бывает, что машина тебе во всем понравилась, но не понравился, например, запах в салоне. И все: User Experience испорчен. Мне очень важно, чтобы все члены команды, и особенно разработчики (ведь их раньше всегда держали на обочине), понимали, что влияют на конечный результат не меньше, чем дизайнеры. Получается, что разработчик ответственен за UX, а значит и за бизнес-показатели. Что его метриками могут являться и бизнес-метрики, а не только скорость выполнения задач.

Создать команду


Для меня, если честно, стал неожиданным откровением факт, что рынок ИТ-специалистов сейчас существенно перегрет. Опытный разработчик – это три года стажа. Часто на собеседования приходят ребята с опытом в год и просят такие условия, которые мы готовы предлагать опытным специалистам. Я искренне уверен, что амбиции – это здорово, без них далеко не уедешь, но важно объективно оценивать свои возможности и компетенции. Поэтому при формировании команды мы решили составить пары back- и frontend специалистов: опытный ведущий разработчик + молодой и «голодный».

Результаты и планы


Я считаю, что проект по запуску нового сайта банка получился вполне успешным. Есть рост по сайту, причем очень значительный. По сравнению с прошлым годом за лето мы выросли на 50% по уникальным посетителям. Обычно так сайты не растут. Влияющих факторов у этого, конечно, много (это и узнаваемость бренда, и кампании по ТВ и в интернете), но простота и устойчивая работа сайта, несомненно, внесли свою лепту.

Кстати, в плане надежности у нас был очень интересный момент. Сайт построен по принципу DR – Disaster Recovery – сервера разнесены на два географически разных дата-центра. Если один из них cломается, сайт быстро переключается на второй и там продолжает работать.

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

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




Комментарии (28):

  1. Reeze
    /#20728700 / +2

    Главный поинт был в том, чтобы поставить сайт на digital-рельсы в рамках проекта по общей диджитализации банка.

    У Вас есть в банке менеджеры, которые не так часто используют англицизмы?

    • dzsysop
      /#20728724 / +1

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

    • tvr
      /#20730804 / +1

      Мы начинаем большое и новое дело — корпоративный блог

      потому что стильно, модно, диджитально. Для галочки. короче.
      поэтому открыть его мы решили статьей

      написанной на отлюбись. И отвечать в комментариях — это не для нас, это ниже нашего достоинства.

      • ROSBANK
        /#20730920

        Добрый день! Спасибо всем за критику, будем работать над собой. Старались соблюсти баланс как в отношении контента, так и в отношении языка, чтобы было интересно.

  2. kinall
    /#20728954 / +1

    Некстати, почему сами банки называют свои услуги «продуктами»? Они ведь ничего не производят (даже нематериального), они именно оказывают услуги. Эта замена вызвана каким-то обходом законодательства (типа «напитка сокосодержащего»), или модой, или чем-то еще?

    • staticlab
      /#20729732

      Это общепринятая терминология. В рамках продукта банк может оказывать множество услуг. Услуга — определенное действие или деятельность, которые исполнитель осуществляет по заданию заказчика (п. 1 ст. 779 ГК РФ). Например, в рамках продукта «дебетовая карта» есть услуги «Выдача банковской карты», «Снятие наличных в банкомате своего банка», «Снятие наличных в банкомате чужого банка», «Начисление процента на остаток на счёте», «СМС-информирование» и т.д. За каждую такую услугу банк может брать оплату, а может и осуществлять их бесплатно.


      Кроме того, почему нельзя назвать ту же банковскую карту продуктом банка с точки зрения «производства»? Она материальна :) Или мобильное приложение. На его разработку необходимо потратить очень много сил, даже если оно просто делается подрядчиком. Ну а если углубляться в экономическую теорию, то банки вполне себе увеличивают денежную массу в экономике за счёт кредитования. Этот механизм называется денежной мультипликацией.

      • kinall
        /#20729938

        В рамках продукта «покататься на верблюде» есть услуги «сесть на верблюда», «ехать на верблюде», «слезть с верблюда». За каждую такую услугу погонщик верблюда может брать оплату, а может и осуществлять их бесплатно.

        Но за разъяснение спасибо. Как всегда, дело в маркетинге)

        • AlexTOPMAN
          /#20730086

          В вашем примере про верблюда, лично я увидел чисто сервис и его подсервисы (всё-таки «покататься» это процесс, а не продукт). И коллегам из банков я предлагаю также называть вещи своими именами. ;) (имхо, пакет услуг — тоже не продукт, а именно пакет, или набор, ну или программа хотя бы...) Маркетинг тоже нужно держать в узде, а то его инсинуации порой расхлёбывать потом приходится. :)

          • staticlab
            /#20731456

            А можете пояснить возможные проблемы для клиента при использовании банковского продукта, а не сервиса?

  3. mkevac
    /#20728962

    Что имеется в виду под словом «диджитал»?

    • alexxz
      /#20731192

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

  4. A114n
    /#20728966

    Внешняя обложка для привлечения новых клиентов это прекрасно.

    Надеюсь вы с тем же энтузиазмом возьмётесь и за улучшение онлайн-банка. Пока что там всё грустно.

    • ROSBANK
      /#20730922

      Активно разрабатываем новое приложение, в следующем году покажем!

      • A114n
        /#20731016

        Ну тогда напишу ещё и вам: у вас невозможно при переводе в европейский банк указать наименование банка-получателя с диакритическими знаками. То есть в принципе невозможно сделать через ваш онлайн-банк валютный перевод в чешские, польские, французские банки (вы же вроде как подразделение французского банка, да?). Я примерно года три уже пишу об этом в техподдержку, примерно раз в год. Но ничего не меняется. Что ж, подождём ещё годик, спешить нам некуда.

        Про такую мелочь, как подгружать все данные о банке по коду SWIFT, чтобы не мучать пользователя их ручным набором, даже странно упоминать в 2019 году. Посмотрите хотя бы как Райф это делает.

      • Squoworode
        /#20745180 / +1

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

  5. autobusiness
    /#20729116

    Местечково статья написана. Даже перепроверил, точно ли статья от банка.

    • ROSBANK
      /#20730934

      Ответили выше на аналогичное мнение, спасибо за критику, будем делать лучше

  6. Yuriy_krd
    /#20730118

    Зашел на сайт посмотреть. Общее ощущение — крайне негативное (полное Г.). На весь экран — периодически меняющиеся большого размера картинки с парой-тройкой строчек текста и пустотой, занимающей явно больше 50%. Это вы называете сайтом?

    • fraky
      /#20730634

      примерно на 3/4 главной страцы есть горизонтальный блок из 3 текстовых абзацев, от 4-го видны только начала строк(фиг с ним), но стрелки для скролла — в противоположной стороне страницы, на 24" смотрится так себе.

  7. bzm
    /#20730940 / +1

    Главный понт (ой, поинт) банка, для которого делался сайт — посредственная клиенторориентированность и жлобство во всем. Поэтому огромное значение имеет привлечение новых клиентов. Старые так и норовят разбежаться. Причем не молча, а громко крича обо всем, что там происходит, своим друзьям, родственникам и знакомым. Так что диджитал несильно сработает. Нельзя из дома терпимости сделать институт благородных девиц путем редизайна фронтэнда. Всем входящим вовнутрь в глаза бросается разница.

    • ROSBANK
      /#20730960

      Нам жаль, что у вас сложилось такое впечатление. Если у вас есть вопрос, пожелание или претензия — вы можете написать нам в чат на главной странице сайта или в приложении, постараемся все решить.

      • bzm
        /#20731346

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


        Дело прошлое, конечно. Однако. Сначала клиенту банка отказывали в предоставлении документов, потом тормозили выдачу закладной, потом доверенности на снятие обременения.
        Пришлось просить нового залогодержателя.


        Просто из желания прикрыть произвол конкретного сотрудника — вершителя человеческих судеб.


        Приводить официальный ответ здесь не очень уместно, начинается он со слов:


        "Уважаемый Владимир!
        В ответ на Ваше обращение № R19/333-750-129629 ПАО РОСБАНК..."


        Что касается разработки. Каждый раз, когда пытаюсь зайти в приложение, ставлю галочку "запомнить данные". На результат не влияет. Ввожу логин и пароль и с надеждой ставлю галочку. Не помогает...

  8. Sashqa
    /#20730962

    Приложение бы свое переработали. Каждый раз слезы наворачиваются на глаза, когда приходится пользоваться им

    • ROSBANK
      /#20730964

      Ответили выше — разрабатываем, в следующем году покажем

  9. ChieF_Of_ReD
    /#20733080 / +1

    Десктоп, заглавная страница, слайдер, интересно послушать чем вы руководствовались, когда принимали решение, что стрелочка назад, на предыдущий слайд вам не нужна.

    • staticlab
      /#20733440 / +1

      "Наши клиенты смотрят в будущее и идут вперёд"

  10. Simon0
    /#20734136

    Специально зарегистрировался для этого комментария. Скриншот с вашего сайта. Я бы посоветовал поменять цвет текста. Прочитать, конечно, можно, но это явно не самый лучший выбор.

    Заголовок спойлера
    image

    • ROSBANK
      /#20734142

      Это баг элемента, мы про него знаем, в ближайшем спринте будем исправлять. Спасибо!