Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

Материал, который лучше поиска в «Гугле» объяснит, как устроена работа такого специалиста.

Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

Материал подготовлен при поддержке онлайн-школы дизайна Contented

Если спросить у поисковика, кто такой UX/UI-дизайнер, можно получить много абстрактных ответов: «очень востребованный специалист», «тот, кто создаёт интерфейсы» или «дизайнер приложений, удобных пользователю и выгодных бизнесу».

Конкретики в этих ответах нет. Поэтому вместе со школой Contented мы решили показать, из чего на самом деле состоит рабочая рутина специалиста. Для этого выбрали героиню — эксперта курса «UX/UI-дизайнер с нуля до ПРО», сотрудницу Tele2 Полину Семенченко — и провели с ней один рабочий день.

Полина Семенченко
Эксперт по дизайну продукта Tele2

Сначала разберёмся с терминами

UX — user experience, логика дизайна. То, как пользователь взаимодействует с интерфейсом: удобно ли ему, получается ли быстро решить свою задачу.

UI — user interface, визуальная составляющая дизайна. То, как выглядит интерфейс для пользователя: какого цвета кнопки, хорошо ли читаются шрифты.

UX/UI-дизайнер — специалист, который выстраивает логику интерфейса и сам его «рисует». В разных компаниях должности таких дизайнеров называются по-разному: я, например, «продуктовый дизайнер». Можно сказать, что я более глубоко погружаюсь в продукт.

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

Когда бабушка или папа спрашивают, чем я занимаюсь на работе, я отвечаю, что это цифровой дизайн, который делает сайты и мобильные приложения лучше. Я придумываю, каким путём пойдёт пользователь, и делаю этот путь удобным и красивым.

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

Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

В Tele2 гибкое начало рабочего дня. Я живу далеко от работы, поэтому из-за пробок добираюсь примерно к 9:30. Сначала иду за кофе, а работать начинаю примерно в 9:45. Мне нравится подход компании: здесь главное не то, сколько часов сотрудник просидел на рабочем месте, а объём выполненных задач.

Утро — планируем день и встречи

9:45 — проверяю почту, Slack и календарь. Когда непрочитанных писем не осталось, готовлюсь к рабочим совещаниям. Сегодня вторник — день, когда все коллеги работают из офиса, так что обычно на него выпадает много очных встреч.

Большую часть времени я провожу в офисе: удалёнка — круто, но иногда принять какое-то решение легче, перекинувшись парой слов с коллегой в офисе.

Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

В Tele2 я почти два года, за это время успела задизайнить несколько крупных разделов сайта — например, главную страницу личного кабинета абонента, витрину услуг и раздел «Вакансии». А ещё поработать над множеством более мелких задачек — добавить блок оплаты на одну страницу, изменить что-то на другой.

Так сейчас выглядит личный кабинет пользователя.
Так сейчас выглядит личный кабинет пользователя.

Я пришла в компанию через год после учёбы: окончила РЭУ им. Плеханова по специальности «Бизнес-информатика». Пыталась совместить технологии и дизайн, не хотелось жить без творчества. Поэтому, как только появилась возможность, записалась на годовую программу UX/UI и успешно её завершила.

11:00 первая встреча: планируем задачи на следующие две недели с командой дизайна.

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

Иначе проходят встречи с заказчиком. На них я часто показываю макеты, рабочие прототипы и задаю вопросы, которые возникли в ходе работы. Макет — это один или несколько статичных экранов. Прототип — анимированный макет, который показывает пользовательский путь: например, что откроется, если юзер нажмёт кнопку «Детали», куда его приведёт свайп вправо.

Так выглядит прототип: с его помощью мы понимаем, что увидит пользователь, нажав на кнопку с галочкой.

Практически вся моя работа сосредоточена в Figma — онлайн-пространстве для работы с графикой и интерфейсами. Также использую приложение для прототипирования Principle — например, если нужно сделать чуть более сложный прототип или продвинутую анимацию. Небольшая часть работы проходит в графическом редакторе Illustrator — им всё же больше пользуются коммуникационные дизайнеры.

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

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

Если я могу дать один совет, вот он: никогда не удаляйте предыдущие итерации макетов!

Если мы с коллегами не можем договориться, то мы идём тестировать макеты на пользователях. Тесты могут быть разными, но чаще всего мы делим юзеров на несколько групп и просим пройти в макетах сценарий: скажем, найти «в приложении» информацию о тарифе. Результаты могут быть неожиданными (и это нормально) — например, пользователь не поймёт ни один вариант.

Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

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

До обеда — рассказываю про большой проект

12:00возвращаюсь к работе после встречи с коллегами.

Я не могу подробно рассказывать об актуальных задачах, но могу поделиться тем, что уже готово. Когда я только пришла в Tele2, мне доверили большую задачу — редизайн главной страницы личного кабинета абонента. Она давно не обновлялась: не хватало несколько нужных блоков, UI — её внешний вид — устарел. При этом каждый месяц на страницу заходит около двух миллионов пользователей — на мне была большая ответственность.

