Документ описывает изменения в компании Mail.ru за последний год, акцентируя внимание на улучшении дизайна, UX и командной работы. Были обновлены ключевые продукты и внедрены новые процессы разработки, а также расширены команды дизайнеров. Также отмечено значение UX-исследований и адаптивного дизайна для пользователей на разных платформах.

1. Как меняется Mail.Ru
продукты, процессы, команда
Юрий Ветров, Алексей Кандауров, Александр Киров, Алексей Сергеев, Наталья Спрогис

2. О чем этот рассказ?
Несколько лет назад дизайн стал одним из
приоритетных направления для Mail.Ru.
Мы расскажем о том, что произошло за
последний год – рабочем процессе, новых
версиях ключевых продуктов.
А также новой команде, инструментарии и
куче других интересных вещей.
Об этом часть команды Mail.Ru расскажет в
своей большой презентации.
2

3. Немного истории
3

4. Почта Mail.Ru была запущена 15 октября 1998 года.
4

5. Через три года ресурсы компаний Port.ru и netBridge
объединились в портал Mail.Ru. Который
постепенно начал обрастать дополнительными
продуктами и сервисами.
5

6. В конце 2010 года был образован холдинг Mail.Ru
Group, который стал еще обширнее – в него вошли
игровые компании, Одноклассники, e-commerce,
доли в крупнейших западных сервисах.
6

7. Сейчас Mail.Ru Group это 40 продуктов в 5
подразделениях – стратегические продукты,
социальные сети, игры, мессенджеры и e-commerce.
Плюс пачка продуктов у дочерних компаний.
7

8. В 2009 году в компании было принято решение, что
UX является одним из стратегических направлений
развития.
Основные сложности
1. Продукты очень большие (аудитория,
функционал…)
2. Нужен новый процесс разработки
3. Нет стандартов и гайдлайнов для
различных проектов
4. Нужна команда
8

9. Это было связано с приходом Алексея Сергеева. А
в течении 2010 года и первой половины 2011 года в
компанию начали приходить сильные люди.
9

10. Наряду с внутренними работами мы начали
сотрудничество по крупным задачам с сильными
подрядчиками, такими как Usethics, Турбомилк,
NotaMedia.
10

11. Мы начали работать над стандартизацией, запустили новую единую
навигацию и шапки проектов. Началось обновление интефейсов
различных продуктов.
11

12. Началось обновление интефейсов различных продуктов. В 2011 году
сделали редизайн Почты.
Было
12

13. Стало
13

14. Процесс стал включать в себя регулярные UX-
исследования. Раньше проводились только
маркетинговые, либо простейшие юзабилити-тесты.
1. Юзабилити-тестирования
2. Глубинные интервью
3. Этнографические исследования
4. Нестандартные техники (например, co-
discovery)
14

15. В прошлом году я вместе с коллегами из UI
Modeling Company стал частью новой интерфейсной
команды Mail.Ru.
15

16. За год с небольшим мы усилили и обновили
коллектив дизайнеров и проектировщиков. Вырос
фронт работ, во многом благодаря мобильным
приложениям.
coming
soon
16

17. Мы занимается стратегическими продуктами и
задачами – это Почта, главная страница,
общепортальные правила, контент-проекты и
Ответы.
1. Авто 10. Погода
2. Афиша 11. Помощь
3. Дети 12. Почта
4. Главная 13. Портал
5. Гороскопы 14. Спорт
6. Здоровье 15. новые продукты
7. Леди
8. Новости
9. Ответы
17

18. Выстраиваем пул постоянных подрядчиков и
фрилансеров. К ним можно быстро обратиться,
если в штате человек с такой специализацией
сейчас не нужен. Или свои ресурсы перегружены.
18

19. Хорошая слаженная команда – основа всего
процесса и прогнозируемого результата. Держусь за
нее и стараюсь делать все что можно для ее
развития.
19

20. Еще одно знаковое событие – покупка в 2010 году
Одноклассников и приход Алишера Якупова
руководителем дизайнеров. Он построил отличный
процесс системной работы над интерфейсами. А
сервис вновь стал активно расти после спада.
20

21. Развиваются дизайнерские группы и в других
подразделениях – e-commerce, месседжинг, поиск.
Усилилась команда Моего Мира, Видео. А вот игры
стоят немного отдельно, про них мы знаем меньше.
21

22. В прошлом году совместно с Антоном Артемовым и
Ксенией Стерниной мы создали полноценную UX-
лабораторию. Она помогает проверять интерфейсные
решения и изучать поведение пользователей.
22

23. Сейчас в лаборатории сравнительно небольшая
команда, но потребность в исследованиях растет. В
ней есть и классические инструменты, и eye
tracking, и даже инструменты по сбору биофидбека.
23

24. За год плотной работы мы пообщались с сотнями
респондентов, изучили массу продуктов и сервисов.
Но все еще есть задачи по интеграции
исследований в процессы разработки.
Исследования
24

25. В прошлом году мы начали проводить открытую
микро-конференцию UX-Среда про интерфейсы.
Это отличный способ повышения квалификации и
обмена идеями. Сегодня она в гостях у UXRussia :)
25

26. А весной сделали первый московский Dribbble
Meetup. Это мероприятие уже для дизайнеров, на
которое мы приглашаем небольшие интересные
студии и продуктовые команды.
26

27. В своем аккаунте на Dribbble мы выкладываем
свежее и интересное из того что сделала наша
команда, подрядчики и другие подразделения.
27

28. Команда Одноклассников запустила конкурс для
отечественных дизайнеров Russian Design Cup.
Собралось около сотни участников и
интереснейший набор заданий для них.
28

29. Как мы работаем
1. Немного истории
2. Рабочий процесс

30. Рабочий процесс
30

31. За основу мы берем классический подход к проектированию и
дизайну интерфейсов. Полный цикл – от понимания целевой
аудитории и проблемы до поиска и реализации решения.
Детальное Поддержка
Исследования Концепция Дизайн
проектирование разработчиков
Проверка решений
31

32. Но процесс гибкий – может корректироваться по
ситуации на каждом из этапов. Где-то срезаем углы,
где-то наоборот – копаем глубже. Важен результат,
а не бюрократия.
32

33. Задачи двух типов – развитие текущих версий
1 продуктов и их новые релизы. Процесс тут
похожий, но отличается в деталях. Причем эти
работы могут идти параллельно.
новая
функция
новая новая
функция функция
33

34. Долгосрочное планирование. Весь пул задач по
2 продуктам известен, хотя приоритеты между ними
часто меняются. Форс-мажоры и внезапные
срочные задачи – сравнительно редко.
34

35. Много общения с менеджерами проектов и
3 продуктов, топ-менеджерами компании. Это
самостоятельный процесс, который мы
оптимизируем.
35

36. Часть работы по дизайну перекладываем на
4 проектировщика. В этом помогают паттерны,
шаблоны и гайдлайны. Снимает угнетающую рутину
с дизайнера и ускоряет процесс.
36

37. Вовлечение команды в процесс исследований.
5 Живое наблюдение за интервью и участие в этом
процессе часто важнее подробного отчета.
37

38. Еженедельные презентации. Каждую пятницу
6 команда презентует результаты работы за неделю.
Это отличный способ собрать фидбек и просто быть
в курсе того, что происходит в компании.
38

39. У нас есть матрица продуктов – продукты vs платформы. Это наш
фронт работ на ближайшее будущее.
Веб Веб (моб.) Веб Android Bada iPhone J2ME Symbian WP iPad Win8 Android ТВ
(планшеты) Tablet
Авто
Афиша
Дети
Главная
Гороскопы
Здоровье
Леди
Новости
Ответы
Погода
Помощь
Почта
Портал
Спорт
***
39

40. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra

41. Главная страница
41

42. Одним из первых крупных проектов, запущенных
при участии новой команды, стала новая главная
страница Mail.Ru. Она стартовала в начале этого
года.
42

43. Причем задача далеко не только интерфейсная и
дизайнерская. Это тонкий и политический вопрос – на
главную завязаны очень многие продукты компании.
Она – точка входа и критична для любого портала.
43

