Доклад на конференции RIW 2015. Подробно описаны этапы и подробности работы по дизайн-поддержке обновления сайта Сбербанка РФ. Показаны методы организации взаимодействия сложно команды и нескольких подрядчиков.

1. КАК МЫ
УЛУЧШАЛИ
САЙТ ГЛАВНОГО
БАНКА СТРАНЫ
/ DIGITAL AGENCY /

2. ПОЧЕМУ
ГЛАВНЫЙ
/
/ DIGITAL AGENCY /

3. / DIGITAL AGENCY /
ПОЧЕМУ ГЛАВНЫЙ / СБЕРБАНК
17 ТЫС ОТДЕЛЕНИЙ
83СУБЪЕКТА ФЕДЕРАЦИИ
110 МЛН КЛИЕНТОВ
11 МЛН ЗА РУБЕЖОМ
90 ТЫС БАНКОМАТОВ

4. / DIGITAL AGENCY /
ПОЧЕМУ ГЛАВНЫЙ /
18 МЛН ПОСЕТИТЕЛЕЙ /МЕС
№15САЙТ ПО ОХВАТУ
8 МЛН ПЕРЕХОДОВ В ОНЛАЙН БАНК
3 МЛН СБЕРБАНК БИЗНЕС ОНЛАЙН
СБЕРБАНК

5. САЙТ ФЕДЕРАЛЬНОГО
МАСШТАБА
/ DIGITAL AGENCY /
— большой охват
— все соцдем-группы
— все типы устройств
— необходимость присутствия всех
продуктов
ПОЧЕМУ ГЛАВНЫЙ/

6. ЦЕЛИ
И
ЗАДАЧИ
/
/ DIGITAL AGENCY /

7. ЦЕЛИ И ЗАДАЧИ
/ DIGITAL AGENCY /
БИЗНЕС ЗАДАЧИ
ПОЛЬЗОВАТЕЛЬСКИЕ ЗАДАЧИ
ЦЕЛИ И ЗАДАЧИ/

8. БИЗНЕС
/ DIGITAL AGENCY /
Внедрить новую платформу BACKBASE
Соответствовать требованиям современного дизайна
Отвечать потребностям каждого клиентского сегмента
банка
Предоставить понятную структурированную информацию
о продуктах и услугах
Способствовать продажам
1
ЦЕЛИ И ЗАДАЧИ /
2
3
4
5

9. ПОЛЬЗОВАТЕЛЬСКИЕ
/ DIGITAL AGENCY /
Облегчить дизайн
Обеспечить доступность с разных платформ
Обеспечить пользователей доступной информацией о
банковских услугах
1
ЦЕЛИ И ЗАДАЧИ /
2
3

10. ГЛАЗА
БОЯТСЯ
РУКИ
ДЕЛАЮТ
/ DIGITAL AGENCY /

11. НО 120 000
СТРАНИЦ
И
4 МЕСЯЦА
/ DIGITAL AGENCY /

12. / DIGITAL AGENCY /
ГЛАЗА БОЯТСЯ
РУКИ ДЕЛАЮТ /
1.ДИЗАЙН
2.UX
3.ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ
CHALLENGE

13. ЛАКОНИЧНЫЙ И ПРОСТОЙ ДИЗАЙНДИЗАЙН /
1. Минимальное использование теней
2. Фотореалистичные изображения
3. Минимальный объем текста на странице
4. Применение простых и интуитивно
понятных пиктограмм

14. ПЛОСКИЙ ДИЗАЙН VS СКЕВОМОРФИЗМДИЗАЙН /

15. СЕРВИСЫДИЗАЙН /

16. СЕРВИСЫДИЗАЙН /

17. ВИДЖЕТЫДИЗАЙН /

18. / DIGITAL AGENCY /
ГЛАЗА БОЯТСЯ
РУКИ ДЕЛАЮТ /
1.ДИЗАЙН
2.UX
3.ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ
CHALLENGE

19. UX /
БРИФ НА
ИССЛЕДОВАНИЕ
ВЫБОР ПОДРЯДЧИКА
Программа
тестирования
Тестирование,
выработка
рекомендаций
Внедрение
доработок
• Постановка бизнес задачи
• Определение целевой
аудитории
• Определение ключевых
сценариев
Выбор подрядчика
в соответствии с закупочными
процедурами Банка
3
1
2
ЦИКЛОтветственный
ПРОВЕДЕНИЕ РЕГУЛЯРНЫХ
ЮЗАБИЛИТИ ТЕСТИРОВАНИЙ

20. UX /
АУДИТОРИЯ ИНТЕРНЕТА
В РАЗЛИЧНЫХ ПЛАТФОРМАХ
34%
24%
8%
66%
21.4
млн.чел
15.2
млн.чел
5.3
млн.чел
41.2
млн.чел

21. / DIGITAL AGENCY /
ГЛАЗА БОЯТСЯ
РУКИ ДЕЛАЮТ /
1.ДИЗАЙН
2.UX
3.ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ
CHALLENGE