Так выглядел личный кабинет пользователя до редизайна.
Так выглядел личный кабинет пользователя до редизайна.

Задачу дизайнеру ставит продакт: по запросу бизнеса он пишет бриф и добавляет в него какие-то материалы. Это могут быть референсы или аналитика (например, данные о том, что подключать какую-то услугу стали реже).

Работа всегда начинается с исследования. В некоторых компаниях есть UX-лаборатории, которые берут этот этап на себя, но в Tele2 большую часть исследований дизайнеры делают сами. Для этой задачи мне нужно было провести опрос и глубинные интервью с реальными пользователями.

Например: я хочу выяснить, какими функциями в личном кабинете пользуются чаще всего. В результатах опроса вижу: 90% юзеров заходят в кабинет, чтобы посмотреть, сколько осталось денег на счету. Я понимаю, что баланс — самая важная информация для пользователя, и стараюсь вынести её как можно выше в интерфейсе.

В моей работе исследования занимают 20–40% времени, в остальные часы я рисую макеты. Но у UX-дизайнеров, которые специализируются исключительно на аналитике и логике, исследования могут занять и все 100%.

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

Чтобы понять, откуда пользователи переходят в личный кабинет, куда идут дальше и какие элементы на странице самые кликабельные, — мониторила «Яндекс.Метрику» и «Гугл-аналитику». Такую аналитику я могу выгрузить сама, но если бы мне понадобились более сложные данные, например воронка продаж за большой период, я бы обратилась к коллегам из веб-аналитики.

Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

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

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

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

Вот так выглядит часть борда с аналитикой и выводами по этой задаче.
Вот так выглядит часть борда с аналитикой и выводами по этой задаче.

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

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

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

Ещё у нас есть UX-копирайтер — специалист, который умеет писать интерфейсные тексты. Они специфичны: как правило, они короткие, простые и очень насыщенные, ведь нужно дать пользователю как можно больше смысла за ограниченное количество времени — например, если он быстро пролистывает экраны приложения.

Первые черновые варианты макетов, коллеги могут оставлять комментарии.
Первые черновые варианты макетов, коллеги могут оставлять комментарии.

Финальные макеты готовятся, как правило, для нескольких разрешений экрана. Я делаю минимум для двух: мобильного устройства и экрана компьютера. Если проект очень важный и со множеством деталей, то проверяю, как дизайн выглядит на экранах разных смартфонов.

Может показаться, что работа дизайнера заканчивается, когда интерфейс нарисован. Не совсем. Макеты важно аккуратно передать в разработку, а после — провести дизайн-ревью.

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

Затем дизайн-ревью: когда разработчики верстают макеты и помещают их на тестовый стенд, я проверяю, соответствует ли вёрстка исходному дизайну. Все могут ошибиться: забыть цифру, перепутать цвет, пропустить кнопку — это человеческий фактор. Я проверяю все детали, и разработчики выкатывают интерфейс на фронт — реальный сайт или приложение.

Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

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

14:00 — встреча с руководителем.

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

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

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

Вертикальное развитие заключается в основном в росте ответственности: чем выше должность, тем меньше дизайнер работает руками. Названия должностей в разных компаниях отличаются, но логика одна: специалист становится старшим дизайнером, потом — лидом всей команды. А если есть крутые менеджерские навыки — руководителем большой дизайн-команды или даже отдела. Кто-то открывает собственную студию.

Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

В этой профессии важно постоянно учиться. Потому что дизайн — это не догмы (конечно, есть правила, паттерны, закономерности). Он очень быстро меняется: появляются не только новые визуальные тренды, но и программы. К тому же у каждого дизайнера свой взгляд, и преподаёт он дизайн по-разному.

Я стараюсь не отставать — на днях окончила «UI: визуальный дизайн интерфейса» от BangBangEducation, до этого проходила ещё один их курс. Также запомнился авторский курс Миши Розова, он арт-директор собственной студии. И конечно, дизайнеры постоянно участвуют в небольших мероприятиях: лекциях, митапах, воркшопах. Темы в них более узкие, например только продуктовые исследования или дизайн-системы.

Очень важное качество дизайнера — насмотренность. Но оно вырабатывается только с опытом. Сейчас смотрю на свои первые проекты и вижу много недочётов. Например, я могла не видеть, что экрану не хватает «воздуха», а тени нужно делать не такими жёсткими и тёмными. Тогда это не бросалось в глаза, а сейчас я знаю, что так делать не стоит.

Это дипломный проект, который мы делали на учёбе вместе с командой. Нужен был дизайн подписки на постоянного водителя для ребёнка в «Такси».
Это дипломный проект, который мы делали на учёбе вместе с командой. Нужен был дизайн подписки на постоянного водителя для ребёнка в «Такси».

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

Вторая половина рабочего дня — делюсь деталями

15:30 работа с копирайтером.

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

