С чего начать UX/UI дизайнеру? Инструкция к первой продуманной работе в портфолио.

Gayane Belonovich
Дизайн-кабак
8 min readAug 9, 2021
Видео к статье, где наглядно объясняю материал

Интерфейсы как любой другой объект дизайна

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

Как вы заметили, из проблем вытекает назначение здания и вместе с ним возникают вопросы, на которые нужно ответить перед тем, как начать что-либо проектировать:

  • Для кого это новое, строящееся здание?
  • С какими проблемами сталкиваются люди, которые будут жить/работать/приходить в это новое задание?Можно ли их разбить на группы с одинаковыми проблемами?
  • Как пытаются решить эти проблемы сейчас, до начала строительства нового здания?
  • Каким образом людям, которые будут жить/работать/посещать это здание, было бы удобней и быстрей добираться до него?
  • Какие правила по технике безопасности необходимо учесть при проектировании, строительстве и эксплуатации данного здания и много других вопросов.

Заметили? В самом начале пути даже речи нет о том, как будет выглядеть здание (UI). Всё начинается с проблем и вопросов (UX). Аналогичная ситуация и при разработке интерфейсов. Перед тем как проектировать, дизайнеру необходимо провести ряд работ для поиска информации, это называют исследованием. В зависимости от ситуации и стадии проекта, возникают потребности в разном подходе к выяснению проблем/неудобств для дальнейшего исправления. Например, проект уже запущен, но пользователи уходят к конкуренту по каким-то причинам. Вы не скажите: а давайте замутим A/B тестирование и поймем почему они уходят! Вы понимаете, что в данной ситуации этот метод/подход не даст нужной инфы. Вы должны найти подходящий вам способ для выявления причины этой проблемы, тогда вы сможете эффективно ее устранить (кстати, о проблеме вы тоже каким-то методом должны были узнать).

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

Как всё это применять?

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

Попробую помочь вам сдвинуться с мертвой точки именно в UX и провести одно небольшое исследование. Думаю вы сможете положить эту работу в своё портфолио и увеличить шансы на получение стажировки в местных компаниях.

Если оно вам поможет, обещайте оставить коммент под статьей или написать в телеграмм, мне будет приятно :)

Чтобы было продуктивно, первые 5 работ я проверю и дам детальный фидбек БЕСПЛАТНО. Мы даже вместе их глянем в прямом эфире. По каждой следующей работе дам короткий фидбек, так что не стесняйтесь отправлять, все работы проверю: ggb.channel.kz@gmail.com, укажите в теме письма “Домашка #1. Покупка билетов”

Ваша первая обдуманная работа в портфолио

Так как у нас с вами нет реальной задачи, мы ее выдумаем.

  • Выберем любой местный сервис по покупке билетов (Сhocotravel, Kaspi, Halyk и т.д.).
  • Выберем ЦА, время года и направление. Если у вас есть кто-то из знакомых, кто работает в любом из этих сервисов, то можете у них узнать самые распространенные направления и ЦА, которая их выбирает. Можно попробовать через колл центр. Такой подход будет более верным, тогда вы сможете ответить вашему будущему работодателю почему выбрали именно эту ЦА и это направление. Вы покажите, что подошли к работе с головой и проявляете проактивность в ситуации с малым количеством информации и не полагаетесь просто на интуицию.
  • Если не смогли выяснить, ничего страшного, давайте выберем вариант, который будет включать в себя определенные условия для покупки: Возьмем молодую пару: муж гос. служащий 180 см., оклад 250 000 тенге в месяц и премиальные. Жена миниатюрная вегетарианка, а ещё она домохозяйка с 3-х летним ребенком. На выходные они решили сгонять из Нур-Султана в Алматы (или наоборот), чтобы навестить родственников. Естественно надо это сделать не затронув рабочее время мужа (стандартный рабочий день с 9:00–18:00). Для чего я вам всё это описываю? Если вы еще не уловили, то поймете во время исследования.
  • Далее попробуем проанализировать удобство покупки билетов в данной истории. Выявить проблемы, с которыми сталкиваются наши герои и, ВОЗМОЖНО, сможем даже предложить какие-то решения.

С чего начать? Начнем с плана:

  1. Интервью ЦА. Для того, чтобы анализ более или менее походил на что-то стоящее, было бы хорошо найти и опросить несколько супружеских пар с 3-х — 5-ти летним ребенком. Минимум 3 пары. Какие-то условия могут поменяться (например, рост мужа или жена не вегетарианка), но направление, выходные и ребенок должны сохраниться. Какие вопросы им задавать? Для начала позадавайте общие вопросы, узнайте какой у них был опыт в прошлом:
  • Летали ли они когда-нибудь с ребенком, на какие расстояния?
  • Как подходили к выбору даты и времени полета?
  • С какими сложностями столкнулись?
  • Какие проблемы, возможно, их поджидали как молодую пару с ребенком при покупке билетов и при посадке на самолет, а также по прилету?
  • Каким сервисом пользовались при покупке и почему?
  • Кому отдают предпочтение и почему?
  • Кто обычно покупает билеты муж или жена? Почему? и пр.

