Кейс работы агенства по редизайну и контенту сайта Sberbank.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

14. СЕРВИСЫРЕЗУЛЬТАТ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32. СОВМЕСТНАЯ РАБОТАИНСТРУМЕНТЫ /

33. СОВМЕСТНАЯ РАБОТАИНСТРУМЕНТЫ / /

34. СОВМЕСТНАЯ РАБОТАИНСТРУМЕНТЫ //

35. СОВМЕСТНАЯ РАБОТАИНСТРУМЕНТЫ //

36. СОВМЕСТНАЯ РАБОТАИНСТРУМЕНТЫ / /

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

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

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

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

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

42. МИ
ПРИНЦИПЫ БЕРЕЖЛИВОГО ПРОИЗВОДСТВА
/ DIGITAL AGENCY /
1.ПЕРЕПРОИЗВОДСТВА;
2.ОЖИДАНИЯ (ПОТЕРИ ВРЕМЕНИ);
3.ИЗЛИШНЕЙ ОБРАБОТКИ
4.ИЗБЫТКА ЗАПАСОВ;
5.ЛИШНИХ ПЕРЕМЕЩЕНИЙ;
6.БРАК.
УПРАВЛЕНИЕ
ПРОЕКТОМ
(В ТОМ ЧИ
МИНИМИЗИРОВАТЬ

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

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

45. СТРУКТУРА ВЗАИМОДЕЙСТВИЯ
Представители подрядчиков
Функциональный
Заказчик
Проектное управление
Дизайн Группа
тестирования
Группа
проектирования и
разработки
Группа анализа
ДАЛЕЕЗАО «СберТех» AT Consulting
ЗАО «СберТех» AT Consulting ДАЛЕЕ Бэлл Интегратор
ОАО «Сбербанк»
ЗАО «СберТех»
AT Consulting
Бэлл ИнтеграторДАЛЕЕЗАО «СберТех»
AT Consulting
УПРАВЛЕНИЕ
ПРОЕКТОМ

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

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

48. ОПРОСЫ ПОЛЬЗОВАТЕЛЕЙРЕЗУЛЬТАТ

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

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