UX/UI case: отправляйте email рассылки, которые читают

Paul Abramiankou
DesignSpot
Published in
8 min readAug 22, 2019

[UX Сase Study]

Это статья из серии рассказов о проектах в DesignSpot School 2019.
Проект разрабатывался в рамках
летней менторинг-программы командой студентов школы и менторов из сообщества DesignSpot.
Задачей команды было разработать цифровой продукт или сервис для решения конкретных задач реальных заказчиков.
О всех трудностях дизайн-процесса, созданных артефактах и поиске решений, вы узнаете из этого лонгрида.
! Добавьте статью в закладки, так как информации очень много и за раз все полезное не запомнить, и не забудьте похлопать :)

Привет! Меня зовут Паша, я представляю команду EPAMail и этот лонгрид посвящен нашей учебе на третьем этапе DesignSpot School.

Немного предыстории.

Однажды ̶н̶а̶м̶ ̶п̶р̶и̶л̶е̶т̶е̶л̶о̶ ̶п̶и̶с̶ь̶м̶о̶ ̶и̶з̶ ̶Х̶о̶г̶в̶а̶р̶д̶с̶а̶ пришел email о зачислении на первый этап школы DSS. 2 месяца мы разбирали азы веб-дизайна и еженедельно выполняли поставленные таски. После успешной сдачи нам предстояла самостоятельная работа над социальным проектом под чутким присмотром ментора в рамках второго этапа. То есть до учебы на третьем этапе никто из нас не работал в команде и потому главный квест заключался как раз таки в слаженной работе нашего небольшого механизма. И он работает в первую очередь благодаря сверхспособностям Яны Обмоиной и Насти Лозицкой (Жаворонковой).

Настя умудрилась выйти замуж и не бросить затею с учебой, а Яна на каждую нашу очную встречу приезжала из Осиповичей (100 км от Минска) и воспитывала ребенка! Понятно, почему сверхспособности? Я бы так не смог. Особенно выйти замуж. Менторит нас Inna Danilchik и ей отдельное спасибо, но об этом позже.

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

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

И вот мы на финишной прямой, осталось допилить UI-концепт, закончить брендбук, отшлифовать финальную презентацию, доползти до сцены, рассказать, показать все это и можно выдохнуть. Можно? Как-то непривычно будет жить без вайеров и отчетов. Похоже, где-то за углом 24-го августа нас ожидает чувство пустоты, все-таки мозг полгода грузил все ядра, а тут ему оставляют чистый рабочий стол. Наверное, процессор по привычке будет греться и раз в месяц ожидать “Ну что же, друзья, мы начинаем!” голосом Nikita Zenchenko

Итак, подробности

Problem Statement

Сверстаешь шаблончик? А если два?

В чем проблема? Зачем EPAM вообще понадобилась собственная тулза для рассылок?

Проведя Kick-off Meeting со стейкхолдерами, выявили следующие проблемы:

  1. Из-за внутренних ограничений компании, о которых наша история умалчивает (привет, NDA), использовать third-party тулзы не представляется возможным, да и интегрировать в них внутренние сервисы компании тоже.
  2. В EPAM около 30 000 сотрудников, а списки получателей (DL — Delivery Lists) –- сплошь хаос и неразбериха –- никто не знает сколько этих списков, как их искать, в каких сотрудник состоит, а на какие вообще не имеет возможности отправить рассылку. Все решается только через запрос в Support.
  3. Нет библиотеки задизайненных шаблонов, а значит нет привлекательного дизайна и единого корпоративного стиля рассылок.
  4. Нет простого и удобного конструктора. А между тем, сотрудники тратят очень много времени на уговоры фронтендеров “сверстать еще один шаблончик”.
  5. Статистика рассылок отсутствует, что делает невозможным базовый анализ востребованности контента и приходится экспериментировать вслепую.

После этого нам предстояло пополнить список гипотезами и проверять, проверять и еще раз проверять их.

User Interview

