Как мы улучшали сайт главного банка страны
TRANSCRIPT
![Page 1: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/1.jpg)
КАК МЫ УЛУЧШАЛИ САЙТ ГЛАВНОГО БАНКА СТРАНЫ / DIGITAL AGENCY /
![Page 2: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/2.jpg)
ПОЧЕМУ ГЛАВНЫЙ /
/ DIGITAL AGENCY /
![Page 3: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/3.jpg)
/ DIGITAL AGENCY /
ПОЧЕМУ ГЛАВНЫЙ / СБЕРБАНК
17 ТЫС ОТДЕЛЕНИЙ
83 СУБЪЕКТА ФЕДЕРАЦИИ
110 МЛН КЛИЕНТОВ
11 МЛН ЗА РУБЕЖОМ
90 ТЫС БАНКОМАТОВ
![Page 4: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/4.jpg)
/ DIGITAL AGENCY /
ПОЧЕМУ ГЛАВНЫЙ /
18 МЛН ПОСЕТИТЕЛЕЙ /МЕС
№15 САЙТ ПО ОХВАТУ
8 МЛН ПЕРЕХОДОВ В ОНЛАЙН БАНК
3 МЛН СБЕРБАНК БИЗНЕС ОНЛАЙН
СБЕРБАНК
![Page 5: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/5.jpg)
САЙТ ФЕДЕРАЛЬНОГО МАСШТАБА
/ DIGITAL AGENCY /
— большой охват
— все соцдем-группы
— все типы устройств
— необходимость присутствия всех
продуктов
ПОЧЕМУ ГЛАВНЫЙ/
![Page 6: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/6.jpg)
ЦЕЛИ И ЗАДАЧИ /
/ DIGITAL AGENCY /
![Page 7: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/7.jpg)
ЦЕЛИ И ЗАДАЧИ
/ DIGITAL AGENCY /
БИЗНЕС ЗАДАЧИ
ПОЛЬЗОВАТЕЛЬСКИЕ ЗАДАЧИ
ЦЕЛИ И ЗАДАЧИ/
![Page 8: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/8.jpg)
БИЗНЕС
/ DIGITAL AGENCY /
Внедрить новую платформу BACKBASE
Соответствовать требованиям современного дизайна
Отвечать потребностям каждого клиентского сегмента банка
Предоставить понятную структурированную информацию о продуктах и услугах
Способствовать продажам
1
ЦЕЛИ И ЗАДАЧИ /
2
3
4
5
![Page 9: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/9.jpg)
ПОЛЬЗОВАТЕЛЬСКИЕ
/ DIGITAL AGENCY /
Облегчить дизайн
Обеспечить доступность с разных платформ
Обеспечить пользователей доступной информацией о банковских услугах
1
ЦЕЛИ И ЗАДАЧИ /
2
3
![Page 10: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/10.jpg)
ГЛАЗА БОЯТСЯ РУКИ ДЕЛАЮТ / / DIGITAL AGENCY /
![Page 11: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/11.jpg)
НО 120 000 СТРАНИЦ И 4 МЕСЯЦА / / DIGITAL AGENCY /
![Page 12: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/12.jpg)
/ DIGITAL AGENCY /
ГЛАЗА БОЯТСЯ РУКИ ДЕЛАЮТ /
1.ДИЗАЙН
2.UX
3.ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ
CHALLENGE
![Page 13: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/13.jpg)
ЛАКОНИЧНЫЙ И ПРОСТОЙ ДИЗАЙНДИЗАЙН /
1. Минимальное использование теней
2. Фотореалистичные изображения
3. Минимальный объем текста на странице
4. Применение простых и интуитивно понятных пиктограмм
![Page 14: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/14.jpg)
ПЛОСКИЙ ДИЗАЙН VS СКЕВОМОРФИЗМДИЗАЙН /
![Page 15: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/15.jpg)
СЕРВИСЫДИЗАЙН /
![Page 16: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/16.jpg)
СЕРВИСЫДИЗАЙН /
![Page 17: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/17.jpg)
ВИДЖЕТЫДИЗАЙН /
![Page 18: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/18.jpg)
/ DIGITAL AGENCY /
ГЛАЗА БОЯТСЯ РУКИ ДЕЛАЮТ /
1.ДИЗАЙН
2.UX
3.ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ
CHALLENGE
![Page 19: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/19.jpg)
UX /
БРИФ НА ИССЛЕДОВАНИЕ
ВЫБОР ПОДРЯДЧИКА
Программа тестирования
Тестирование, выработка
рекомендаций
Внедрение доработок
• Постановка бизнес задачи • Определение целевой аудитории
• Определение ключевых сценариев
Выбор подрядчика в соответствии с закупочными процедурами Банка
3
1
2
ЦИКЛ Ответственный
ПРОВЕДЕНИЕ РЕГУЛЯРНЫХ ЮЗАБИЛИТИ ТЕСТИРОВАНИЙ
![Page 20: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/20.jpg)
UX /
АУДИТОРИЯ ИНТЕРНЕТАВ РАЗЛИЧНЫХ ПЛАТФОРМАХ
34%
24%8%
66%
21.4 млн.чел
15.2 млн.чел
5.3 млн.чел
41.2 млн.чел
![Page 21: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/21.jpg)
/ DIGITAL AGENCY /
ГЛАЗА БОЯТСЯ РУКИ ДЕЛАЮТ /
1.ДИЗАЙН
2.UX
3.ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ
CHALLENGE
![Page 22: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/22.jpg)
ТИПЫ КОНТЕНТА
Информирующий Образовательный Развлекательный Вовлекающий Функциональный‣ Навигация
‣ Главный промо-блок
‣ Анонсы на главной
‣ Текстовые описания
‣ Иконографика
‣ Иллюстрация
‣ Инфографика
‣ Видео
‣ Сервисы
‣ Соц. Медиа
/ DIGITAL AGENCY /
ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ /
![Page 23: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/23.jpg)
ПРИМЕР ДОРАБОТКИ ДИЗАЙНА ИНФОГРАФИКАИНФОРМАЦИОННОЕ
НАПОЛНЕНИЕ /
![Page 24: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/24.jpg)
УПРАВЛЕ- НИЕ ПРОЕКТОМ
/ DIGITAL AGENCY /
![Page 25: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/25.jpg)
ОБЪЕМ РАБОТ
/ DIGITAL AGENCY /
УПРАВЛЕНИЕ ПРОЕКТОМ /
1. ОБНОВЛЕНИЕ ДИЗАЙНА
2. РЕИНЖИНИРИНГ ИНТЕРФЕЙСОВ СЕРВИСОВ
3. АДАПТАЦИЯ ДИЗАЙНА ПОД МОБИЛЬНЫЕ УСТРОЙСТВА
4. ИСПРАВЛЕНИЕ ЗАМЕЧАНИЙ ПО УДОБСТВУ ИСПОЛЬЗОВАНИЯ
5. СОЗДАНИЕ НОВОЙ АРХИТЕКТУРЫ
6. ПЕРЕНОС КОНТЕНТ
7. ОСУЩЕСТВЛЕНИЕ ВЕРСТКИ И ПРОГРАММИРОВАНИЯ
8. ТЕСТИРОВАНИЕ
9. ИТ-ИНФРАСТРУКТУРА
10. ЗАПУСК
ОТ СТАРТА ПРОЕКТА ДО НОВОГО САЙТА В СТАДИИ ПУБЛИЧНОЙ БЕТЫ — ЧЕТЫРЕ МЕСЯЦА
ЗА ЭТО ВРЕМЯ ДОЛЖНЫ БЫТЬ РЕШЕНЫ СЛЕДУЮЩИЕ ЗАДАЧИ:
![Page 26: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/26.jpg)
ВЗАИМО-ДЕЙСТВИЕ
/ DIGITAL AGENCY /
![Page 27: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/27.jpg)
СТРУКТУРА ВЗАИМОДЕЙСТВИЯ
Роль
Функциональный заказчик
ИТ инфраструктура/Эксплуатация
Верстка
Программирование
Дизайн
Контентное наполнение
Тестирование
УПРАВЛЕНИЕ ПРОЕКТОМ
![Page 28: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/28.jpg)
ПЛАНИ-РОВАНИЕ
/ DIGITAL AGENCY /
![Page 29: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/29.jpg)
/ DIGITAL AGENCY /
НЕОБХОДИМО РАЗРАБОТАТЬ ЭФФЕКТИВНУЮ СИСТЕМУ ПРОЕКТНОЙ РАБОТЫ, УЧИТЫВАЮЩУЮ БОЛЬШОЙ ПРОЦЕСС СОГЛАСОВАНИЯ И БОЛЬШОЕ КОЛИЧЕСТВО ПОДРЯДЧИКОВ
УПРАВЛЕНИЕ ПРОЕКТОМ ПЛАНИРОВАНИЕ
![Page 30: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/30.jpg)
ПЛАНИРОВАНИЕ
Прототип Утверждение Дизайн Утверждение Шаблонизация
Программирование Наполнениеконтентом Авторскийнадзор Тестирование
УПРАВЛЕНИЕ ПРОЕКТОМ
![Page 31: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/31.jpg)
ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
Необходимо было совместить все планы подрядчиков
Соединить экстремальные процессы с каскадными
УПРАВЛЕНИЕ ПРОЕКТОМ
![Page 32: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/32.jpg)
ПЛАНИРОВАНИЕ
120 000 страниц
Сортируем
Страницы с сервисами
Прототип
/ DIGITAL AGENCY /
УПРАВЛЕНИЕ ПРОЕКТОМ
стандартные
Макет
Сетка
Верстка
Контент
Программирование
Проектирование
уникальные
Страницы без сервисов
![Page 33: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/33.jpg)
ОПРОСЫ ПОЛЬЗОВАТЕЛЕЙ
/ DIGITAL AGENCY /
РЕЗУЛЬТАТ
![Page 34: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/34.jpg)
ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
СПИСОК ЗАДАЧ ФОРМИРОВАЛСЯ ТАКИМ ОБРАЗОМ, ЧТОБЫ ОБЕСПЕЧИТЬ РАВНОМЕРНУЮ ЗАГРУЗКУ И ИЗБЕЖАТЬ ПЕРЕПРОИЗВОДСТВА, КОТОРОЕ МОЖЕТ ПРИВЕСТИ К ПЕРЕГРУЗКЕ ОДНОГО ИЗ УЗЛОВ И КАК СЛЕДСТВИЕ ПРОСТОЮ ОСТАЛЬНЫХ
УПРАВЛЕНИЕ ПРОЕКТОМ
![Page 35: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/35.jpg)
/ DIGITAL AGENCY /
Бриф
Прототип
Утверждение
Дизайн
Утверждение
Программирование
Тестирование
УПРАВЛЕНИЕ ПРОЕКТОМ
![Page 36: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/36.jpg)
ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
Интерфейсная сложность
Несколько заказчиков внутри СБЕРБАНКА => долгое согласование
Скорость верстки
Этапы программирования
Этапы были разделены на двухнедельные итерации.
1
2
3
4
УПРАВЛЕНИЕ ПРОЕКТОМ
![Page 37: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/37.jpg)
ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
• ПЕРЕПРОИЗВОДСТВО;
• ОЖИДАНИЕ (ПОТЕРИ ВРЕМЕНИ);
• ЛИШНЯЯ ТРАНСПОРТИРОВКА ИЛИ ПЕРЕМЕЩЕНИЕ. ИЗЛИШНЯЯ ОБРАБОТКА (В ТОМ ЧИСЛЕ И ИЗ-ЗА БРАКА);
• ИЗБЫТОК ЗАПАСОВ;
• ЛИШНИЕ ДВИЖЕНИЯ;
• БРАК.
УПРАВЛЕНИЕ ПРОЕКТОМ
![Page 38: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/38.jpg)
ИНСТРУ-МЕНТЫ
/ DIGITAL AGENCY /
![Page 39: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/39.jpg)
КОПИЯ САЙТА
/ DIGITAL AGENCY /
Был риск частичного запуска сайта, защита от риска — создание копии старого сайта.
— старый дизайн адаптирован под новый;
— если пользователь попадал на старый сайт, то его перекидывали на новый.
ИНСТРУМЕНТЫ /
![Page 40: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/40.jpg)
СОВМЕСТНАЯ РАБОТА
/ DIGITAL AGENCY /
Проект был очень большой, срок выполнения очень короткий. Задействовано большое количество сотрудников;
Типизированы все задачи и объекты;
Для статуса использован набор таблиц в Google Docs.
1
2
3
ИНСТРУМЕНТЫ /
![Page 41: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/41.jpg)
КОМАНДА
/ DIGITAL AGENCY /
![Page 42: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/42.jpg)
ЗАПУСК
/ DIGITAL AGENCY /
ПРИ СОЗДАНИИ И ПОДДЕРЖКЕ СОСТАВ КОМАНДЫ РАЗЛИЧАЕТСЯ.
ЗАДАЧА КОМАНДЫ НА СТАРТЕ СДЕЛАТЬ КАК МОЖНО БОЛЬШЕ К СТАРТУ.
КОМАНДА
![Page 43: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/43.jpg)
Руводитель проекта
Системныйаналитик Менеджер проекта
Старшийконтент
менеджерКонтентменеджер
Контентменеджер
Контент-менеджер
Контент-менеджер
Арт-директор
Специалистпо
интерфейсамДизайнер Дизайнер Дизайнер Дизайнер
РАЗРАБОТКАКОМАНДА
![Page 44: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/44.jpg)
ПОДДЕРЖКА
/ DIGITAL AGENCY /
КОНТЕНТПРОМО-ПОДДЕРЖКА ДОРАБОТКИ САЙТАПРОЕКТИРОВАНИЕ И ДИЗАЙН НОВЫХ РАЗДЕЛОВЮЗАБИЛИТИ РЕКОМЕНДАЦИИ
ЗАДАЧА КОМАНДЫ ПОДДЕРЖКИ:ВЫСОКИЙ УРОВЕНЬ КЛИЕНТСКОГО СЕРВИСА ПРЕДСКАЗУЕМОСТЬ РЕЗУЛЬТАТОВДОКУМЕНТАЦИЯАНАЛИТИЧЕСКИЕ ЗАДАЧИ — ФОРМУЛИРОВКА ЗАДАЧ С УЧЕТОМ МНЕНИЙ ЗАКАЗЧИКОВ
КОМАНДА
![Page 45: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/45.jpg)
ПОДДЕРЖКАКОМАНДА
Руководительклиентскогосервиса
Аккаунтменеджер
Старшийконтентменеджер
Контентменеджер
Арт-директор
Дизайнер Дизайнер
![Page 46: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/46.jpg)
РЕЗУЛЬТАТ /
/ DIGITAL AGENCY /
![Page 47: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/47.jpg)
/ DIGITAL AGENCY /
Сайт запущен в срок. Увеличена скорости загрузки страниц
Возможность мастшабирования
Снижение затрат на разработку новых разделов
Получение опыта, который можно масштабировать на другие проекты даже
меньшего масштаба
РЕЗУЛЬТАТ /
![Page 48: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/48.jpg)
ПРЕМИИ И РЕЙТИНГИ
/ DIGITAL AGENCY /
РЕЗУЛЬТАТ
sberbank.ru удостоен международной награды в области интернет-дизайна» 3W awards в Нью-Йорке
sberbank.ru стал первым в ежегодном рейтинге эффективности веб-сайтов российских банков
![Page 49: Как мы улучшали сайт главного банка страны](https://reader031.vdocuments.pub/reader031/viewer/2022030222/588422fd1a28ab485c8b5f05/html5/thumbnails/49.jpg)
СПАСИБО! THANK YOU!
МОСКВА, УЛ. КРАСНОПРОЛЕТАРСКАЯ, ДОМ 16, СТРОЕНИЕ 3, ПОДЪЕЗД 8, ЭТАЖ 5, ОФИС 8
+7 (495) 785 94 33
/ DIGITAL AGENCY /