// //
Мнения

Создание продукта
от идеи до запуска: личный
опыт Андрея Гаргая

10 октября, 2017
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

Андрей Гаргай, ведущий UI-UX дизайнер в Wix, подробно рассказал о рабочем процессе создания продукта и специфике организации большой дизайн-команды на собственном примере.

О команде

Моя команда часто была динамической: у меня нет постоянного проекта. Все зависит от того, какая потребность есть у компании и где нужен именно я. Команда формируется на месте. Мы работаем вместе до момента, когда продукт становится независимым. Потом меня перемещают в новую «горячую точку».

В UX-отделе создаются продукты, в маркетинг департаменте рисуется материал для пиара. В студии сосредотачиваются веб-дизайнеры, иллюстраторы, аниматоры. Работа со специалистами всех направлений позволяет дизайнерам участвовать в разных проектах, постоянно учиться новому и не киснуть на одном месте. Я работал сперва в маркетинге, потом перешел на рисование темплейтов. Через какое-то время начал заниматься брендингом компании, одновременно помогая UX-отделу работать над продуктами. Набравшись опыта, я перерисовал главный редактор Editor, рисовал ADI и сейчас работаю над нашим следующим мобильным продуктом.

Это замечательно, что внутри компании процесс поставлен именно так. Обычно мы стараемся находить что-то, чем люди «горят», и развить у них склонности и талант.

О процессе разработки продукта

  1. Идея нового продукта появляется у CEO. Потом передается product-менеджерам, которые проводят исследования. Начинают с Client Discovery, изучая проблемы пользователей и то, какие технологические решения подойдут. На этапе анализа конкурентов задействуются product-дизайнеры.
    Уточню: у нас это люди, которые делятся на UX и UI дизайнеров. Если есть уклон в сторону UI, то этот человек также изучает поведение пользователей, делает вайрфреймы, хай-фиделити. Фактически, работу UX-дизайнера.
  2. После долгих анализов и изучения рынка формируется начальное видение продукта. Когда появляется представление о пользователе и сформирована идея, мы переходим к рисованию сырых прототипов. Создаются лоу-фиделити прототипы. Они загоняются в Invision или Axure и тестируется сначала между нами.
  3. Мы берем устройство с прототипом и просто заходим в разные отделы, чтобы протестировать, как себя будет вести человек. Просим его сделать основные задачи и смотрим, вызовет это затруднения или нет. Собираем данные, анализируем, вносим корректировки и снова тестируем. Часто тестируется сразу несколько прототипов для определения лучшего решения.
  4. Когда находим решение, полностью пририсовываем его в воркфлоу вайрфреймах. На этом этапе нужно проанализировать, все ли части пазлов сходятся в продукте.
  5. Потом создаются хай-фиделити вайрфреймы. Они снова тестируются. Получаем фидбек и правильно детализированные мокапы. Сново процесс проходит много анализов и утверждений от product-ов.
  6. Когда процесс построения вайрфреймов готов, переходим к UI-дизайну. На этапе обычно делается еще одно исследование по стилистике. Часто в нем участвуют все дизайнеры команды. Потом мы создаем мудборды с картинками, которые передают настроение стиля. Когда готов мудборд, выбираем три совершенно различные по структуре экрана и делаем первые наброски визуального дизайна. Каждый дизайнер может предоставить свое видение и вариант. Но есть, конечно, ограничения. Если это внутренний продукт, обязательно должен присутствовать фирменный брендинг.
  7. Когда определились с дизайном, начинается детализация. Экраны разбиваются на компоненты и гайдлайны. У нас уже есть готовая библиотека цветов, шрифтов и стилей, поэтому мы используем одну систему для всех продуктов. Что касается компонентов: когда интерфейс поделен на компоненты, начинается их детализация и проработка состояний и поведения. Одновременно идет проверка того, как компоненты сочетаются и взаимодействуют между собой. Они создаются универсальными, чтобы их можно было использовать в разных частях продукта.

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

О софте и инструментах

В основном, так:

  • Sketch для интерфейсов;
  • Illustrator для иконок;
  • Photoshop для фотографий;
  • Aftereffect для анимаций;
  • Invision для прототипирования, сейчас внедряем Framer;
  • Zeplin для экспорта файлов;
  • Google Drive для обмена файлами.

Организация работы в команде

Большое количество митингов очень утомляют, но в команде из 30-40 человек этого не избежать. Мы проводим daily updates между дизайнерами и product-ами. Эти встречи дают возможность узнать, кто над чем работает в данный момент, а также  скорректировать приоритеты.

Еще у нас есть Weekly с дизайнерами, узкой командой.Раз в неделю кто-то готовит материал, которым хочет поделиться: какие-то кейсы или интересные примеры.

Раз в две недели мы проводим Guild day. Все UX-дизайнеры собираются, чтобы поделиться опытом и помочь друг другу с выполнением задач. Сначала лекции от наших или приглашенных дизайнеров. Потом работа группами по 3-6 человек над заданиями, для которых нужны люди из других команд. Эти встречи важны потому, что только в отделе UX нас около 100 человек, и мы должны  оставаться одним целым.

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

Мы ведем цифровые гайды. Разделим их собственно на гайды и UI-библиотеку.

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

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

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

Специфика большой компании

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

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

Редко, но случается так, что нужны радикальные перемены.  Недавний пример: руководство полностью поменяло концепт продукта, над которым мы работали около 7-8 месяцев. Перемены — это хорошо, если они обоснованы. Но если дизайнер не верит, что это правильные изменения, он не сможет дать решение новых проблем. Для этого нужно обсуждать смену курса, предлагать другие варианты руководству.

О планах

Последний проект, над которым я работаю, это новое мобильное приложение. Детали я раскрыть пока не могу, но объем работы очень большой. Создаем дизайны для IOS и Android. Из-за дедлайнов планируется выкатывать тестовые версии, которые далеки от финального дизайна, но в эстимейтах заложены этапы полной реализации.

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

У нас есть еще кое-что для вас

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: