РИФ 2016, Глобальное обновление сайта sberbank.ru:...

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

ПОЧЕМУ ГЛАВНЫЙ /

/ DIGITAL AGENCY /

/ DIGITAL AGENCY /

ПОЧЕМУ ГЛАВНЫЙ /

18 МЛН ПОСЕТИТЕЛЕЙ /МЕС

№15 САЙТ ПО ОХВАТУ

8 МЛН ПЕРЕХОДОВ В ОНЛАЙН БАНК

3 МЛН СБЕРБАНК БИЗНЕС ОНЛАЙН17 ТЫС ОТДЕЛЕНИЙ

83 СУБЪЕКТА ФЕДЕРАЦИИ

110 МЛН КЛИЕНТОВ

11 МЛН ЗА РУБЕЖОМ

90 ТЫС БАНКОМАТОВ

САЙТ ФЕДЕРАЛЬНОГО МАСШТАБА

/ DIGITAL AGENCY /

— большой охват

— все соцдем-группы

— все типы устройств

— необходимость присутствия всех

продуктов

ПОЧЕМУ ГЛАВНЫЙ/

ЦЕЛИ И ЗАДАЧИ /

/ DIGITAL AGENCY /

БИЗНЕС

/ DIGITAL AGENCY /

Внедрить новую платформу BACKBASE

Предоставить понятную структурированную информацию о продуктах и услугах

Способствовать продажам

ЦЕЛИ И ЗАДАЧИ /

1

2

3

Облегчить дизайн

Обеспечить доступность с разных платформ

Обеспечить пользователей доступной информацией о банковских услугах

1

2

3

ПОЛЬЗОВАТЕЛЬСКИЕ

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

/ DIGITAL AGENCY /

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

1.ДИЗАЙН

2.UX

3.ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ

4.ПРОЕКТНОЕ УПРАВЛЕНИЕ

CHALLENGE

ЛАКОНИЧНЫЙ И ПРОСТОЙ ДИЗАЙНДИЗАЙН /

1. Минимальное использование теней

2. Фотореалистичные изображения

3. Минимальный объем текста на странице

4. Применение простых и интуитивно понятных пиктограмм

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

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

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

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

/ DIGITAL AGENCY /


1.ДИЗАЙН

2.UX



CHALLENGE

UX /

БРИФ НА ИССЛЕДОВАНИЕ

ВЫБОР ПОДРЯДЧИКА

Программа тестирования

Тестирование, выработка

рекомендаций

Внедрение доработок

• Постановка бизнес задачи • Определение целевой аудитории

• Определение ключевых сценариев

Выбор подрядчика в соответствии с закупочными процедурами Банка

3

1

2

ЦИКЛ ТЕСТИРОВАНИЙ И ДОРАБОТОКОтветственный

ПРОВЕДЕНИЕ РЕГУЛЯРНЫХ ЮЗАБИЛИТИ ТЕСТИРОВАНИЙ

UX /

АУДИТОРИЯ ИНТЕРНЕТАВ РАЗЛИЧНЫХ ПЛАТФОРМАХ

34%

24%8%

66%

21.4 млн.чел

15.2 млн.чел

5.3 млн.чел

41.2 млн.чел

/ DIGITAL AGENCY /


1.ДИЗАЙН

2.UX



CHALLENGE

ТИПЫ КОНТЕНТА

Информирующий Образовательный Вовлекающий Функциональный‣ Навигация

‣ Главный промо-блок

‣ Анонсы на главной

‣ Текстовые описания

‣ Иконографика

‣ Иллюстрация

‣ Инфографика

‣ Видео

‣ Сервисы

‣ Соц. Медиа

ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ /

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

НАПОЛНЕНИЕ /

/ DIGITAL AGENCY /


1.ДИЗАЙН

2.UX

3. ИНФОРМАЦИОННОЕ НАПОЛНЕНИЕ


CHALLENGE

ОБЪЕМ РАБОТ

/ DIGITAL AGENCY /

УПРАВЛЕНИЕ ПРОЕКТОМ /

1. ОБНОВЛЕНИЕ ДИЗАЙНА

2. РЕИНЖИНИРИНГ ИНТЕРФЕЙСОВ СЕРВИСОВ

3. АДАПТАЦИЯ ДИЗАЙНА ПОД МОБИЛЬНЫЕ УСТРОЙСТВА

4. ИСПРАВЛЕНИЕ ЗАМЕЧАНИЙ ПО УДОБСТВУ ИСПОЛЬЗОВАНИЯ

5. СОЗДАНИЕ НОВОЙ АРХИТЕКТУРЫ

6. ПЕРЕНОС КОНТЕНТ

7. ОСУЩЕСТВЛЕНИЕ ВЕРСТКИ И ПРОГРАММИРОВАНИЯ

8. ТЕСТИРОВАНИЕ

9. ИТ-ИНФРАСТРУКТУРА

10. ЗАПУСК

ОТ СТАРТА ПРОЕКТА ДО НОВОГО САЙТА В СТАДИИ ПУБЛИЧНОЙ БЕТЫ — ЧЕТЫРЕ МЕСЯЦА

ЗА ЭТО ВРЕМЯ ДОЛЖНЫ БЫТЬ РЕШЕНЫ СЛЕДУЮЩИЕ ЗАДАЧИ:

ПЛАНИРОВАНИЕ

Прототип Утверждение Дизайн Утверждение Шаблонизация

Программирование Наполнениеконтентом Авторскийнадзор Тестирование