22. ТИПЫ КОНТЕНТА
Информирующий Образовательный Развлекательный Вовлекающий Функциональный
‣ Навигация
‣ Главный промо-блок
‣ Анонсы на главной
‣ Текстовые описания
‣ Иконографика
‣ Иллюстрация
‣ Инфографика
‣ Видео
‣ Сервисы
‣ Соц.Медиа
/ DIGITAL AGENCY /
ИНФОРМАЦИОННОЕ
НАПОЛНЕНИЕ /

23. ПРИМЕР ДОРАБОТКИ ДИЗАЙНА
ИНФОГРАФИКА
ИНФОРМАЦИОННОЕ
НАПОЛНЕНИЕ /

24. УПРАВЛЕ-
НИЕ
ПРОЕКТОМ
/ DIGITAL AGENCY /

25. ОБЪЕМ РАБОТ
/ DIGITAL AGENCY /
УПРАВЛЕНИЕ
ПРОЕКТОМ /
1. ОБНОВЛЕНИЕ ДИЗАЙНА
2. РЕИНЖИНИРИНГ ИНТЕРФЕЙСОВ
СЕРВИСОВ
3. АДАПТАЦИЯ ДИЗАЙНА ПОД МОБИЛЬНЫЕ
УСТРОЙСТВА
4. ИСПРАВЛЕНИЕ ЗАМЕЧАНИЙ ПО
УДОБСТВУ ИСПОЛЬЗОВАНИЯ
5. СОЗДАНИЕ НОВОЙ АРХИТЕКТУРЫ
6. ПЕРЕНОС КОНТЕНТ
7. ОСУЩЕСТВЛЕНИЕ ВЕРСТКИ И
ПРОГРАММИРОВАНИЯ
8. ТЕСТИРОВАНИЕ
9. ИТ-ИНФРАСТРУКТУРА
10. ЗАПУСК
ОТ СТАРТА ПРОЕКТА ДО НОВОГО САЙТА В СТАДИИ ПУБЛИЧНОЙ БЕТЫ — ЧЕТЫРЕ МЕСЯЦА
ЗА ЭТО ВРЕМЯ ДОЛЖНЫ БЫТЬ РЕШЕНЫ СЛЕДУЮЩИЕ ЗАДАЧИ:

26. ВЗАИМО-
ДЕЙСТВИЕ
/ DIGITAL AGENCY /

27. СТРУКТУРА ВЗАИМОДЕЙСТВИЯ
Роль
Функциональный заказчик
ИТ инфраструктура/Эксплуатация
Верстка
Программирование
Дизайн
Контентное наполнение
Тестирование
УПРАВЛЕНИЕ
ПРОЕКТОМ

28. ПЛАНИ-
РОВАНИЕ
/ DIGITAL AGENCY /

29. / DIGITAL AGENCY /
НЕОБХОДИМО РАЗРАБОТАТЬ ЭФФЕКТИВНУЮ СИСТЕМУ
ПРОЕКТНОЙ РАБОТЫ, УЧИТЫВАЮЩУЮ БОЛЬШОЙ
ПРОЦЕСС СОГЛАСОВАНИЯ И БОЛЬШОЕ КОЛИЧЕСТВО
ПОДРЯДЧИКОВ
УПРАВЛЕНИЕ
ПРОЕКТОМ
ПЛАНИРОВАНИЕ

30. ПЛАНИРОВАНИЕ
Прототип Утверждение Дизайн Утверждение Шаблонизация
Программирование
Наполнение
контентом
Авторский надзор Тестирование
УПРАВЛЕНИЕ
ПРОЕКТОМ

31. ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
Необходимо было совместить все планы подрядчиков
Соединить экстремальные процессы с каскадными
УПРАВЛЕНИЕ
ПРОЕКТОМ

32. ПЛАНИРОВАНИЕ
120 000
страниц
Сортируем
Страницы с
сервисами
Прототип
/ DIGITAL AGENCY /
УПРАВЛЕНИЕ
ПРОЕКТОМ
стандартные
Макет
Сетка
Верстка
Контент
Программирование
Проектирование
уникальные
Страницы без
сервисов

33. ОПРОСЫ ПОЛЬЗОВАТЕЛЕЙ
/ DIGITAL AGENCY /
РЕЗУЛЬТАТ

34. ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
СПИСОК ЗАДАЧ ФОРМИРОВАЛСЯ ТАКИМ ОБРАЗОМ,
ЧТОБЫ ОБЕСПЕЧИТЬ РАВНОМЕРНУЮ ЗАГРУЗКУ И
ИЗБЕЖАТЬ ПЕРЕПРОИЗВОДСТВА, КОТОРОЕ МОЖЕТ
ПРИВЕСТИ К ПЕРЕГРУЗКЕ ОДНОГО ИЗ УЗЛОВ И КАК
СЛЕДСТВИЕ ПРОСТОЮ ОСТАЛЬНЫХ
УПРАВЛЕНИЕ
ПРОЕКТОМ