Не забудьте всё это дело записывать, а то забудете потом))) Далее попробуйте воспроизвести старую ситуацию и предложите им, учитывая предыдущий опыт, попробовать купить билеты в вашем сервисе с текущим финансовым состоянием и текущим положением дел (направление, которое вы выбрали или мой вариант). Как бы они сейчас покупали их, если бы им надо было лететь в ближайшие выходные к родным. Просите озвучивать ход мыслей, любое действие. Включите запись экрана, вместе с аудио чтобы потом не забыть инфу (когда нажимаете на иконку записи экрана, на iPhone надо удерживать иконку, у вас появится окно, где вы можете включить микрофон). Позже объясню, что со всем этим делать.

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

2. Анализ проблем. Почитайте комменты в App Store и Google Market, возможно с аналогичными проблемами сталкиваются другие клиенты. Выпишите проблемы и комменты. Вам надо показать и доказать вес проблемы, неудобства. Используйте все возможные каналы для этого. Естественно какие-то проблемы могут оказаться единичными и не иметь большого веса. Но не работая в продукте вам сложно будет точно это узнать. Работодатель должен это учесть и обратить внимание именно на ход вашей работы и ход ваших мыслей.

3. Структурирование данных. Теперь надо как-то эти данные структурировать, чтобы самим в них не утонуть. Создайте таблицу в Google sheet (пример) и в первый столбик выпишите все проблемы, которые услышали, можете разбить их по шагам, чтобы они не были совсем вперемешку. Например, первый шаг«возникновения потребности в поездке», там могут быть проблемы финансовые. Следующий шаг может быть «принятие решение каким сервисом воспользоваться», там могут быть проблемы с выбором сервиса для покупки и т.д.

4. Приоритизация проблем. Выписали проблемы в один столбик, что с ними делать? Во втором столбике укажите количество повторений проблемы, (сколько раз упоминалось при опросе семей, при прочтении App Store Google Market и т.д). По каждому шагу вверх поднимайте самые часто встречающиеся проблемы. Озаглавьте последующие столбики названиями основных сервисов конкурентов + пару зарубежных известных сервисов, ну и свой сервис не забудьте включить в анализ (тот же пример).

5. Анализ конкурентов. Далее проанализируйте решают ли как-то эти же проблемы ваши конкуренты. Проставьте кто решает и оставьте коммент каким образом. Если не решают, то (тот же пример).

Google Sheet пример

6. Раскладка текущей CJM. Теперь у вас есть хоть какая-то картина происходящего. Наверняка вы заметили проблемы, которые не решает не один сервис, ничего страшного, скорей всего этому есть причины, если сможете предложить своё решение это не будет лишним, даже если в итоге это тяжело реализуемо. Ну и чтобы визуализировать, а не в табличке показать проделанную работу, было бы круто продемонстрировать эти проблемы на разложенном сценарии. Как это сделать? Примеры можете глянуть тут. Ребята анализируют разные сервисы, посмотрите как они описывают каждый свой шаг, ну очень круто. Кстати, можете посмотреть как они проанализировали сервис Hooper по покупке билетов, я как-то им даже пользовалась (если ранее вы не регались, то вас попросят оставить почту, но доступ к проекту могут дать не сразу, подождите денек, другой.)

https://growth.design/case-studies/hopper-permission-requests-ux/

Мы сейчас сделаем тоже самое, но в фигме. Возьмите все частые проблемы (в виде комментариев от ЦА) и разложите скриншоты экранов, по котором двигаются ваши опрошенные семьи. Покажите стрелочками куда кликали и на какой экран попали. Оставьте комментарии над каждым скриншотом вашего сервиса. Можете добавить и единичные комменты, просто отметьте их другим цветом. Таким образом, вы покажите наглядно в каких местах проблемы. Пример тут (отдалите,чтобы увидеть полное наполнение файла).

Ссылка на Figma тут

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

Ну вот, поздравляю!

У вас есть первая обдуманная работа как UX/UI дизайнера, вы не заметили как провели конкурентный анализ, как разложили текущий CJM (клиентский путь). Теперь вы понимаете разницу между просто рисованием картинок и продуманным подходом? :) Напоминаю:

  • Работы отправляйте на почту ggb.channel.kz@gmail.com
  • В домашке должны быть ссылки на ваш анализ в Google Sheet, СJM в Figma и решение (заранее проверьте доступы к файлам по ссылкам, ожидать доступа я не буду).
  • Указавайте в теме письма “Домашка #1. Покупка билетов”.
  • Как только я перестану их проверять, в статье сменю статус по проверке. Текущий статус: Домашка принимается

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

— — — — — — — — — — — — — — — — — — — — — — — — — — — —

Если вам была полезна статья, пожалуйста поставьте 50 хлопушек, чтобы другим было легче найти статью, да и мне будет приятно!

Ссылка на видео в YouTube https://youtu.be/fqSSaVazDpM

--

--