Наша целевая аудитория — сотрудники EPAM. И потому мы не могли пойти гулять по улицам, идентифицируя их по отличительным признакам и задавая вопросы из списка в 3 страницы. Благодаря нашему ментору мы быстренько получили “имена, пароли и явки” подходящих под нашу ЦА респондентов.

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

Data Analysis

После интервью мы выделили два основных сегмента целевой аудитории:

  1. Сотрудники, для которых регулярные рассылки входят в обязанности
  2. Сотрудники, создающие рассылки по собственной инициативе

На основе полученных данных мы описали два типа персон. Познакомьтесь с этими красавчиками 😍:

Так как наша аудитория сегментирована всего-лишь на две группы, а проблем у нас больше и каждую хотелось изучить досконально, мы создали несколько CJM по разным сценариям, покрывающим Pain Points на основных этапах создания рассылки:

  1. Создать новый список получателей
  2. Создать шаблон письма
  3. Получить аналитический отчет по рассылке

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

Что это за кто?

Это не рыба с Dribbble или Behance, все честно, и очень нам помогло на этапе определения MVP, а затем при прототипировании — мы прописали возможные решения (зеленые полосочки) для всех Pain Points (красные полосочки) и учли их в дальнейшем проектировании концепта.

Затем собрали все эти решения, приоритизировали по методологии MoSCoW и определили MVP-концепт на уровне списка фич.

Off-topic

Казалось бы, самое страшное позади, но нет —

“Приходите 6 июля и расскажите о проделанной работе со сцены”

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

Ideation

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

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

Считай, что это схема решения твоих проблем

Красота, не правда ли?

Дальше — лучше.

Проделав немалый труд, мы запилили пилотную версию прототипа по трем сценариям (мы их рассматривали при создании CJM) и собрали все в одну большую паутинку:

Но будем реалистами, скорее всего, ты решаешь проблемы как-то так

Concept Validation

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

Урок №59841 — не влюбляйся в свои решения. Скорее всего, они неправильные

Не ошибается тот, кто ничего не делает!

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

Branding & Visual Design

Между фазами проектирования и UI-дизайна мы запланировали апгрейд логотипа — именно тогда по планам у нас должен был сформироваться общий вижн продукта (уже провалидированный). Настя взяла ответственность за лицо продукта на себя и сделала минималистичный логотип с простым и понятным названием:

Слева конвертик, вы поняли, да? Офигенно!

Хотите наконец узнать, к чему это все и что же мы все-таки наделали? Смотрите:

Процесс создания рассылки

Ну вот и все

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

Благодарности

Хочется выразить нашу признательность всем тем, кто на протяжении семи месяцев тратил на нас свое время, силы и опыт:

Inna Danilchik — она нас курировала, направляла, подсказывала, учила, помогала во всем и в любое время. Мы говорим СПАСИБО всей командой за честность и прямоту, за пинки под ленивый джуниорский зад и самоотверженную помощь на сложном пути освоения experience-дизайна.

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

Nikita Zenchenko, Денису Каргину и всем организаторам школы за ваш труд, время и бескорыстную помощь.

Саше Дудинскому, Антону Хаткевичу, Наташе Алисейко, Жене Аромаевой, Ксюше Рабчинской, Тане Шур, Оле Угай за помощь в интервью, тестировании продукта, подсказки, инсайты и напутствия.

Спасибо. Если вам была интересна история — хлопайте, а если нет, все равно хлопайте.

В интернете можно.

Наша команда

Павел Абраменков:

https://dribbble.com/BRMNKV

Анастасия Лозицкая:

Яна Обмоина:

Читайте другие статьи из серии UX Сase Studies проектов DesignSpot School 2019

Сообщесво и школа в сети:
- DesignSpot на Medium
- Сообщество DesignSpot на Facebook
- Бесплатная школа дизайна от DesignSpot на Facebook
- DesignSpot в Telegram
- DesignSpot в Instagram #dsgnspot

--

--