История дизайна UX, стоящая за инструментом Flex Comp от Shopify

Dec 03 2022
Как мы использовали мышление адаптивного дизайна для создания сложного внутреннего инструмента
В июле 2022 года Shopify запустила Shopify Flex Comp, наш новый подход к вознаграждению, который ставит продуктовое мышление во главу угла того, как сотрудники Shopify (или
Иллюстрации Мод Трюдо.

В июле 2022 года Shopify запустила Shopify Flex Comp — наш новый подход к вознаграждению, который ставит продуктовое мышление во главу угла того, как сотрудники Shopify (также известные как Shopifolk) получают оплату. Это смелый и амбициозный проект, который может переписать историю оплаты труда в нашей отрасли.

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

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

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

Как штатный дизайнер продуктов в Shopify, я руководил разработкой этого проекта. Вот история о том, как мы подошли к UX для инструмента Shopify Flex Comp, и об основных проблемах, с которыми мы столкнулись на протяжении всего пути проектирования.

Сборка самолета во время полета

В течение четырех месяцев мы строили самолет, пока летали на нем.

Со стороны дизайна мы:

  • Созданы пользовательские истории;
  • Сопоставление пользовательских сценариев и задач;
  • Исследовал разные концепции;
  • Каркасные решения (настольные и мобильные);
  • Упрощена архитектура контента;
  • Создан новый визуальный брендинг и язык пользовательского интерфейса, характерные для инструмента;
  • Протестировали наши решения с внутренними сотрудниками на разных должностях и уровнях старшинства;
  • Протестировали наши решения с пользователями с ограниченными возможностями;
  • Тестировал решения с разными граничными случаями и несколькими валютами;
  • Создание визуальных материалов для учебных материалов и документации сотрудников;

В то же время другие команды в Shopify (юридическая, финансовая, инженерная , служба поддержки, HR, доступность) выясняли детали в своих областях. Юридические, финансовые и технические переменные менялись каждый день, что временами делало проект сложным и разочаровывающим.

Как команде дизайнеров удалось не сбиться с пути во время этого безумного приключения?

Адаптивное мышление является ключевым

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

«Перемены неизбежны». И это как нельзя более верно. Способность адаптироваться, когда изменения неизбежно происходят, является важным навыком на рабочем месте. Наличие адаптивного мышления позволяет вам ясно смотреть на сценарий и вносить необходимые коррективы, чтобы продолжать двигаться вперед.
Бет Хендрикс

Сценарий высокой достоверности

Как выглядит сценарий варианта использования 80%? И для каких граничных случаев нам нужно проектировать?

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

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

  1. Сравните ваши текущие предпочтения распределения с вашим новым профилем распределения
  2. Выберите распределение распределения между зарплатой и капиталом
  3. Выберите разделение капитала между RSU и опционами
  4. Просмотрите свое резюме
  5. Отправьте свои предпочтения
  6. Получите легкий доступ к поддержке и другой документации для дополнительных вопросов

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

Блоки пользовательского интерфейса с высокой степенью достоверности.

Активное сотрудничество > Асинхронная обратная связь

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

Эти совместные сессии были чрезвычайно мощными по многим причинам:

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

Разработка системы ясности

Сотруднику, присоединившемуся к новой системе вознаграждений, невероятно просто настроить общее распределение вознаграждений, перетащив ползунок вправо или влево. Но для команды UX разработка этого единственного в своем роде инструмента — достижение такого результата — была совсем не простой. Итак, давайте рассмотрим сложность, скрытую за этим простым в использовании пользовательским интерфейсом.

Люди имеют разный уровень знаний относительно финансовых концепций. Когда мы получили финансовую документацию, в которой разъяснялась новая система для сотрудников, мы увидели такие понятия, как «зарплата против капитала», «RSU против опционов», «% X влиял на % Y». Мы подумали: мы должны сделать это простым.

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

Сложность распаковки

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

Инструкции не печатаются непосредственно на собираемых деталях. Почему? Это было бы высокой когнитивной нагрузкой и привело бы к более высокому риску ошибок пользователя и чувства разочарования. ( Тот, кто всегда ненавидит читать руководство .)

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

  1. Пользовательский интерфейс Flex comp : пользователи делают свой выбор и представляют свои предпочтения — часть, ориентированная на действие.
  2. Внутренняя документация и вспомогательные материалы: пользователи могут глубоко погрузиться в каждую финансовую концепцию, связанную с этим новым инструментом, и лежащую в его основе логику.

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

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

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

Рецепт слайдеров

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

Как мы минимизировали ошибочные состояния

Мы изучили варианты с несколькими ползунками с уникальными переменными и быстро поняли, что пользовательскому интерфейсу придется обрабатывать и сообщать слишком много сценариев ошибок. (А кому нравится, когда на него кричит интерфейс?!)

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

Моделирование сценариев ошибок.

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

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

Правильный баланс между исследованием и точностью

При сложных параметрах необходимо установить баланс между этими двумя понятиями:

  • Исследование: предоставление пользователям возможности легко изучить эффект управления для всего диапазона параметра (в данном случае путем перемещения контроллера) и
  • Точность : предоставление пользователю возможности точно выбрать конкретное значение (в данном случае с помощью текстовых полей).

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

Эскизы визуализации данных.
Окончательная страница распределения.

На каждом этапе процесса мы помнили об одном очень важном элементе: дате запуска. Эта дата помогла нам сосредоточиться на основных частях V1, а также помогла нам быстро принимать правильные решения.

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

  • Легко ли им пользоваться? ✔️
  • Это доступно? ✔️
  • Соответствует ли это региональным нормативным различиям?✔️
  • Это выглядит хорошо? ✔️

В Shopify Flex comp уровень подписки составил 92% в первом окне подписки. Он используется тысячами сотрудников Shopify и доступен в десятках стран в разных валютах. Некоторые крупнейшие мировые компании сейчас обращаются за советом, поскольку они перестраивают свои системы талантов и вознаграждения.

Оглядываясь назад на это приключение, я считаю, что некоторые ключевые элементы имели решающее значение.

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

UX-дизайнеры — это те, кто привносит сочувствие пользователей к столу принятия решений. Объяснение того, почему решения X или Y могут нанести вред опыту пользователей и, в конечном итоге, повлиять на удовлетворенность пользователей продуктом. Требуется много энергии и мотивации, чтобы продвигать команду, в которой UX-дизайнеры составляют меньшинство, но это так важно. Решительное отстаивание интересов, потребностей и опыта пользователей на протяжении всего процесса создания и разработки стало ключом к успеху Flex Comp.

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