УПРАВЛЕНИЕ ПРОЕКТОМ


/ DIGITAL AGENCY /

Необходимо было совместить все планы подрядчиков

Соединить экстремальные процессы с каскадными


/ DIGITAL AGENCY /

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

УПРАВЛЕНИЕ ПРОЕКТОМ ПЛАНИРОВАНИЕ


120 000 страниц

Сортируем

Страницы с сервисами

Прототип


стандартные

Макет

Сетка

Верстка

Контент

Программирование

Проектирование

уникальные

Страницы без сервисов


/ DIGITAL AGENCY /

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



/ DIGITAL AGENCY /

Интерфейсная сложность

Несколько заказчиков внутри СБЕРБАНКА => долгое согласование

Скорость верстки

Этапы программирования

Этапы были разделены на двухнедельные итерации.

1

2

3

4


ИНСТРУ-МЕНТЫ

/ DIGITAL AGENCY /

КОПИЯ САЙТА

/ DIGITAL AGENCY /

Был риск частичного запуска сайта, защита от риска — создание копии старого сайта.

— старый дизайн адаптирован под новый;

— если пользователь попадал на старый сайт, то его перекидывали на новый.

ИНСТРУМЕНТЫ /

СОВМЕСТНАЯ РАБОТА

/ DIGITAL AGENCY /

Проект был очень большой, срок выполнения очень короткий. Задействовано большое количество сотрудников;

Типизированы все задачи и объекты;

Для статуса использован набор таблиц в Google Docs.

1

2

3

ИНСТРУМЕНТЫ /

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

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

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

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

КОМАНДА

/ DIGITAL AGENCY /

Руводитель проекта

Системныйаналитик Менеджер проекта

Старшийконтент

менеджерКонтентменеджер

Контентменеджер

Контент-менеджер

Контент-менеджер

Арт-директор

Специалистпо

интерфейсамДизайнер Дизайнер Дизайнер Дизайнер

РАЗРАБОТКАКОМАНДА

ЗАПУСК

/ DIGITAL AGENCY /

ПРИ СОЗДАНИИ И ПОДДЕРЖКЕ СОСТАВ КОМАНДЫ РАЗЛИЧАЕТСЯ.

ЗАДАЧА КОМАНДЫ НА СТАРТЕ СДЕЛАТЬ КАК МОЖНО БОЛЬШЕ К СТАРТУ.

КОМАНДА

ПОДДЕРЖКА

/ DIGITAL AGENCY /

КОНТЕНТПРОМО-ПОДДЕРЖКА ДОРАБОТКИ САЙТАПРОЕКТИРОВАНИЕ И ДИЗАЙН НОВЫХ РАЗДЕЛОВЮЗАБИЛИТИ РЕКОМЕНДАЦИИ

ЗАДАЧА КОМАНДЫ ПОДДЕРЖКИ:ВЫСОКИЙ УРОВЕНЬ КЛИЕНТСКОГО СЕРВИСА ПРЕДСКАЗУЕМОСТЬ РЕЗУЛЬТАТОВДОКУМЕНТАЦИЯАНАЛИТИЧЕСКИЕ ЗАДАЧИ — ФОРМУЛИРОВКА ЗАДАЧ С УЧЕТОМ МНЕНИЙ ЗАКАЗЧИКОВ

КОМАНДА

ПОДДЕРЖКАКОМАНДА

Руководительклиентскогосервиса

Аккаунтменеджер

Старшийконтентменеджер

Контентменеджер

Арт-директор

Дизайнер Дизайнер

/ DIGITAL AGENCY /

МИ

ПРИНЦИПЫ БЕРЕЖЛИВОГО ПРОИЗВОДСТВА

/ DIGITAL AGENCY /

1. ПЕРЕПРОИЗВОДСТВА;

2. ОЖИДАНИЯ (ПОТЕРИ ВРЕМЕНИ);

3. ИЗЛИШНЕЙ ОБРАБОТКИ

4. ИЗБЫТКА ЗАПАСОВ;

5. ЛИШНИХ ПЕРЕМЕЩЕНИЙ;

6. БРАК.


ОБРАБОТКА

(В ТОМ ЧИСЛЕ И ИЗ-ЗА БРАКА);

МИНИМИЗИРОВАТЬ

ВЗАИМО-ДЕЙСТВИЕ

/ DIGITAL AGENCY / / DIGITAL AGENCY /

СТРУКТУРА ВЗАИМОДЕЙСТВИЯ

Название организации Роль

ПАО Сбербанк Функциональный заказчик

АО «Сбертех» ИТ инфраструктура/Эксплуатация

АТ Консалтинг Верстка

АТ Консалтинг Программирование

ДАЛЕЕ Дизайн

ДАЛЕЕ Контентное наполнение

«Бэл Интегратор» Тестирование


СТРУКТУРА ВЗАИМОДЕЙСТВИЯ

Представителиподрядчиков ФункциональныйЗаказчик

Проектноеуправление

Дизайн Группатестирования

Группапроектированияи

разработкиГруппаанализа

ДАЛЕЕЗАО«СберТех» ATConsulting

ЗАО«СберТех» ATConsulting ДАЛЕЕ Бэлл Интегратор

ОАО«Сбербанк»

ЗАО«СберТех»

ATConsulting

Бэлл ИнтеграторДАЛЕЕЗАО«СберТех»

ATConsulting


РЕЗУЛЬТАТ /

/ 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 /

РИФ 2016, Глобальное обновление сайта sberbank.ru:...

Business