Каким должен быть продуктовый дизайнер в современной IT-компании

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

Я — Карина Касиманова, руководитель отдела дизайна международной продуктовой IT-компании Kolesa Group. В этой статье расскажу про:

- влияние дизайна на бренд компании;
- как устроена дизайн-команда Kolesa Group;
- как дизайнеры работают со специалистами из других отделов;
- реальные бизнес-кейсы;
- где выучиться на специальность;
- советы людям, которые хотели бы работать дизайнером в IT.

Влияние дизайна на бренд компании

Согласно исследованию McKinsey от 2018 года, компании, которые используют качественный дизайн, увеличили свою прибыль на 32% и общую доходность акционеров на 56% быстрее. Дизайн увеличивает добавленную стоимость товаров и услуг: iPhone продается дороже других смартфонов в том числе из-за хорошего дизайна.

В IT, например, в продуктовых приложениях, продукт задает дизайн, а не наоборот. Миссия продукта, его УТП, ценность и то, какие потребности пользователей он закрывает — всё это напрямую влияют на дизайн. В плане брендинга все то же самое.

Как устроена дизайн-команда в Kolesa Group

Дизайн-отдел в Kolesa Group состоит из двух команд (всего 18 человек):

1) графические дизайнеры (есть тимлид);
2) продуктовые дизайнеры (есть техлид).

У Kolesa Group 4 основных платформы: Kolesa.kz, Krisha.kz, Market.kz, Avtoelon.uz. Создание и сохранение логики графической части — это часть бренда компании. Очень важно верно пронести её через все эти платформы, используя все наши инструменты: маркетинг, PR, социальные сети, через сами продукты.

Графические дизайнеры работают в тесной связке с продуктовыми дизайнерами. Графдизы также несут продуктовую ценность в своей работе дополнительно через каналы: маркетинг, HR и т.д.

В графической команде есть motion-дизайнер. Это даёт нам много возможностей. Можно транслировать наши продукты с помощью motion design: а это двигающиеся заставки, видео в социальных сетях, в рекламе в YouTube и для подкаста «Код и кофе», а также в других каналах. В дальнейшем мы хотели бы внедрить motion-design и в наши приложения. Например, для более качественных и детальных анимаций.

Расскажу, как у нас в компании происходят процессы.

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

2. Далее подключается графический дизайнер, который добавляет иконки, иллюстрации, учитывая брендинг продукта.

3. Отправляем на исследование команде UXR.

4. Отрабатываем обратную связь, вносим правки в дизайн.

5. Отправляем в продакшн на тесты, наблюдаем, принимаем решения. В результате у нас создается целостный продукт со всеми составляющими.

Как дизайнеры связаны со специалистами из других отделов

Дизайн-отдел участвует практически на каждом этапе разработки продукта от этапа discovery до post-production.

1. Разработка продукта у нас начинается с этапа discovery, где собираются продуктовые гипотезы через метрики, воронки, аналитику, исследования. Product-менеджеры создают бэклог задач, который утверждается руководством (pitching).

2. Затем идёт следующий этап разработки продукта — дизайн. На этом этапе мы прогоняем наш фреймворк, который начинается от изучения задачи и заканчивается поддержанием дизайна, пока он живет в live. На этапе дизайна участвуют:

- Product-менеджеры
Они сверяют, насколько бизнес-кейсы, которые они поставили, соответствуют тому дизайну, который был создан.

- Исследователи
Мы тестируем дизайны и смотрим реакцию наших пользователей. Но ещё не отправляем в live.

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

3. Следующий этап разработки продукта — его передача непосредственно разработчикам. Как только они закодили продукт\фичу, он отправляется на дизайн ревью. Чтобы проверить насколько дизайн разработан так, как это было в наших макетах.

4. После апрува дизайнера, дальше все идёт к QA для тестирования.

5. После апрува от QA, это возвращается к разработчику, и он отправляет это в live. Продукт запускается для всех пользователей.

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