44. Каждый представленный здесь продукт получает
трафик, а значит прибыль. Любая ссылка на
главной имеет денежную стоимость. Попробуйте
убрать хотя бы одну!
44

45. Отсюда и основная задача – лучше и логичнее
представить ключевые продукты. А значит и четче
регулировать распределение трафика между ними.
45

46. Вторая цель – сделать страницу более
современной, обновить ее стилистику и сделать
визуально чище.
46

47. Мы изучили отдельные ключевые аспекты. Например,
как воспринимают новостной блок на главной
странице. А также подняли данные предыдущих
исследований, а также исследования по предыдущим
продуктам.
47

48. В ходе проектирования мы опробовали массу концепций,
радикальных и консервативных. Для упрощения прототипирования
подготовили сет бумажных блоков, из которых можно было быстро
собрать любую вариацию компоновки.
48

49. Это помогло скоординировать позиции топ-
менеджеров. Мы устроили большую сессию
бумажного прототипирования, в ходе которой
каждый из них собрал свою версию страницы.
49

50. Новая структура страницы стала более логичной. Под
каждый проект и пользовательскую задачу выделены
отдельные зоны. Можно играть с контентом каждого
блока и изменять его показатели.
50

51. Одним из жестких требований была необходимость
вписать весь контент в один экран. Для этого было
предложена адаптивность, включающая много
уровней для самых разных разрешений.
51

52. Хотя современные компьютеры все чаще имеют широкоэкранные
мониторы, по высоте ситуация мало поменялась. Вьюпорты
достаточно зажаты и это сильно влияет на видимую область
страницы.
10% 11% 29% 14% 11%
90
80
70
60
670px
576px
765px
830px
633px
% 50
40
30
20
10
0
550 600 650 700 750 800
52

53. Для пользовательского тестирования это была
любопытная задача. Как исследовать одну
страницу, завязанную на кучу деятельностей? В итоге
получился скорее эмоциональный тест, чем
сценарный.
53

54. Поняли основные болевые точки при переходе на
новый дизайн – она стала логичнее и чище, но при
этом потеряла часть привычной пользователям
яркости.
54

55. Более мелкие проблемы – возвращение кнопки
«выход» в блок Почты, переработка иконок
информеров, замена заголовка точки входа в Почту
и еще с десяток небольших доработок.
55

56. Мы посмотрели на то, какие блоки на главной
странице наиболее заметны, но в данном случае
больше ориентировались на сплит-тесты и карты
кликов, чем на eye-tracking.
56

57. Главная страница – это лицо компании, так что ее
редизайн стал одним из символов изменений в
Mail.Ru. Это большой и приятный шаг вперед.
57

58. «Сателлиты» главной страницы
58

59. В дополнение к основной версии главной страницы
идет работа над ее «сателлитами». В конце прошлого
года был запущен хаб для WP7 – эта концепция
платформы отлично подходит для порталов.
59

60. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra

61. Новости
61

62. Весной нашему подразделению передали контент-
проекты – это 11 сервисов, покрывающих самые
разные тематики. Их переделку мы начали с одного
из самых популярных – Новостей.
Авто Новости
Афиша Погода
Дети Рассылки
Гороскопы Спорт
Здоровье ТВ
Леди
62

63. Необходимо было повысить глубину
просмотра, упростить навигацию и обновить
внешний вид сервиса. А также в целом улучшить
восприятие проекта пользователями.
63

64. Одна из главных проблем – «желтизна» новостей. К
счастью, ее начали решать задолго до
редизайна, при запуске новой главной. Поэтому к
моменту нашей работы с контентом все было
хорошо.
64

65. Другая проблема – обилие медийной и партнерской
рекламы. Сложно перекроить интерфейс, если
большинство из них останется. Но с помощью
коммерческих инструментов ее также решили.
65

66. При работе над новым дизайном сфокусировались
на трех направлениях, чтобы превратить продукт в
удобное и комфортное место для поиска и чтения
новостей.
66

67. Четкое разделение зон чтения. Сама новость и
1 связанные с ней материалы, реклама и партнерские
ссылки, собственный интересный контент –
разделены по понятным и наглядным зонам.
67

68. Упрощение навигации. Старая версия предлагала
2 пользователю несколько пересекающихся между
собой меню. В новой остался один простой и
наглядный способ навигации.
68

69. Более медийная и эмоцональная подача
3 контента. Яркое представление
фотогалерей, контекстные фоновые
изображения, красочная картина дня.
69

70. Адаптивный дизайн учитывает разброс разрешений
экрана. На маленьких декорации и иллюстрации
уменьшены, на больших – увеличены
шрифты, представлено больше контента.
70

71. Фон страницы – контекстный. Это эмоциональная
составляющая и потенциальное стилистическое
объединение продуктов. Прототипировали разные
варианты его поведения и продумывали алгоритмы
сглаживания – картинка должна быть качественной.
71

72. Правда, технологичный дизайн плохо сказался на
производительности. Пришлось отключить часть
эффектов, чтобы не было проблем у пользователей
на старых компьютерах.
72

73. Еще один эксперимент – ссылки без выделения и
подчеркивания – предсказуемо уронил
кликабельность. Вернулись к более привычному
варианту.
73

74. Другие решения, которые в теории должны были
улучшить UX, оказались проблемными на практике.
Например, решение убрать промежуточную
страницу у фотогалерей.
74

75. Нужно помнить, что баланс между деньгами и UX
играет важную роль. Важно не забывать о том что
мы работаем не только для пользователя, но и для
успеха бизнеса.
75

76. И опять интересная задача на пользовательское
исследование. Нет смысла давать задания, важно
понять модели поведения читателей, ведь с точки
зрения логики интерфейс Новостей очень прост.
76

77. Зато неоценимым оказался eye tracking. В отсутствии
четких сценариев только он давал понимание, чем
сейчас занимается респондент. А при такой
информационной насыщенности очень важно
осознавать, какие элементы остаются незамеченными.
77

78. Пользовательское исследование показало разные
сценарии работы с новостями и подходы к их чтению.
Оказалось, что для ряда пользователей интерфейс
вообще не важен – они ходят по броским заголовкам и
им не важно, какой сайт их предоставляет.
78

79. А вот те, кто интересуется определенной
темой, хорошую подачу информации и помощь в ее
поиске очеь ценят. И это одно из направлений
оптимизации интерфейса.
79

80. Важен хороший дизайн и для opinion makers – они
видят, что Mail.Ru меняется.
80

81. Мобильные и планшетные новости
81

82. Вторая задача по перезапуску Новостей – линейка
мобильных приложений. Нужно покрыть максимум
платформ на смартфонах и планшетах.
Android Android Tablet
Bada iPad
iPhone Windows 8
Symbian/MeeGo
Windows Phone
82

83. По прогнозам аналитиков к 2015 году более 60%
используемых мобильных устройств будут
составлять смартфоны и планшетные компьютеры.
83

84. Приток новых пользователей с мобильных
устройств – все больше. Планшеты и смартфоны
становятся доступными широкой аудитории (как по
стоимости, так и с точки зрения UX).
84

85. Для нас важно дать пользователям возможность
читать новости «на ходу», всегда и везде. А также
охватить большинство востребованных в России и
СНГ платформ.
85

86. Хороший дизайн особенно важен для успеха
приложения. После того как мы поработали над
приложением для Windows 8, родилась сильная
концепция для iPad на ее основе.
86

87. Использование модульных сеток – активный в
последние годы тренд в создании информационных
проектов в вебе и планшетных приложениях. Нам
удалось предолжить свежие решения для Win8 и iPad.
87

88. Подрядчиками сделан дизайн линейки смартфонных
приложений для Android, Bada, iPhone, Symbian и
MeeGo, Windows Phone. Новости будут доступны на
всех востребованных в России платформах.
88

89. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra

90. Проект Икс
90

91. Mail.Ru перезапускает один из продуктов. Он не
похож на другие сервисы компании. Здесь мы
пробуем другой визуальный стиль и новые подходы
к взаимодействию пользователя с интерфейсом.
91

92. К сожалению, нам пришлось исключить детали из
презентации незадолго до конференции – готовится
официальный анонс продукта. Ждать осталось
совсем недолго и скоро вы все узнаете.
92

