$30 off During Our Annual Pro Sale. View Details »

Внедрение UX-стратегии 2.1 или DesignOps

Yury Vetrov
November 28, 2018

Внедрение UX-стратегии 2.1 или DesignOps

Для развития дизайна в компании мы используем долгосрочное планирование и в 2018 запустили свежую версию подхода. Я рассказал о том, как мы системно улучшаем дизайн продуктов и внедряем новые методы работы. Это часть серии публикаций о дизайн-менеджменте — http://dmpatterns.com/.

Yury Vetrov

November 28, 2018
Tweet

More Decks by Yury Vetrov

Other Decks in Design

Transcript

  1. РОЛЬ ДИЗАЙНЕРА МОДЕЛЬ ЗРЕЛОСТИ ПРОИЗВОДСТВО ПРОДУКТА КАК ВНЕДРЯТЬ НА ПРАКТИКЕ

    АНАЛИТИКА И ИССЛЕДОВАНИЯ ОТ ДИЗАЙН-КОМАНДЫ К ДИЗАЙН-КУЛЬТУРЕ
  2. УСКОРЕННОЕ РАЗВИТИЕ Для развития дизайна в компании мы используем долгосрочное

    планирование и в 2018 запустили свежую версию подхода. Я расскажу о том, как мы системно улучшаем дизайн продуктов и внедряем новые методы работы.
  3. ОПЫТ MAIL.RU GROUP Когда я пришёл в середине 2011 года,

    мой коллега Алексей Сергеев уже успел доказать топ-менеджменту важность хорошего дизайна. Его усилиями за пару лет появилась первая в подразделении дизайн-команда, началось юзабилити-тестирование, обновились несколько ключевых продуктов. Моей задачей было масштабирование успеха с новой командой, а Алексей ушёл заниматься продуктовой стратегией.
  4. ДОВЕРИЕ НА ВСЕХ УРОВНЯХ? НА САМОМ ДЕЛЕ НЕТ Хотя важность

    хорошего дизайна и доказана топ-менеджерам, далеко не все менеджеры продуктов прониклись ей. Да и в целом на среднем уровне управления и среди конечных исполнителей нужно сформировать доверие к дизайнерам. Я осознал это не сразу.
  5. ЗАФИГАЧИМ ЗА МЕСЯЦ! Приходя, я бравировал тем, что мы настроим

    рабочий процесс за месяц и дальше всё пойдёт как по маслу. Но постоянно находились какие-то мелочи, которые рушили понятные рабочие процессы, затягивали задачи, ломали планы и т.п.
  6. ПЕРВЫЕ ПОЛГОДА НЕ ПО СЕБЕ :( Ожидания с обеих сторон

    не везде попали в действительность и было ощущение, что нас скоро «попросят». Я наблюдал много неудач по изменению дизайна в других компаниях и первые полгода – критическая точка, после которой либо всё налаживается, либо все расходятся.
  7. ПЛАН СПАСЕНИЯ С другой стороны, за это время я в

    деталях понял, что именно мешает нам внутри и снаружи команды и описал план борьбы с этими болевыми точками. Я думал, что мне придётся защищать и доказывать его, но внезапно оказалось, что все только за и надо просто действовать.
  8. ТЕМП УСКОРИЛСЯ С тех пор прошло несколько лет и мы

    совершили мини- революцию в том, каким может быть Mail.Ru. Сначала темп был не очень быстрым, но по мере того, как решались базовые проблемы, выстраивалась команда и процессы, накапливались знания и повышался авторитет дизайнеров, позитивных изменений в продуктах становилось всё больше.
  9. НЕ ВСЁ ИДЕАЛЬНО, НО ПРОДУКТЫ СТАЛИ СИЛЬНО ЛУЧШЕ Я регулярно

    подвожу итоги года и можно проследить, как проходили изменения. Запуски и редизайны: 2018: 35 2017: 25 2016: 44 2015: 31 2014: 42 2013: 50 2012: 28 2011
  10. ~25 ПРОДУКТОВ В МОЁМ ПОДРАЗДЕЛЕНИИ ❑ Productivity: Почта, Облако, Календарь,

    Mail.ru для бизнеса, Mail.ru Cloud Solutions ❑ Медиапроекты: Авто, Все аптеки, Гороскопы, Дети, Добро, Здоровье, Леди, Кино, Медиатор, Недвижимость, Новости, Ответы, Питомцы, Погода, Спорт, ТВ, Hi-Tech, SEOSan ❑ Поиск и браузер ❑ Бренды Mail.ru, Mail.ru Group и My.com.
  11. MY.COM Новый бренд – проще делать хорошо без наследия, когда

    не нужно учитывать старые наработки. my.com
  12. АВТОМАТИЗАЦИЯ – НАШЕ ВСЁ Именно поэтому мы топим за любые

    способы автоматизации процесса – дизайн-системы, алгоритмы, убирание ненужных этапов работ и т.п. Ограничения двигают дизайнерскую мысль и мы отлично научились работать с ними.
  13. ЗАМЕТНЫЙ РЫВОК ВПЕРЁД У нас сформировалась дизайн-система, на которой работают

    медиапроекты, мобильный веб, частично productivity-сервисы (и постепенно подключаются другие продукты), сформировался стиль пиктограмм и иллюстраций, стандартизируются промо-письма и промо-сайты. Внутренние процессы обеспечивают повторяемость хорошего результата.
  14. ДИЗАЙН-СИСТЕМА Начали в 2012 году, с тех пор экономим уйму

    времени на запуске новых продуктов и функций.
  15. А КАК НАСЧЁТ… Да, есть много сервисов, до которых у

    моего подразделения и других команд не добрались руки. Но доберутся.
  16. ВПЕРЕДИ НЕ МЕНЬШЕ РАБОТЫ Хочется расстаться с прошлым решительным перезапуском,

    но это рисково и не всегда возможно – полно историй необдуманных рывков, когда редизайн губил продукт. Лучше сначала превратить ад в адекват; из адеквата – сделать что-то современное и трендовое; а после этого уже можно думать о том, как задавать тренды самому.
  17. Мало совершить подвиг в виде удачного редизайна устаревшего сервиса –

    нужно обеспечить повторяемость хороших результатов.
  18. РЕДИЗАЙН НЕ ТОЛЬКО ДЛЯ ПРОДУКТОВ Помимо обновления продуктов требуется невидимая

    снаружи работа по обновлению орг.структуры и производственного процесса – важно просто научиться выдавать хороший результат регулярно, на потоке, а не раз в несколько лет при следующем редизайне. Этот опыт перестройки процессов и продуктов лёг в основу серии статей о UX-стратегии.
  19. ПЛАНИРОВАНИЕ И ЦЕЛЕПОЛАГАНИЕ Изначальной задумкой при приходе в компанию было

    выстроить три уровня планирования – краткосрочная, среднесрочная и долгосрочная дистанция.
  20. ❑ Итерация – что мы делаем в ближайшие недели и

    в каком порядке. Помогает сформировать точный todo. ❑ Квартал – каких среднесрочных результатов нам нужно добиться за три месяца. Помогает определять приоритеты для итераций. ❑ Год – куда мы вообще идём. Помогает планировать развитие команды. Первый появился быстро, на второй ушло года полтора, третий – когда смогли выдохнуть от череды бесконечных редизайнов в середине 2015 года.
  21. 2015: ПРОСТОЙ СПИСОК ИДЕЙ Выписали основные точки улучшения дизайна. Простой

    список, разбитый по OKR и кварталам. Идея масштабирования.
  22. лет МИССИЯ Mail.ru Group — одна из самых крупных и

    успешных интернет- компаний в России и Европе целом, суммарная ежемесячная аудитория продуктов — 150 млн человек. Мы хотим, чтобы дизайн наших продуктов соответствовал этому уровню и являлся важным рыночным дифференциатором для компании, усиливая бренд. Он должен задавать тон в Рунете и котироваться в мировом масштабе. Бренд должен иметь положительное, а не отрицательное предубеждение.
  23. лет ВИДЕНИЕ Хороший дизайн продукта решает проблемы пользователей и бизнеса

    в здравом компромиссе​. Пользователям проще выполнять свои задачи и они лучше понимают ценность продукта, а бизнес достигает своих целей и улучшает позиции на рынке. Дизайнеры помогают найти здравый баланс между этими двумя полюсами и помнят о важных вещах:
  24. 1. ФОРМИРУЮТ ПОЛОЖИТЕЛЬНОЕ ПРЕДУБЕЖДЕНИЕ ДЛЯ БРЕНДА Рассматривают всю карту взаимодействия

    пользователя с продуктом – интерфейс, маркетинг, реклама, поддержка. Улучшают восприятие как работодателя.
  25. 2. МАСШТАБИРУЮТ ХОРОШИЕ ПРАКТИКИ Помогают продуктам стать зрелыми в плане

    дизайна, а их командам – зрелыми в плане процесса. При этом учитывая многообразие реальных проектных ситуаций.
  26. 3. ЭФФЕКТИВНЫ Способны быстро и качественно решать продуктовые задачи за

    счёт компетентности, инструментов и методов работы.
  27. 4. ПРОАКТИВНЫ Умеют найти скрытую ценность для пользователей, которую может

    решить продукт для достижения целей бизнеса. Инициируют обновления продуктов, когда «здоровье» его дизайна просело. И даже могут выступать как идеологи новых продуктов.
  28. ❑ Приносим ценность продуктам и бизнесу. ❑ Помогаем запускать продукты

    и функции быстро и качественно. ❑ Все сотрудники компании понимают ценность дизайна. ❑ Бренд продуктов и работодателя.
  29. ПРОДУКТОВЫЕ ИНСАЙТЫ ИСХОДЯТ ОТ ДИЗАЙНЕРОВ ❑ База знаний ❑ Дизайн-решения

    привязаны к продуктовым метрикам и проверяются ❑ Карта взаимодействия (CJM) ❑ Методики поиска и решения проблем ❑ Влияние на продуктовый план ❑ Концепты и конкурсы ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ
  30. ХОРОШИЙ ДИЗАЙН НА ЖИВЫХ ПРОДУКТАХ ❑ Дизайн-система Paradigm ❑ Дизайн-долг

    ❑ Дизайн-ревью ❑ UX-тестирование ещё чаще ❑ Учёт разных групп пользователей (accessibility и т.п.) ❑ Тексты в интерфейсах ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ
  31. ПРЕДСКАЗУЕМОЕ ВЫПОЛНЕНИЕ ЗАДАЧ ❑ Краткосрочно: Спринт и планёрки для подкоманд

    ❑ Краткосрочно: Доска в Jira для каждой подкоманды ❑ Среднесрочно: Выполнение OKR продукта ❑ Среднесрочно: Ретроспективное отслеживание эффективности ❑ Долгосрочно: Пирамида стратегии ПОМОГАЕМ ЗАПУСКАТЬ ПРОДУКТЫ И ФУНКЦИИ БЫСТРО И КАЧЕСТВЕННО
  32. МОЖЕМ БЫСТРО ВЫДАВАТЬ ДОБРОТНЫЕ РЕШЕНИЯ ❑ Дизайн-система Paradigm ❑ Конструкторы

    (промо- сайты, письма и т.п.) ❑ Методики решения проблем ❑ Быстрая проверка через «Толоку» ❑ Гайдлайны для неавтоматизируемой деятельности ПОМОГАЕМ ЗАПУСКАТЬ ПРОДУКТЫ И ФУНКЦИИ БЫСТРО И КАЧЕСТВЕННО
  33. ЗНАЕМ, КАК СДЕЛАТЬ ДИЗАЙНЕРА СИЛЬНЕЕ ❑ Карта компетенций ❑ Цели

    на год и обучение по ним ❑ Задачи по целям ❑ Стажёрство как способ научить молодых дизайнеров и прокачать ментора ПОМОГАЕМ ЗАПУСКАТЬ ПРОДУКТЫ И ФУНКЦИИ БЫСТРО И КАЧЕСТВЕННО
  34. ПОМОГАЕМ ЭФФЕКТИВНО ВЗАИМОДЕЙСТВОВАТЬ С ДИЗАЙНЕРАМИ ❑ Участие в планёрках ❑

    Рассылки ❑ Командировки в продукт перед релизом продукта или важной функции ПОМОГАЕМ ЗАПУСКАТЬ ПРОДУКТЫ И ФУНКЦИИ БЫСТРО И КАЧЕСТВЕННО
  35. ПОМОЩЬ В НАЙМЕ И АУТСОРСЕ ❑ HR-база ❑ Каталог аутсорсеров

    по непродуктовым задачам ПОМОГАЕМ ЗАПУСКАТЬ ПРОДУКТЫ И ФУНКЦИИ БЫСТРО И КАЧЕСТВЕННО
  36. БАЗОВАЯ ДИЗАЙН-ГРАМОТНОСТЬ ДЛЯ НЕ-ДИЗАЙНЕРОВ ❑ Базовый тренинг по дизайну для

    менеджеров и разработчиков ❑ «Часы налёта» пользовательских исследований ❑ Ко-дизайн ❑ Выступления на кварталках и дизайн-ревью на всё подразделение, ревью для менеджеров на планёрках ❑ Обзоры трендов ❑ Курсы фасилитации, аргументации и презентации ВСЕ СОТРУДНИКИ КОМПАНИИ ПОНИМАЮТ ЦЕННОСТЬ ДИЗАЙНА
  37. ЕДИНАЯ СРЕДА ДЛЯ ДИЗАЙНЕРОВ ❑ Чат ❑ Рассылка ❑ Sympli/Figma

    ❑ Облако ❑ Дизайн-ревью ❑ Тим-билдинги ВСЕ СОТРУДНИКИ КОМПАНИИ ПОНИМАЮТ ЦЕННОСТЬ ДИЗАЙНА
  38. СОВРЕМЕННЫЙ БРЕНД, ВЫРАЖЕННЫЙ В ПРОДУКТАХ ❑ Ребрендинг ❑ Проект «Хурма»

    (связь бренда с интерфейсом) ❑ Карта здоровья продуктов ❑ Концепт-кары раз в год ❑ Принципы дизайна ❑ Маркетинг и реклама на достойном уровне ❑ Проактивность и предложение маркетинговых инициатив БРЕНД ПРОДУКТОВ И РАБОТОДАТЕЛЯ
  39. HR-БРЕНД ❑ Эксперты в дизайне на практике (продукты) и в

    теории (контент-маркетинг) ❑ Прокачанные каналы (соц.сети, блог и т.п.) ❑ Отработка негатива в комментариях. Нет троллинга на Хабре и vc.ru, есть много сторонних евангелистов БРЕНД ПРОДУКТОВ И РАБОТОДАТЕЛЯ
  40. месяца ТАКТИКА: БЛИЖАЙШИЕ OKR (OBJECTIVE & KEY RESULTS) Выбираем три

    крупные темы на квартал, каждую из них описываем в виде цели, решающей проблему, и метрик, показывающих успешность внедрения. Фокус! Ставим в конце квартала, актуализируем каждую неделю.
  41. КАРТА ВЗАИМОДЕЙСТВИЯ (CJM) Повысить вовлечённость дизайнера в продукт и отдачу

    от его действий, видя весь жизненный цикл работы с job story. Говорить с менеджерами продуктов на одном языке. ❑ Выработать единый формат job stories и CJM ❑ Для пилотных продуктов есть описание job stories и CJM по выбранным задачам ❑ Проведена как минимум одна продуктовая встреча на базе CJM по каждому из этих продуктов (менеджеры с дизайнерами поработали по ней) ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ → ПРОДУКТОВЫЕ ИНСАЙТЫ ИСХОДЯТ ОТ ДИЗАЙНЕРОВ
  42. ВЫРАБОТАТЬ ЕДИНЫЙ ФОРМАТ JOB STORIES И CJM ❑ CJM: Выбрать

    инструмент ❑ CJM: Шаблон ❑ Job Stories: Собрать примеры Job Stories — про процесс и про прогресс ❑ Синхронизировать подход с UX-лабораторией КАРТА ВЗАИМОДЕЙСТВИЯ (CJM)
  43. ДЛЯ ПИЛОТНЫХ ПРОДУКТОВ ЕСТЬ ОПИСАНИЕ JOB STORIES И CJM ПО

    ВЫБРАННЫМ ЗАДАЧАМ ❑ Продукт №: Job stories ❑ Продукт №: CJM ❑ Синхронизировать результаты с UX-лабораторией КАРТА ВЗАИМОДЕЙСТВИЯ (CJM)
  44. ПРОВЕДЕНА КАК МИНИМУМ ОДНА ПРОДУКТОВАЯ ВСТРЕЧА НА БАЗЕ CJM ❑

    Продукт №: Встреча с менеджером (барьеры, мотиваторы) ❑ Продукт №: Макеты гипотез решения проблем ❑ Продукт №: Решения внедрены ❑ Продукт №: Собраны метрики, повторная встреча с менеджером для оценки результата КАРТА ВЗАИМОДЕЙСТВИЯ (CJM)
  45. PARADIGM НА ТОКЕНАХ Версия 1.0 доступна внутри и снаружи компании.

    Работает на новой архитектуре, которую проще внедрить на продукты. ❑ Решены проблемы генератора токенов ❑ Почищен набор иконок ❑ Живой гайдлайн обновлён с учётом новой архитектуры ❑ Пилотные продукты используют новую архитектуру ❑ Проведена пиар-поддержка обновления ПРИНОСИМ ЦЕННОСТЬ ПРОДУКТАМ И БИЗНЕСУ → ХОРОШИЙ ДИЗАЙН НА ЖИВЫХ ПРОДУКТАХ
  46. РЕШЕНЫ ПРОБЛЕМЫ ГЕНЕРАТОРА ТОКЕНОВ ❑ Доделать адаптивность внутри тем (2h)

    ❑ Параметризировать формулы состояний объектов (наведение, активное и т.д.) (0,5h) ❑ Сделать так, чтобы после всех внесённых выше доработок генератор снова стал собирать темы (??) ❑ Исправить генерацию миксинов в SASS (??) ❑ Доделать вызов цветов из отдельного файла (1h) PARADIGM НА ТОКЕНАХ
  47. ПОЧИЩЕН НАБОР ИКОНОК ❑ Удалить устаревшие и дублирующие иконки (2h)

    ❑ Указать правильную основную версию (2h) ❑ Доработать именование файлов (2h) ❑ Изменения не должны поломать продукты (??) PARADIGM НА ТОКЕНАХ
  48. ЖИВОЙ ГАЙДЛАЙН ОБНОВЛЁН С УЧЁТОМ НОВОЙ АРХИТЕКТУРЫ ❑ Оформление Paradigm

    сделано на темах (16h) ❑ Элементы вставляем через React (16h) ❑ Спецификация выводится на основе данных из тем (12h) ❑ Работает переключение тем (8h) ❑ Добавлен раздел с иконками (6h) ❑ Опубликованы шаблоны для Sketch (8h) PARADIGM НА ТОКЕНАХ
  49. ПРОВЕДЕНА ПИАР-ПОДДЕРЖКА ОБНОВЛЕНИЯ ❑ Выложить на GitHub (??) ❑ Написать

    статью про версию 1.0 и будущие планы (по 4h) ❑ Сделать внутреннюю презентацию про версию 1.0 и будущие планы (2h) PARADIGM НА ТОКЕНАХ
  50. РАЗНЫЙ УРОВЕНЬ СЛОЖНОСТИ OKR бывают в трёх состояниях – это

    влияет на сложность работы по ним: ❑ Инициировать ❑ Развить ❑ Доделать
  51. РАБОЧИЕ ГРУППЫ КАК МЕХАНИЗМ ВНЕДРЕНИЯ У каждого OKR собирается рабочая

    группа (3-5 в квартал). В них записываются те, кому интересно внедрение конкретного подхода. Поначалу их фасилитировал я, но после отладки процесса это стали делать сами дизайнеры. Так можно сделать больше и команда более вовлечена.
  52. 1. ПОНЯТЬ, ЧЕГО ХОТИМ На первой встрече мы должны понять,

    почему и для чего нам нужен этот метод. Как он ложится под наши реальные задачи, чем он будет полезен для нас. Дальше описываем OKR – цель и измеримые результаты. После этого – список задач и ответственные по ним.
  53. 2. РЕГУЛЯРНО РАЗБИРАТЬ ЗАДАЧИ Группы встречаются раз в 2 недели

    и разбирают ближайшие задачи. Постепенно приближаемся к цели. Важно научиться добавлять эти «инфраструктурные» задачи в продуктовый план, чтобы не приходилось выкраивать минуты в перерывах и оставаться вечерами – так будущее наступит быстрее.
  54. ПИЛОТ → ЕВАНГЕЛИЗМ → МАСШТАБИРОВАНИЕ Наш основной подход к внедрению

    любых подходов и практик. Сначала обкатываем формат на нескольких тестовых задачах и проектах. После того, как они показали себя хорошо – рассказываем об успехе внутри компании и получаем новые внедрения.
  55. МАСШТАБИРОВАНИЕ И ИНСТИТУЦИОНАЛИЗАЦИЯ Подходы и практики должны прорабатываться с учётом

    масштабирования – это главная идея DesignOps. В остальном термин не описывает ничего нового – всё это уже было под маркой дизайн-менеджмента.
  56. Дизайнеры сами должны инициировать изменения в компании. Никто не возьмёт

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

    всех в своём деле и сами показали, где проблемы и как их решить. А после этого – стиснув зубы прошли через все трудности и невзгоды.
  58. Рассматривайте улучшения в дизайне в разрезе ценности для бизнеса. Опишите

    интерфейсный и организационный долг – это первый шаг к выздоровлению. Изменения в процессе – это непродуктовые задачи. Их нужно уметь проталкивать в план. Играйте «в долгую». Изменение дизайна в компании – это задача на несколько лет, а не месяцев. Будьте дизайнерами не только продуктов, но и организации, а также роли дизайна в ней.
  59. P.S. Думайте о перестройке социо-технической системы, а не просто обновлении

    нескольких экранов. Причина плохих продуктов – это плохая машина, которая их производит, так что чинить нужно в первую очередь её.