1. Новая главная страница
Mail.Ru
новая главная страница Mail.Ru
© Mail.ru Group

2. новая главная страница Mail.Ru
© Mail.ru Group

3. предпосылки для редизайна
Не соответствовала реалиям
компании.
Не была отображена стратегия
Communitainment.
Была перенасыщена
графическими элементами.
«Рекламный» формат части
блоков проектов, многие - в
ротации.
Имела устаревший визуальный
стиль.
новая главная страница Mail.Ru
© Mail.ru Group

4. roadmap
анализ и исследования, сбор требований
создание нескольких концепций
выбор одной, детализация
разработка
тестирование
тюнинг
запуск
новая главная страница Mail.Ru
© Mail.ru Group

5. анализ текущей ситуации
Общение с реальными пользователями.
Анализ статистики использования и распределения кликов.
Анализ потребностей аудитории.
Сбор требований и общение с топ-менеджерами.
новая главная страница Mail.Ru
© Mail.ru Group

6. начало работ над концепцией
Серия брейнштормов и выработка идей.
Развитие и детализация нескольких направлений.
Креативная сессия с топ-менеджментом.
новая главная страница Mail.Ru
© Mail.ru Group

7. новая главная страница Mail.Ru
© Mail.ru Group

8. требования к новому интерфейсу
Легкость - чистый, современный дизайн.
Удобство – соответствие потребностям пользователей.
Сфокусированность на ключевых продуктах.
Информативность - актуальная картина дня, пробки,
погода, котировки.
Адаптивность - интерфейс должен быть одинаково
хорош под разные разрешения экрана.
Скорость - высокая скорость загрузки и рендеринга.
новая главная страница Mail.Ru
© Mail.ru Group

9. новая главная страница Mail.Ru
© Mail.ru Group

10. Легкость - чистый, современный дизайн.
новая главная страница Mail.Ru
© Mail.ru Group

11. Удобство – соответствие потребностям пользователей.
новая главная страница Mail.Ru
© Mail.ru Group

12. Сфокусированность на ключевых продуктах.
новая главная страница Mail.Ru
© Mail.ru Group

13. Информативность - актуальная картина дня, пробки, погода, котировки.
новая главная страница Mail.Ru
© Mail.ru Group

14. Адаптивность - интерфейс должен быть одинаково хорош под разные разрешения экрана.
новая главная страница Mail.Ru
© Mail.ru Group

15. Скорость - высокая скорость загрузки и рендеринга.
новая главная страница Mail.Ru
© Mail.ru Group

16. адаптивность
новая главная страница Mail.Ru
© Mail.ru Group

17. что такое viewport
новая главная страница Mail.Ru
© Mail.ru Group

18. замеры вьюпортов пользователей
% 10% 11% 29% 14% 11% 25%
90
80
70
60
576 px
633 px
670 px
765 px
830 px
50
40
30
20
10
0
550 600 650 700 750 800 px
Разрешение Максимальный за сеанс
новая главная страница Mail.Ru
© Mail.ru Group

19. 576px – 21% пользователей
новая главная страница Mail.Ru
© Mail.ru Group

20. 633px – 29% пользователей
новая главная страница Mail.Ru
© Mail.ru Group

21. 670px – 14% пользователей
новая главная страница Mail.Ru
© Mail.ru Group

22. 765px – 11% пользователей
новая главная страница Mail.Ru
© Mail.ru Group

23. 830px – 25% пользователей
новая главная страница Mail.Ru
© Mail.ru Group

24. технологии
Реализовали адаптивность под
разные разрешения на
технологии media queries.
Перешли на новый javascript-
шаблонизатор.
Реализовали поблочную загрузку
страницы.
Перешли на получение «чистых»
данных в виде json от сервисов.
новая главная страница Mail.Ru
© Mail.ru Group

25. тестирование
Качественные исследования в юзабилити-лаборатории.
Количественное тестирование на 2% пользователей.
новая главная страница Mail.Ru
© Mail.ru Group

26. исследования
Прежде чем показывать главную страницу обычным пользователям, мы
провели eyetracking*-исследование.
* процесс записи положения взгляда либо движения глаз по отношению к голове.
новая главная страница Mail.Ru
© Mail.ru Group

27. отзывы респондентов
«Стала более светлая, больше пространства, нет такой цветовой
загруженности»…
«Всё рядышком, компактненько, удобно... Спокойный, не пестрит,
приятный довольно-таки такой»…
«Полезно и сразу видно. Это удобнее, чем на почту даже
[уведомления]»…
«Впечатления положительные. Все оптимизировано, но нужны
доработки. Без доработок лучше старая»…
«Старый друг лучше новых двух. Привычно, по-домашнему — на
старой, поэтому она больше доверия вызывает»…
новая главная страница Mail.Ru
© Mail.ru Group

28. изменения в ответ на пожелания
Вернули ссылку «Выход» в блок Почты.
Сделали ярче информеры Погоды, Пробок и котировок.
Доработали коммуникационный блок.
Увеличили размер основного шрифта.
Сделали акцент на казуальных играх в блоке Игр.
новая главная страница Mail.Ru
© Mail.ru Group

29. с марта пользователи могли переключаться на новый интерфейс самостоятельно
новая главная страница Mail.Ru
© Mail.ru Group

30. самостоятельно переключилось более 2 млн. человек
новая главная страница Mail.Ru
© Mail.ru Group

31. собирали отзывы про новый интерфейс
новая главная страница Mail.Ru
© Mail.ru Group

32. сегодня – на 100% аудитории
новая главная страница Mail.Ru
© Mail.ru Group

33. что дальше?
Мобильная версия главной страницы.
Адаптивность под совсем большие мониторы.
Персонализация блоков на главной.
Актуальные события.
Локальный контент.
новая главная страница Mail.Ru
© Mail.ru Group

34. новая главная страница Mail.Ru
© Mail.ru Group

35. Q&A
новая главная страница Mail.Ru
© Mail.ru Group