93. Интерфейс прошел три этапа развития, в ходе
которых мы опробовали разные подходы к
интерфейсу. Видение продукта и понимание задачи
заметно поменялись в ходе этой работы.
93

94. Первый прототип был собран на основе текущих
1 паттернов. Это помогло быстро получить
понимание предметной области и обкатать
требования.
94

95. На втором этапе мы решили исследовать
2 пространство решений и проверили самые
сумасшедшие идеи. Родились необычные
концепции, использующие модные интерфейсные
решения.
95

96. Третий вариант интерфейса стал реалистичным.
3 Пользовательское исследование концепций
показало, что мы в корне не правы – деятельность
пользователей обстоит совсем не так как мы думали.
96

97. После утверждения концепции проектировщик
работает в режиме консультанта – прорабатывает
детали в паре с дизайнером. Что-то делается в виде
скетчей, что-то обсуждается на словах, что-то
проверяется уже в макетах.
97

98. Многие боятся признаться себе и другим, что
персонажи – инструмент достаточно ограниченной
полезности. Часто на них затрачиваются силы, а
они в итоге «пылятся на полках».
98

99. А вот в связке с Customer Journey Map их можно
заставить работать. Они описывают модель поведения
пользователей и важные этапы взаимодействия с
продуктом – там, где можно повлиять на experience.
99

100. Первое тестирование прошло на сотрудниках. Это
простой и быстрый способ выявить самые важные
проблемы и подтвердить ключевые гипотезы до
проведения полноценного теста.
100

101. Станет ли этот сервис новым стилем продуктов
Mail.Ru? Время покажет, но мы работаем над этой
возможностью и пачкой альтернативных подходов.
101

102. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra

103. Почта
103

104. Летом прошлого года была запущена текущая
версия Почты Mail.Ru. Это заметный рывок
вперед, который решил массу застаревших проблем
и сделал интерфейс современным.
104

105. Одновременно с редизайном шел крупный
технический рефакторинг, поэтому к моменту запуска
новый интерфейс получили только ключевые экраны –
список писем, письмо, написание письма.
105

106. Сейчас мы ведем эволюционное развитие продукта.
За прошедший с момента запуска год были
доведены до ума те функции, которые не успели
переработать в ходе запуска редизайна.
106

107. Обновляются настройки. Теперь разобраться в
богатых возможностях Почты становится гораздо
проще.
107

108. Форма написания письма совершенствуется. Мы
уходим от визуального оформления устаревших
текстовых редакторов и продолжаем двигаться в
сторону современных стилистических тенденций.
108

109. Значение файлов в почте усиливается. О размерах
вложений уже давно можно не заботиться. А теперь
упрощаются поиск и просмотр большинства
востребованных форматов файлов прямо из сервиса.
109

110. Недавно темам Почты исполнился год. За этот год
мы успели подарить пользователям множество
интересных оформлений продукта в различных
стилистиках на любой вкус.
110

111. Сейчас в закрытом режиме тестируются еще ряд
ключевых функций, которые были приведены в
соответствие с новым дизайном. А также новые
вещи, двигающие Почту вперед.
111

112. В работе над этими функциями помогает
исследование активности их использования. Эти
данные подсказывают, какие действия в интерфейсе
стоит улучшать, а что мало востребовано и может
быть пессимизировано.
112

113. Параллельно с развитием текущей версии мы
работаем над будущим продукта. Ведется
множество экспериментов и исследований того, как
и куда развиваться Почте.
113

114. Мы провели большое исследование на сегментацию
пользователей. Оно показало интересные и
необычные паттерны использования Почты. А также
помогло проверить ряд свежих концепций.
114

115. Летом состоялся совместный проект с Британкой.
Студенты курса дизайн-мышление исследовали
будущее почты и предложили концепцию ее развития.
Это помогает по-новому взглянуть на задачу.
115

116. Мобильная почта
116

117. Исторически сложилось, что мобильное
приложение Почты было частью Агента. На тот
момент это было удобное для компании
решение, хотя сейчас продукты полностью
разнесены.
117