Реальные бизнес-кейсы

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

Кейс №1
Повысили конверсию во «Все отзывы» в Kolesa.kz

Проблема
30% пользователей, искавших новый автомобиль, читали отзывы о нём на экране с описанием, но во «все отзывы» переходили только 3,46%. То есть интерес у людей был, но возможность прочитать множество отзывов они не замечали.

Цель
Повысить конверсию с 3,46% (5 тысяч пользователей) ориентировочно до 10% (≈14,5 тысяч пользователей).

Решение
Было решено изменить дизайн внешнего блока «отзывов». Прогноз возможного роста конверсии смоделирован по аналогичным фичам в продукте.

Как строилась работа:

1. Для увеличения конверсии команда сформировала гипотезы по изменению дизайна.

2. Дизайнеры сделали черновые макеты, где мы обсуждали какой макет лучше сработает, соответствует ли он дизайн-коду всего продукта.

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

4. Сделали пост-релизную аналитику. Конверсия выросла — мы оставили этот дизайн.

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

Результат
Конверсия в переход во «Все отзывы» выросла за месяц с 3,46% до 9,13%.

Кейс №2
Улучшили процесс коммуникации между продавцом и покупателем в «личных сообщениях» (ЛС) внутри Market.kz.

Проблема
Готовясь к большому обновлению, мы перевели приложение Market.kz на технологию SPA (single page application). Появилась проблема — приложение долго считает, что пользователь «онлайн», после того как он вышел. Отсюда неудобства:

1. Push-уведомления о новых сообщениях приходят, когда пользователь онлайн, хотя в этот момент они не нужны. И наоборот — не приходят, когда человек закрыл приложение, а мы считаем, что он в «онлайне».

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

Цель
Улучшить user experience и не допускать дальнейшего пропуска пользователем важных уведомлений.

Решение
Мы решили сделать внутренние уведомления в SPA и прописать логику:

1) «Не отправлять пуши в активный диалог, в остальных случаях — отправлять даже «онлайн» пользователю».

2) При сворачивании приложения меняем статус пользователя на «офлайн», и теперь ему приходят обычные пуши.

Как строилась работа

1. Поставили задачу и сформулировали гипотезу.

2. Продуктовый дизайнер провёл брейншторм с мини-discovery командой, которая обладает знаниями текущей реализации «Личных сообщений»: frontend-разработчиком, backend-разработчиком, дизайнером, QA-инженером.

2. Дизайнер сформулировал дизайн-гипотезу, которую мы проверили на качественных исследованиях.

4. Вывели пользовательские сценарии и сделали дизайн.

5. Дизайн прошёл контроль качества у техлида и руководителя дизайна.

6. Отдали дизайн в разработку, затем на дизайн-ревью и тестирование.

7. Релиз.

8. Мониторим показатели и работу новой функциональности.

Результат

1. Количество диалогов между пользователями выросло в 2 раза.

2. Среднее время ответа на Android снизилось в 2,24 раза, на iOS — в 2,2 раза.

3. Бонус — немного выросла доля прочитанных сообщений (+1 процентный пункт).

Где выучиться на специальность

Курсы:

Яндекс.Практикум: Дизайнер интерфейсов

«Jobs To Be Done» Tilda Education

UX Crash Course: Fundamentals

СберУниверситет: Дизайн-грамотность

Сборники полезных статей и материалов:

Bang Bang Education

Nielsen Norman Group (ENG)

Telegram-каналы:

Дайджест продуктового дизайнера

Kolesa Design

UX Horn

UX Notes

Советы людям, которые хотели бы работать дизайнером в IT

Единственный мой совет — пробовать. Потому что IT-индустрия — это про опыт. Используйте разные инструменты, пробуйте быть графическим дизайнером, UX-дизайнером, UI-дизайнером, motion-дизайнером. Обязательно изучайте язык бизнеса. После этого вы поймёте, от чего именно конкретно вы кайфуете и где вам хотелось бы раскрыться.