Все тексты для макетов, над которыми мы работаем, должны пройти через её руки. Процесс работы построен так: мы с командой утвердили дизайн и понимаем, что никаких больших изменений уже не будет. Тогда мы ставим UX-копирайтеру задачку: она посмотрит тексты и либо утвердит их, либо предложит замену.

Мы никогда не присылаем ей пустые макеты и не используем «рыбные» тексты а-ля Lorem ipsum. К тому же, если у дизайна или продукта есть важные нюансы, я дополнительно подсвечиваю их в ТЗ, пишу комментарии. Дизайнеры всегда стараются написать хороший текст сами, но профессиональный копирайтер может сделать их лучше, а ещё отследить ошибки.

Копирайтер оставляет комментарии прямо на макетах в Figma. Я исправляю все тексты и отправляю файлы на утверждение заказчикам. Иногда бывает так, что мы всё же упустили в тексте какую-то деталь или условия работы продукта изменились, — тогда итераций копирайта может быть несколько.

16:30 — «приёмка» изображений.

Приходит новое уведомление — графический дизайнер (мы их называем коммуникационными) прислала картинку для одной из моих задач.

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

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

Если мне кажется, что в макетах есть место для иллюстраций, то сначала примеряю несколько шаблонных картинок из запасов. Я предупреждаю заказчика, что картинки в макетах (как и тексты) пока не финальные. Но когда дизайн и пользовательский путь утверждён, я ставлю задачу на отрисовку итоговых иллюстраций. Важно подробно описать технические детали, например размеры, и суть картинки: посыл, который должен получиться. Грамотное техническое задание сильно сократит время дизайнеру.

В уведомлении сказано, что картинка готова: я скачиваю её и вставляю в макеты в Figma. Отправляю заказчику на финальное утверждение. Чаще всего отрисовка картинок и копирайт текста идут параллельно.

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

Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

Последняя задача на сегодня

17:30 ревью.

В Slack пишет один из фронтенд-разработчиков. Спрашивает, можем ли мы созвониться и провести дизайн-ревью (на нём команда убеждается, что финальный результат на сайте или в приложении соответствует исходным макетам).

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

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

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

Мы весь день подглядывали за UX/UI-дизайнером. Вот чем он занимается

Самое любимое чувство в моей работе — видеть свой дизайн на сайте. Когда он выпустился и с ним работают реальные пользователи, я чувствую себя как в меме с Леонардо Ди Каприо. Мне хочется ткнуть пальцем в монитор и сказать: «Смотрите, это же мой дизайн!»

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

Важно не только учиться, но и практиковаться — так считает школа Contented. Полина — эксперт их курса «Профессия UX/UI-дизайнер с нуля до ПРО». Он помогает начинающим дизайнерам набираться опыта и нарабатывать портфолио.

За 15 месяцев студенты успеют оформить 15 работ вместе с наставниками, пройти стажировку в ИТ-компании или студии, а также посетить практикумы с опытными экспертами. Они, кстати, работают в VK Group, Ozon или digital-агентстве Сuberto, основатель которого курирует курс.

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

Для читателей vc.ru Contented подготовили промокод «В дизайн» — он даст скидку 45% на все курсы школы. Использовать его можно до 16 июля включительно.

6969
73 комментария

В Tele2 гибкое начало рабочего дня. Я живу далеко от работы, поэтому из-за пробок добираюсь примерно к 9:30. Сначала иду за кофе, а работать начинаю примерно в 9:45.

Напомнило:
"На работе — я сам себе хозяин, хочу приду к 8:00, а могу и к 7:00 приехать."

Важная ремарочка — теле2 сидит в удаленном технопарке на юго-востоке (Румянцево), там нет удаленки (типа "мы за инфобез"), а рабочие места — довольно тесные (что можно видеть по фото).

UI/UX дизайнер без монитора, мышки с 13ти дюймовым макбучиком — это смехота.

31
Ответить

Комментарий недоступен

1
Ответить

Вот казалось бы, речь о UX, по ссылке можно даже целиком информацию о курсе увидеть.

Вопрос: по кой чёрт постоянно пытаться скрыть полную стоимость обучения? Меня не интересуют условия "при рассрочке" и "со скидкой при единовременной оплате" - меня интересует цена вопроса целиком.

Где мне найти исследование, из которого сделали вывод, что скрывать ценники от покупателя - это продуктивно и прикольно?

30
Ответить

Вероятно, полную цену не называют, так как она может отпугнуть. Полная цена в данном случае ~165 тысяч рублей (6900*24), для многих жителей СНГ не-айтишников, на которых видимо и рассчитан этот курс, это большая сумма.

Ответить

Интересно, откуда вообще столько хайпа вокруг этой профессии? Несколько знакомых в декрете учились на достаточно дорогих курсах, в итоге их там мало-мальски научили лендинги делать в фигме и на тильде. Пытались найти работу, в итоге в большинстве случаев игнор от HR. Эти курсы обещают чуть ли не золотые горы, море вакансий и заказов на фрилансе. А в итоге большинство вернулось на старые работы.

11
Ответить