118. Трудно выпустить мобильный продукт для сервиса с
многомиллионной аудиторией под большинство
мобильных платформ, но безумно интересно было
сделать это с нуля.
118

119. В мобильных у нас сложился отличный от
остальных задач подход – дизайнер выступает еще
и в роли проектировщика. В мобильных это
помогает достичь более интересных результатов.
119

120. В первой версии мы активно экспериментировали с
механиками взаимодействия. Часть оказались
удачными. Например, сайдбар для списка папок мы
внедрили на ранних стадиях его популярности.
120

121. Другие механики в жизнь не попали.
Например, быстрая отметка писем прочитанными
по свайпу из списка писем, хотя оно и понравилось
некоторым пользователям.
121

122. У меня часто спрашивают, как долго работать над
одним продуктом и не сойти с ума. Есть большая
разница между работой над разными проектами или
одним в течении долгого времени – за почти год моей
работы мы выпустили Почту под целый ряд платформ.
122

123. Мы также активно исследуем разные направления
развития мобильной Почты, много экспериментируем
с подходами к интерфейсу и визуальной стилистике.
Что-то из этого потом попадает в основную версию.
123

124. Сильно упростило работу и сказалось на
продуктивности появление технического дизайнера.
Он занимается нарезкой графики для разработчиков и
гайдлайнами с отступами, рисует вспомогательные
экраны и сам собирает XML-фронтэнд для Android.
124

125. Также очень помогает отвлечься переключение на
задачи других продуктов (мобильная главная и
контент-проекты). Взгляд перестает замыливаться и
появляются новые интересные идеи, а также
мотивация развивать продукт дальше.
125

126. Параллельно с работой над приложениями мы
запустили веб-почту для современных тачфонов и
обновили версию для более старых телефонов.
126

127. И продолжаем увеличивать охват платформ –
активно занимаемся версиями Почты для
оставшихся устройств и ОС.
127

128. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra

129. Портальные правила
129

130. В 2011 году была запущена единая портальная
навигация. Процесс длился год и потребовал долгих
переговоров, зато дал мощный толчок к унификации
продуктов компании.
130

131. Мы двигаемся дальше поэтапно, охватываем кусок за
куском – футер, формы, иконки. Нельзя просто так
взять и переделать большой портал. Хотим запустить
это на всех, но начинаем со своих продуктов.
131

132. Иконки стандартизируются – в результате у всех
продуктов будет одинаковые символы
конверта, пользователя и т.п. А также переходят в
вектор – это одно из условий ретинизации и
комфортной поддержки дизайна.
132

133. Анализируем разнообразие используемых
элементов, ищем общее среди них.
Например, строим сводную таблицу наиболее
востребованных элементов и компоновок форм.
133

134. Важно максимально упростить работу над
стандартными решениями, не изобретать
велосипед каждый раз заново. Но помнить о
том, что у каждого продукта может быть своя
стилистика.
134

135. Результат – комплект PSD-макетов с
расставленными размерами, а так же простой
возможностью редактирования и стилизации форм.
135

136. А также спецификация в Confluence, которая
описывает детали использования каждого из
элементов. Мы также работаем над переводом
гайда в единую базу кода.
136

137. Мобильный веб
137

138. Этим летом запущена новая версия главной Mail.Ru
для мобильных. Получился простой и легкий
стиль, который состоит из хорошо масштабируемых
базовых элементов.
138

139. Поэтому когда мы занялись переделкой мобильных
контент-проектов, было решено базироваться на
этой же стилистике и логике интерфейса.
139

140. Нам всем нравится фреймворк Twitter
Bootstrap, поэтому он стал прообразом нашего
подхода к унификации мобильного веба. А также
отличным инструментом для быстрого редизайна.
140

141. Получившийся конструктор позволил собирать
максимально похожие на дизайн прототипы в
InDesign силами проектировщиков, что сильно
экономит время дизайнеров и ускоряет работу.
141

142. Он включает все возможные блоки и элементы
управления, которые могут использоваться в
мобильных интерфейсах. И пополняется при
появлении новых задач.
142

