Тренинг по проектированию интерфейсов в Одноклассниках.ру и Mail.ru

1 и 2 марта прошел тренинг по проектированию интерфейсов для компаний Одноклассники.ру и Mail.ru, который я вел для сотрудников обеих компаний. Он состоял из двух частей — теория с рассказом об особенностях процесса и практика, в ходе которой процесс в разных вариациях опробовали на практике. В результате двухдневного мероприятия команды соседствующих по холдингу Mail.ru Group компаний познакомились друг с другом в рабочем режиме и получили много полезных знаний о том, как сделать свою работу лучше.

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

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

День 1 — Теория

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

Однако ближе к началу тренинга состав слушателей скорректировался — вместо планировавшихся дизайнеров оказалось, что собрались скорее проектировщики интерфейсов. Которые процесс и без того знали, но очень интересовались его нюансами — в итоге вместо беглого обзора мы подробно разбирали каждый слайд, рассказывая о примерах из совместной практики и выясняя тонкости работы. Что именно дает тот или иной документ, как можно разрулить такую-то проектную проблему, как общаться с менеджерами в случае непонимания? Презентацию пришлось по ходу дела расширять дополнительными примерами — интерес к деталям был живейшим.

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

День 2 — Практика

Для второго дня была приготовлена серия практических задач, которые сотрудники Одноклассников делают или собирались делать в ближайшее время. Необходимо было разбиться на несколько команд, каждая из которых поочередно прошлась бы по всему списку. Причем практика должна была идти в игровой форме — внутри каждой из команд есть разделение на роли “проектировщик”, “менеджер”, “разработчик” с ротацией по мере перехода от задачи к задаче. Роль “проектировщика” — основная в создании интерфейса, “менеджер” должен стараться отвлечь его и добавить новые функции, “разработчик” — заявлять о невозможности реализации предлагаемого.

Кроме того, в конце первого дня было роздано небольшое домашнее задание — подготовить не всегда уместные фразы и предложения, которые используются менеджерами и разработчиками в ходе работ. Например, “нужно добавить больше возможностей кастомизации” или “поиграйте с шапкой”. “Менеджер” и “разработчик” регулярно вытаскивали их из колоды, усложняя жизнь проектировщику. Это позволило привнести в процесс ограничения, которые встречаются в любой работе, а также посмотреть на процесс со стороны, которая часто является противником в конфликте. Да и общий ход тренинга получал игровые элементы.

Для разминки обе команды решили в начале дня одну из насущных задач — дизайн универсальной поисковой строки Mail.ru. Это позволило включиться в процесс и разогреться перед основной работой. После этого команды разделились и начали по очереди решать две более крупные задачи — переработка одного из сервисов Одноклассников и новую концепцию главной страницы Mail.ru. Причем решено было попробовать переменный формат работы — первую задачу команда решала в режиме учета множества существующих ограничений, вторую — в виде “свободного полета” без оглядки на прошлое. Благодаря этому отличались и отчетные презентации — в первом случае рассказывали о том, какие конкретные показатели будут улучшены с введением нового дизайна и как это уживается с ограничениями, во втором — завлекали красотой новой концепции. Да и сам формат подачи материала был у каждой из команд свой — кто-то заранее готовил слайды и выступал у проектора, кто-то рассказывал и рисовал вживую.

Одним из главных результатов тренинга стало то, что сотрудники из разных городов и компаний холдинга Mail.ru Group познакомились в рабочем формате и успели поработать друг с другом. Это наверняка сделает их совместную работу более продуктивной, да и встречаться им, кажется, понравилось — судя по всему, ежемесячные встречи станут для них регулярными. Кроме того, они узнали много полезных нюансов о работе проектировщика в других форматах проектной работы, а также увидели альтернативные подходы к созданию документации, что позволит улучшить внутренний процесс в обеих командах. Возможно, пригодятся и созданные в ходе практической части наработки — будет приятно увидеть их в реализованном виде.

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

P.S. Фото и другие материалы:

• Конспект и впечатления от Алишера Якупова;
• Фотографии второго дня.