Как мы улучшали сайт главного банка страны
TRANSCRIPT
КАК МЫ УЛУЧШАЛИ САЙТ ГЛАВНОГО БАНКА СТРАНЫ / DIGITAL AGENCY /
ПОЧЕМУ ГЛАВНЫЙ /
/ DIGITAL AGENCY /
/ DIGITAL AGENCY /
ПОЧЕМУ ГЛАВНЫЙ / СБЕРБАНК
17 ТЫС ОТДЕЛЕНИЙ
83 СУБЪЕКТА ФЕДЕРАЦИИ
110 МЛН КЛИЕНТОВ
11 МЛН ЗА РУБЕЖОМ
90 ТЫС БАНКОМАТОВ
/ DIGITAL AGENCY /
ПОЧЕМУ ГЛАВНЫЙ /
18 МЛН ПОСЕТИТЕЛЕЙ /МЕС
№15 САЙТ ПО ОХВАТУ
8 МЛН ПЕРЕХОДОВ В ОНЛАЙН БАНК
3 МЛН СБЕРБАНК БИЗНЕС ОНЛАЙН
СБЕРБАНК
САЙТ ФЕДЕРАЛЬНОГО МАСШТАБА
/ DIGITAL AGENCY /
— большой охват
— все соцдем-группы
— все типы устройств
— необходимость присутствия всех
продуктов
ПОЧЕМУ ГЛАВНЫЙ/
ЦЕЛИ И ЗАДАЧИ /
/ DIGITAL AGENCY /
ЦЕЛИ И ЗАДАЧИ
/ DIGITAL AGENCY /
БИЗНЕС ЗАДАЧИ
ПОЛЬЗОВАТЕЛЬСКИЕ ЗАДАЧИ
ЦЕЛИ И ЗАДАЧИ/
БИЗНЕС
/ DIGITAL AGENCY /
Внедрить новую платформу BACKBASE
Соответствовать требованиям современного дизайна
Отвечать потребностям каждого клиентского сегмента банка
Предоставить понятную структурированную информацию о продуктах и услугах
Способствовать продажам
1
ЦЕЛИ И ЗАДАЧИ /
2
3
4
5
ПОЛЬЗОВАТЕЛЬСКИЕ
/ DIGITAL AGENCY /
Облегчить дизайн
Обеспечить доступность с разных платформ
Обеспечить пользователей доступной информацией о банковских услугах
1
ЦЕЛИ И ЗАДАЧИ /
2
3
ГЛАЗА БОЯТСЯ РУКИ ДЕЛАЮТ / / DIGITAL AGENCY /
НО 120 000 СТРАНИЦ И 4 МЕСЯЦА / / DIGITAL AGENCY /
/ DIGITAL AGENCY /
ГЛАЗА БОЯТСЯ РУКИ ДЕЛАЮТ /
1.ДИЗАЙН
2.UX
3.ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ
CHALLENGE
ЛАКОНИЧНЫЙ И ПРОСТОЙ ДИЗАЙНДИЗАЙН /
1. Минимальное использование теней
2. Фотореалистичные изображения
3. Минимальный объем текста на странице
4. Применение простых и интуитивно понятных пиктограмм
ПЛОСКИЙ ДИЗАЙН VS СКЕВОМОРФИЗМДИЗАЙН /
СЕРВИСЫДИЗАЙН /
СЕРВИСЫДИЗАЙН /
ВИДЖЕТЫДИЗАЙН /
/ DIGITAL AGENCY /
ГЛАЗА БОЯТСЯ РУКИ ДЕЛАЮТ /
1.ДИЗАЙН
2.UX
3.ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ
CHALLENGE
UX /
БРИФ НА ИССЛЕДОВАНИЕ
ВЫБОР ПОДРЯДЧИКА
Программа тестирования
Тестирование, выработка
рекомендаций
Внедрение доработок
• Постановка бизнес задачи • Определение целевой аудитории
• Определение ключевых сценариев
Выбор подрядчика в соответствии с закупочными процедурами Банка
3
1
2
ЦИКЛ Ответственный
ПРОВЕДЕНИЕ РЕГУЛЯРНЫХ ЮЗАБИЛИТИ ТЕСТИРОВАНИЙ
UX /
АУДИТОРИЯ ИНТЕРНЕТАВ РАЗЛИЧНЫХ ПЛАТФОРМАХ
34%
24%8%
66%
21.4 млн.чел
15.2 млн.чел
5.3 млн.чел
41.2 млн.чел
/ DIGITAL AGENCY /
ГЛАЗА БОЯТСЯ РУКИ ДЕЛАЮТ /
1.ДИЗАЙН
2.UX
3.ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ
CHALLENGE
ТИПЫ КОНТЕНТА
Информирующий Образовательный Развлекательный Вовлекающий Функциональный‣ Навигация
‣ Главный промо-блок
‣ Анонсы на главной
‣ Текстовые описания
‣ Иконографика
‣ Иллюстрация
‣ Инфографика
‣ Видео
‣ Сервисы
‣ Соц. Медиа
/ DIGITAL AGENCY /
ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ /
ПРИМЕР ДОРАБОТКИ ДИЗАЙНА ИНФОГРАФИКАИНФОРМАЦИОННОЕ
НАПОЛНЕНИЕ /
УПРАВЛЕ- НИЕ ПРОЕКТОМ
/ DIGITAL AGENCY /
ОБЪЕМ РАБОТ
/ DIGITAL AGENCY /
УПРАВЛЕНИЕ ПРОЕКТОМ /
1. ОБНОВЛЕНИЕ ДИЗАЙНА
2. РЕИНЖИНИРИНГ ИНТЕРФЕЙСОВ СЕРВИСОВ
3. АДАПТАЦИЯ ДИЗАЙНА ПОД МОБИЛЬНЫЕ УСТРОЙСТВА
4. ИСПРАВЛЕНИЕ ЗАМЕЧАНИЙ ПО УДОБСТВУ ИСПОЛЬЗОВАНИЯ
5. СОЗДАНИЕ НОВОЙ АРХИТЕКТУРЫ
6. ПЕРЕНОС КОНТЕНТ
7. ОСУЩЕСТВЛЕНИЕ ВЕРСТКИ И ПРОГРАММИРОВАНИЯ
8. ТЕСТИРОВАНИЕ
9. ИТ-ИНФРАСТРУКТУРА
10. ЗАПУСК
ОТ СТАРТА ПРОЕКТА ДО НОВОГО САЙТА В СТАДИИ ПУБЛИЧНОЙ БЕТЫ — ЧЕТЫРЕ МЕСЯЦА
ЗА ЭТО ВРЕМЯ ДОЛЖНЫ БЫТЬ РЕШЕНЫ СЛЕДУЮЩИЕ ЗАДАЧИ:
ВЗАИМО-ДЕЙСТВИЕ
/ DIGITAL AGENCY /
СТРУКТУРА ВЗАИМОДЕЙСТВИЯ
Роль
Функциональный заказчик
ИТ инфраструктура/Эксплуатация
Верстка
Программирование
Дизайн
Контентное наполнение
Тестирование
УПРАВЛЕНИЕ ПРОЕКТОМ
ПЛАНИ-РОВАНИЕ
/ DIGITAL AGENCY /
/ DIGITAL AGENCY /
НЕОБХОДИМО РАЗРАБОТАТЬ ЭФФЕКТИВНУЮ СИСТЕМУ ПРОЕКТНОЙ РАБОТЫ, УЧИТЫВАЮЩУЮ БОЛЬШОЙ ПРОЦЕСС СОГЛАСОВАНИЯ И БОЛЬШОЕ КОЛИЧЕСТВО ПОДРЯДЧИКОВ
УПРАВЛЕНИЕ ПРОЕКТОМ ПЛАНИРОВАНИЕ
ПЛАНИРОВАНИЕ
Прототип Утверждение Дизайн Утверждение Шаблонизация
Программирование Наполнениеконтентом Авторскийнадзор Тестирование
УПРАВЛЕНИЕ ПРОЕКТОМ
ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
Необходимо было совместить все планы подрядчиков
Соединить экстремальные процессы с каскадными
УПРАВЛЕНИЕ ПРОЕКТОМ
ПЛАНИРОВАНИЕ
120 000 страниц
Сортируем
Страницы с сервисами
Прототип
/ DIGITAL AGENCY /
УПРАВЛЕНИЕ ПРОЕКТОМ
стандартные
Макет
Сетка
Верстка
Контент
Программирование
Проектирование
уникальные
Страницы без сервисов
ОПРОСЫ ПОЛЬЗОВАТЕЛЕЙ
/ DIGITAL AGENCY /
РЕЗУЛЬТАТ
ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
СПИСОК ЗАДАЧ ФОРМИРОВАЛСЯ ТАКИМ ОБРАЗОМ, ЧТОБЫ ОБЕСПЕЧИТЬ РАВНОМЕРНУЮ ЗАГРУЗКУ И ИЗБЕЖАТЬ ПЕРЕПРОИЗВОДСТВА, КОТОРОЕ МОЖЕТ ПРИВЕСТИ К ПЕРЕГРУЗКЕ ОДНОГО ИЗ УЗЛОВ И КАК СЛЕДСТВИЕ ПРОСТОЮ ОСТАЛЬНЫХ
УПРАВЛЕНИЕ ПРОЕКТОМ
/ DIGITAL AGENCY /
Бриф
Прототип
Утверждение
Дизайн
Утверждение
Программирование
Тестирование
УПРАВЛЕНИЕ ПРОЕКТОМ
ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
Интерфейсная сложность
Несколько заказчиков внутри СБЕРБАНКА => долгое согласование
Скорость верстки
Этапы программирования
Этапы были разделены на двухнедельные итерации.
1
2
3
4
УПРАВЛЕНИЕ ПРОЕКТОМ
ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
• ПЕРЕПРОИЗВОДСТВО;
• ОЖИДАНИЕ (ПОТЕРИ ВРЕМЕНИ);
• ЛИШНЯЯ ТРАНСПОРТИРОВКА ИЛИ ПЕРЕМЕЩЕНИЕ. ИЗЛИШНЯЯ ОБРАБОТКА (В ТОМ ЧИСЛЕ И ИЗ-ЗА БРАКА);
• ИЗБЫТОК ЗАПАСОВ;
• ЛИШНИЕ ДВИЖЕНИЯ;
• БРАК.
УПРАВЛЕНИЕ ПРОЕКТОМ
ИНСТРУ-МЕНТЫ
/ DIGITAL AGENCY /
КОПИЯ САЙТА
/ DIGITAL AGENCY /
Был риск частичного запуска сайта, защита от риска — создание копии старого сайта.
— старый дизайн адаптирован под новый;
— если пользователь попадал на старый сайт, то его перекидывали на новый.
ИНСТРУМЕНТЫ /
СОВМЕСТНАЯ РАБОТА
/ DIGITAL AGENCY /
Проект был очень большой, срок выполнения очень короткий. Задействовано большое количество сотрудников;
Типизированы все задачи и объекты;
Для статуса использован набор таблиц в Google Docs.
1
2
3
ИНСТРУМЕНТЫ /
КОМАНДА
/ DIGITAL AGENCY /
ЗАПУСК
/ DIGITAL AGENCY /
ПРИ СОЗДАНИИ И ПОДДЕРЖКЕ СОСТАВ КОМАНДЫ РАЗЛИЧАЕТСЯ.
ЗАДАЧА КОМАНДЫ НА СТАРТЕ СДЕЛАТЬ КАК МОЖНО БОЛЬШЕ К СТАРТУ.
КОМАНДА
Руводитель проекта
Системныйаналитик Менеджер проекта
Старшийконтент
менеджерКонтентменеджер
Контентменеджер
Контент-менеджер
Контент-менеджер
Арт-директор
Специалистпо
интерфейсамДизайнер Дизайнер Дизайнер Дизайнер
РАЗРАБОТКАКОМАНДА
ПОДДЕРЖКА
/ DIGITAL AGENCY /
КОНТЕНТПРОМО-ПОДДЕРЖКА ДОРАБОТКИ САЙТАПРОЕКТИРОВАНИЕ И ДИЗАЙН НОВЫХ РАЗДЕЛОВЮЗАБИЛИТИ РЕКОМЕНДАЦИИ
ЗАДАЧА КОМАНДЫ ПОДДЕРЖКИ:ВЫСОКИЙ УРОВЕНЬ КЛИЕНТСКОГО СЕРВИСА ПРЕДСКАЗУЕМОСТЬ РЕЗУЛЬТАТОВДОКУМЕНТАЦИЯАНАЛИТИЧЕСКИЕ ЗАДАЧИ — ФОРМУЛИРОВКА ЗАДАЧ С УЧЕТОМ МНЕНИЙ ЗАКАЗЧИКОВ
КОМАНДА
ПОДДЕРЖКАКОМАНДА
Руководительклиентскогосервиса
Аккаунтменеджер
Старшийконтентменеджер
Контентменеджер
Арт-директор
Дизайнер Дизайнер
РЕЗУЛЬТАТ /
/ DIGITAL AGENCY /
/ DIGITAL AGENCY /
Сайт запущен в срок. Увеличена скорости загрузки страниц
Возможность мастшабирования
Снижение затрат на разработку новых разделов
Получение опыта, который можно масштабировать на другие проекты даже
меньшего масштаба
РЕЗУЛЬТАТ /
ПРЕМИИ И РЕЙТИНГИ
/ DIGITAL AGENCY /
РЕЗУЛЬТАТ
sberbank.ru удостоен международной награды в области интернет-дизайна» 3W awards в Нью-Йорке
sberbank.ru стал первым в ежегодном рейтинге эффективности веб-сайтов российских банков
СПАСИБО! THANK YOU!
МОСКВА, УЛ. КРАСНОПРОЛЕТАРСКАЯ, ДОМ 16, СТРОЕНИЕ 3, ПОДЪЕЗД 8, ЭТАЖ 5, ОФИС 8
+7 (495) 785 94 33
/ DIGITAL AGENCY /