143. А гайдлайн в Confluence описывает все нюансы
дизайна для разработчиков и менеджеров –
шрифты и цвета, отступы и сетки, иконки и
вспомогательную графику.
143

144. Кроме того, он учитывает разные возможности
браузеров – iOS, Android и WP7, старые
смартфоны, не-тач телефоны. В будущем появится
механизм автоматической деградации.
144

145. Параллельно с этим разработчики создают единую
базу CSS, которая облегчит внедрение редизайна для
каждого продукта, а также зафиксирует
унифицированную стилистику. И самое главное –
позволит обновлять гайдлайн сразу везде.
145

146. Правда, такой подход усложняет брендирование
отдельных продуктов. Но мы проработали несколько
подходов, которые позволят решить эту задачу, так что
каждый сервис сможет иметь свою стилистику.
146

147. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra

148. Агент
148

149. Новая версия мессенджера Агент запущена весной
этого года. Это самый популярный в России сервис
мгновенных сообщений – им пользуются более 20
миллионов человек.
149

150. Накануне этого Агент был передан в другое
подразделение, но всю работу над его интерфейсом
и дизайном выполнил наш отдел. Этот процесс
стартовал около двух лет назад.
150

151. Поводом для редизайна стало множество
проблем, выявленных юзабилити-тестированием.
Вместе с компанией Usethics был спроектирован
интерфейс, а дизайном занялся Turbomilk.
151

152. Однако вскоре измненились бизнес-
требования, необходимо было добавить работу с
социальными сетями. А тулбар сравнительно
недавно вышедшей Windows 7 потребовал единого
окна программы.
152

153. Провели этнографию для оценки ожиданий
пользователей. Важно было понять, готовы ли они к
единому окну, каковы их паттерны использования. В
итоге сформировали новые требования к интерфейсу.
153

154. Еще одним способом изучения единого окна стал
интерактивный прототип, подгружающий реальные
данные пользователя. Это позволило проверить
интерфейс единого окна на реальных данных.
154

155. Для Агента было проведено, возможно, самое
большое количество пользовательских исследований.
Это десктопное приложение и ошибки сложно
исправить после релиза в отличие от веба.
155

156. В какой-то момент работы по проектированию и
дизайну перешли внутрь компании. И тут здорово
помог InDesign и подход с максимально похожими на
дизайн прототипами. Он упрощает обсуждения и
решает часть задач за дизайнера.
156

157. Важно было также запустить новый движок с
поддержкой видео-звонков на базе собственной
разработки. Эта функциональность стала одной из
ключевых в новой версии Агента.
157

158. Веб-Агент
158

159. Мессенджер интегрирован в часть продуктов Mail.Ru.
Интересная задача, но много сложностей с
внедрением. Важно понимать, в каком контексте
пользователь может работать с мессенджером на
конкретном проекте.
159

160. Быстрое тестирование выявило ряд легко решаемых
проблем: отсутствие ссылки на анкету при запросе
авторизации, слишком быструю реакцию поиска на
двойной клик, непонятную метафору настроек и т.д.
160

161. Агент для мобильных
161

162. Перед передачей Агента в специализированное
подразделение Instant Messaging мы успели
поработать над его мобильными приложениями.
Начали редизайн версии для Android.
162

163. Также запустили первое приложение Mail.Ru для
Windows Phone. В нем получилось значительно
облегчить интерфейс, насыщенный множеством
функций.
163

164. Интересные кейсы за год
1. Главная страница
2. Новости
3. Проект Икс
4. Почта
5. Портальные правила
6. Агент
7. Futubra

165. Futubra
165

166. В первые недели года запустилась бета-версия
нового продукта Mail.Ru – микроблоггингового
сервиса Futubra.
166

167. Для ускорения запуска продукта и фокуса на
ключевых функциях команда следовала идеологии
mobile first. С мобильной версии было проще начать, а
также проводить эксперименты с концепцией.
167

168. Дальше интерфейс развивался с помощью техник
адаптивного дизайна и progressive enhancement.
Это позволило охватить широкий спектр мобильных
устройств, начиная от самых примитивных.
168

169. В дополнение к большому и мобильному вебу
появились приложения для Android, iPhone, Symbian
и WP7.
169

