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

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

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

    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ломается, сайт быстро переключается на второй и там продолжает работать.

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

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

    Похожие публикации

    Комментарии 29

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

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

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

          написанной на отлюбись. И отвечать в комментариях — это не для нас, это ниже нашего достоинства.
            –2
            Добрый день! Спасибо всем за критику, будем работать над собой. Старались соблюсти баланс как в отношении контента, так и в отношении языка, чтобы было интересно.
          +6
          Некстати, почему сами банки называют свои услуги «продуктами»? Они ведь ничего не производят (даже нематериального), они именно оказывают услуги. Эта замена вызвана каким-то обходом законодательства (типа «напитка сокосодержащего»), или модой, или чем-то еще?
            +1

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


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

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

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

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

            +7

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

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

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

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

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

                    0
                    Ответили выше на аналогичное мнение, спасибо за критику, будем делать лучше
                    +3
                    Зашел на сайт посмотреть. Общее ощущение — крайне негативное (полное Г.). На главной странице на весь экран — периодически меняющиеся большого размера картинки с парой-тройкой строчек текста и пустотой, занимающей явно больше 50%. Это вы называете сайтом?
                      0
                      примерно на 3/4 главной страцы есть горизонтальный блок из 3 текстовых абзацев, от 4-го видны только начала строк(фиг с ним), но стрелки для скролла — в противоположной стороне страницы, на 24" смотрится так себе.
                      +3

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

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

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


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


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


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


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


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

                        +3
                        Приложение бы свое переработали. Каждый раз слезы наворачиваются на глаза, когда приходится пользоваться им
                          0
                          Ответили выше — разрабатываем, в следующем году покажем
                        • НЛО прилетело и опубликовало эту надпись здесь
                            +2

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

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

                              Можно ещё в 2 раза увеличить скорость загрузки добавив поддержку webp для картинок, прекомпрессию скриптов и стилей + поддержку brotli компрессии. И почему не используете http/2?

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

                              Самое читаемое