35. / DIGITAL AGENCY /
Б
риф
П
рототип
Утверж
дение
Д
изайн
Утверж
дение
П
рограм
м
ирование
Тестирование
УПРАВЛЕНИЕ
ПРОЕКТОМ

36. ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
Интерфейсная сложность
Несколько заказчиков внутри СБЕРБАНКА => долгое
согласование
Скорость верстки
Этапы программирования
Этапы были разделены на двухнедельные итерации.
1
2
3
4
УПРАВЛЕНИЕ
ПРОЕКТОМ

37. ПЛАНИРОВАНИЕ
/ DIGITAL AGENCY /
• ПЕРЕПРОИЗВОДСТВО;
• ОЖИДАНИЕ (ПОТЕРИ ВРЕМЕНИ);
• ЛИШНЯЯ ТРАНСПОРТИРОВКА ИЛИ
ПЕРЕМЕЩЕНИЕ. ИЗЛИШНЯЯ ОБРАБОТКА
(В ТОМ ЧИСЛЕ И ИЗ-ЗА БРАКА);
• ИЗБЫТОК ЗАПАСОВ;
• ЛИШНИЕ ДВИЖЕНИЯ;
• БРАК.
УПРАВЛЕНИЕ
ПРОЕКТОМ

38. ИНСТРУ-
МЕНТЫ
/ DIGITAL AGENCY /

39. КОПИЯ САЙТА
/ DIGITAL AGENCY /
Был риск частичного запуска сайта,
защита от риска — создание копии старого сайта.
— старый дизайн адаптирован под новый;
— если пользователь попадал на старый сайт,
то его перекидывали на новый.
ИНСТРУМЕНТЫ /

40. СОВМЕСТНАЯ РАБОТА
/ DIGITAL AGENCY /
Проект был очень большой, срок выполнения очень
короткий. Задействовано большое количество
сотрудников;
Типизированы все задачи и объекты;
Для статуса использован набор таблиц в Google Docs.
1
2
3
ИНСТРУМЕНТЫ /

41. КОМАНДА
/ DIGITAL AGENCY /

42. ЗАПУСК
/ DIGITAL AGENCY /
ПРИ СОЗДАНИИ И ПОДДЕРЖКЕ СОСТАВ КОМАНДЫ РАЗЛИЧАЕТСЯ.
ЗАДАЧА КОМАНДЫ НА СТАРТЕ СДЕЛАТЬ КАК МОЖНО БОЛЬШЕ К
СТАРТУ.
КОМАНДА

43. Руводитель проекта
Системный
аналитик
Менеджер проекта
Старший
контент
менеджер
Контент
менеджер
Контент
менеджер
Контент-
менеджер
Контент-
менеджер
Арт-директор
Специалист
по
интерфейсам
Дизайнер Дизайнер Дизайнер Дизайнер
РАЗРАБОТКАКОМАНДА

44. ПОДДЕРЖКА
/ DIGITAL AGENCY /
КОНТЕНТ
ПРОМО-ПОДДЕРЖКА
ДОРАБОТКИ САЙТА
ПРОЕКТИРОВАНИЕ И ДИЗАЙН НОВЫХ РАЗДЕЛОВ
ЮЗАБИЛИТИ РЕКОМЕНДАЦИИ
ЗАДАЧА КОМАНДЫ ПОДДЕРЖКИ:
ВЫСОКИЙ УРОВЕНЬ КЛИЕНТСКОГО СЕРВИСА
ПРЕДСКАЗУЕМОСТЬ РЕЗУЛЬТАТОВ
ДОКУМЕНТАЦИЯ
АНАЛИТИЧЕСКИЕ ЗАДАЧИ — ФОРМУЛИРОВКА ЗАДАЧ С УЧЕТОМ
МНЕНИЙ ЗАКАЗЧИКОВ
КОМАНДА

45. ПОДДЕРЖКАКОМАНДА
Руководитель клиентского сервиса
Аккаунт
менеджер
Старший контент
менеджер
Контент менеджер
Арт-директор
Дизайнер Дизайнер

46. РЕЗУЛЬТАТ
/
/ DIGITAL AGENCY /

47. / DIGITAL AGENCY /
Сайт запущен в срок. Увеличена скорости загрузки страниц
Возможность мастшабирования
Снижение затрат на разработку новых разделов
Получение опыта, который можно масштабировать на другие проекты даже
меньшего масштаба
РЕЗУЛЬТАТ /

48. ПРЕМИИ И РЕЙТИНГИ
/ DIGITAL AGENCY /
РЕЗУЛЬТАТ
sberbank.ru удостоен международной награды
в области интернет-дизайна» 3W awards в
Нью-Йорке
sberbank.ru стал первым
в ежегодном рейтинге эффективности веб-
сайтов российских банков

49. СПАСИБО!
THANK YOU!
МОСКВА, УЛ. КРАСНОПРОЛЕТАРСКАЯ,
ДОМ 16, СТРОЕНИЕ 3, ПОДЪЕЗД 8,
ЭТАЖ 5, ОФИС 8
+7 (495) 785 94 33
/ DIGITAL AGENCY /