Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Yury Vetrov Yury Vetrov
November 28, 2018

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

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

Avatar for Yury Vetrov

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. Думайте о перестройке социо-технической системы, а не просто обновлении

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