170. Сейчас концепция Футубры поменялась и сервис
развивается в скорректированном направлении.
170

171. Как меняются
большие компании
1. Без чего нельзя добиться успеха
2. Что нам предстоит сделать

172. В прошлом году я рассказывал о наших планах и
первых достижениях. Многое удалось
осуществить, что-то еще не успели, какие-то
предположения оказались неверными.
172

173. Без чего нельзя было бы добиться
успеха
173

174. Команда. Без сильных специалистов, которые не
1 разрываются между пятью проектами, очень сложно
делать хорошие вещи.
174

175. Доверие. Менеджеры продуктов и руководители
2 направлений должны доверять решениям
дизайнеров. А дизайнеры должны уметь сами
«продавать» эти решения и доносить свои идеи.
175

176. Ответственность за интерфейсные решения во
3 многом лежит на дизайнере. Это продуктовые
решения, а не просто макеты.
176

177. Продуктовая работа и работа на заказчика – это
4 огромнейшая разница. Многие кто к нам приходит –
перестраиваются. Я и сам долго ломал себя после
четырехлетнего опыта клиентской рабты в UI Modeling.
177

178. Многофункциональные специалисты. Жесткое
5 разделение на дизайнеров и проектировщиков
плохо работает – это усложнение цепочки создания
дизайна и размывание ответственности за него.
178

179. Проектировщик как консультант. Не нужно
6 рисовать детальный прототип на каждый чих – для
многих задач достаточно сделать дизайнеру скетч
или просто объяснить на словах.
179

180. Нет универсального процесса. Под каждую
7 задачу и ситуацию строится свой процесс на основе
его идеального видения. Это уменьшает
бюрократию и делает работу динамичнее.
180

181. Первое время очень сложно. Нужно решать текущие
8 задачи и одновременно готовить новые версии продуктов.
При этом приходится работать по-старому и одновременно
внедрять новый процесс. Нельзя остановиться и сказать
«сейчас мы придумаем как сделать все правильно».
181

182. Stefan Klocek описал свое видение интерфейсных
реформ в больших компаниях. Оно перекликается с
тем, что делаем мы. Хотя любая модель упрощает
реальность – ее внедрение не идет гладко.
182

183. Что нам предстоит сделать
183

184. Работа с KPI продуктов. Важно отслеживать не
1 просто частные метрики, а понимать их влияние на
успешность продукта по разным показателям.
184

185. Модели поведения пользователей для всех
2 продуктов. Они помогут нам проектировать не
просто фичи, а решать потребности пользователей.
185

186. Интерфейсные гайдлайны на уровне единой базы
3 кода. Они не так хорошо работают в виде статичной
документации – важна быстрая возможность менять
паттерны во всех продуктах сразу.
186

187. Интеграция исследований в процессы разработки
4 интерфейсов на каждом этапе. Внедрение быстрых
методик исследований, не требующих длительной
подготовки и обработки.
187

188. Повысить скорость работы с подрядчиками.
5 Часть задач мы отдаем наружу и во многих случаях
получаем отличнейший результат. Но работы
зачастую затягиваются из-за медленных итераций.
188

189. Максимально заполнить матрицу проектов.
6 Обновление ключевых продуктов и запуск
новых, редизайн или рестайлинг контент-
проектов, подготовка мобильных версий и
приложений.
189

190. 30 октября состоится большой анонс крупных
обновлений ключевых продуктов и новых сервисов.
Презентация могла бы приятно расшириться за счет
этих кейсов :)
190

191. Спасибо!
Юрий Ветров Алексей Кандауров
www.jvetrau.com twitter.com/4annel
twitter.com/jvetrau
Александр Киров Алексей Сергеев
www.pyromind.ru twitter.com/alekser
twitter.com/alexanderkirov
Наталья Спрогис
twitter.com/Natalia_Sprogis
Все иллюстрации, использованные в данной презентации, принадлежат их уважаемым владельцам. В случае, если вы
являетесь их правообладателем и против размещения этих иллюстраций – напишите, пожалуйста, письмо по адресу
jvetrau@gmail.com и я уберу их из слайдов.