Xetova — быстрорастущая технологическая компания в Найроби, добившаяся успеха в предоставлении продуктов и услуг на основе ИИ для государственных организаций, НПО и корпораций. Однако по мере расширения компании стало очевидным, что отсутствие целостной системы дизайна мешает работе пользователей и мешает новым дизайнерам быстро вносить свой вклад в команду.
Я создал дизайн-систему
Цели дизайн-системы
Чтобы решить эту проблему, я возглавил команду дизайнеров по внедрению новой системы дизайна для Xetova. Система дизайна — это набор рекомендаций по дизайну, шаблонов и компонентов, которые используются для создания единообразного внешнего вида продуктов компании.
Создавая новую централизованную систему проектирования, мы стремились:
- Объединить наши команды дизайнеров и инженеров, предоставив им более структурированный и управляемый подход к созданию продуктов.
- Ускорьте процесс проектирования и разработки, используя готовую библиотеку и шаблоны проектирования.
- Улучшите восприятие бренда и доверие пользователей за счет единообразного интерфейса, доступного для всех пользователей.
- Повысьте доступность в наших продуктах, внедрив доступность и включение в наши библиотеки компонентов как с точки зрения дизайна, так и с точки зрения кода.
Хотя было ясно, что этот проект потребует много ресурсов, планирования и временных затрат, мы знали, что эта работа была оправданным долгосрочным вложением компании в стандарты своего бренда и клиентов.
Это изменило поведение пользователей
Сделав дизайн-систему единым источником достоверной информации для строителей — дизайнеров и разработчиков — мы оказали положительное влияние на то, как конечные пользователи взаимодействуют с продуктами Xetova:
- Повышенная согласованность и надежность продукта: мы улучшили согласованность и предсказуемость наших продуктов прогнозной аналитики, увеличив охват системы проектирования для продуктов с 2% до 80%.
- Сокращение путаницы у клиентов: мы получили на 23 % меньше жалоб, связанных с путаницей с продуктом. Они были основаны на сеансах обзора обратной связи между командой дизайнеров и руководителем отдела продукта и менеджером по обеспечению качества.
- Более высокая воспринимаемая покупателем ценность: в течение 6 месяцев после внедрения системы дизайна воспринимаемая покупателем ценность продукта выросла на 20 % благодаря стабильному и качественному пользовательскому опыту.
- Повышение удовлетворенности клиентов. Благодаря более последовательному и целостному взаимодействию с пользователями наши показатели удовлетворенности клиентов выросли на 10 %.
И реализовал эти бизнес-цели
В целом внедрение системы дизайна в Xetova прошло успешно с момента ее внедрения в июне 2022 года, что привело к улучшению взаимодействия с пользователями и повышению эффективности взаимодействия между группами дизайнеров, инженеров и специалистов по продажам.
- Увеличение использования компонентов системы дизайна: количество страниц и функций, использующих компоненты системы дизайна, выросло с 9% до 78%.
- Сокращение времени проектирования и разработки. На проектирование и разработку новых функций уходит на 37 % меньше времени, поскольку теперь командам стало проще использовать и внедрять предварительно разработанные системные компоненты.
- Улучшение взаимодействия в команде: уровень сотрудничества между командами дизайнеров и разработчиков вырос на 25 % за первые 6 месяцев, поскольку у них был общий набор инструментов и руководств для использования.
- Сокращение несоответствий в дизайне: количество несоответствий в дизайне, о которых сообщили пользователи или которые были выявлены в ходе тестирования QA, уменьшилось на 50 % за первые шесть месяцев адаптации.
- Повышение согласованности дизайна продукта: согласованность дизайна разных продуктов выросла на 50 % в течение первых 6 месяцев, поскольку все дизайнеры имеют доступ к системе дизайна, а ее элементы наследуются во всех файлах дизайна продукта. .
Как я это сделал
Исследования и определение
Для начала мы провели исследование, чтобы определить основные цели и болевые точки, с которыми столкнулись внутренние заинтересованные стороны наших продуктов (дизайнеры, разработчики, менеджеры по продуктам, менеджеры по маркетингу и т. д.). Вот что мы нашли:
«Я продолжаю переделывать страницы с одними и теми же элементами, потому что все они выглядят по-разному», — дизайнер продуктов
«Я не могу повторно использовать компонент из другого проекта, так как у них нет схожей структуры», — Front End Engineer
"В наших продуктах много несоответствий в цветах, шрифтах, компонентах, рекомендациях..., что отрицательно сказывается на общем опыте пользователей и имидже бренда", — старший технический директор
После этого мы определили общие шаблоны и элементы дизайна для наших продуктов. Это включало создание списка основных компонентов интерфейса. Затем мы использовали эту информацию для создания списка приоритетов для нашей дизайн-системы MVP.
Эта аудиторская деятельность помогла нам выявить несоответствия в наших проектных ресурсах и подчеркнула необходимость более систематического подхода к документированию, обмену информацией и обслуживанию нашей системы дизайна.
Дизайн
На основе этого исследования мы представили инструменты и процессы, которые помогут нашей команде последовательно применять систему дизайна в своей работе. Это включало создание общей библиотеки проектов с многократно используемыми компонентами, а также установление процесса проверки и утверждения, чтобы гарантировать, что все проекты соответствуют рекомендациям:
- Системы цветов и шрифтов, соответствующие общим правилам бренда.
- Компоненты, доступные, интуитивно понятные и эстетичные
- Включение широко используемой системы значков Material Design для легкого внедрения дизайнерами, разработчиками и пользователями.
Мы обратились к нескольким системам дизайна, таким как Uber’s Base Gallery, Slack’s design guides, Material и другим системам дизайна, чтобы узнать о некоторых передовых методах, рекомендациях и инструментах, которые мы могли бы применить в нашей системе дизайна.
Система дизайна теперь доступна для всех членов команды Xetova.
С кем я сотрудничал
Я сотрудничал с кросс-функциональной командой для создания дизайн-системы. В состав команды входили следующие участники:
- Менеджеры по продуктам. Они рассказали о бизнес-целях и задачах системы дизайна.
- Разработчики: они следили за тем, чтобы дизайн-система была легко реализуема и соответствовала стеку технологий компании.
- Исследователи: они провели исследование пользователей, чтобы понять потребности и болевые точки нашей целевой аудитории, и использовали эту информацию для обоснования решений по дизайну.
- QA: они обеспечили доступность дизайн-системы и ее соответствие отраслевым стандартам.
- Другие дизайнеры. Они следили за тем, чтобы система дизайна соответствовала принципам брендинга и визуальной идентификации компании, а также предоставляли отзывы и предложения по улучшению системы дизайна.
Сотрудничество с кросс-функциональной командой позволило нам создать дизайн-систему, отвечающую потребностям всех заинтересованных сторон и обеспечивающую последовательный и целостный пользовательский опыт для наших клиентов.
Проблемы, с которыми я столкнулся
Как дизайнер, создающий дизайн-систему, я столкнулся с некоторыми проблемами:
- Управление конфликтующими приоритетами. У разных заинтересованных сторон могут быть разные приоритеты и цели для системы дизайна, что может затруднить создание системы, отвечающей всем потребностям.
- Баланс согласованности и гибкости. Найти правильный баланс между согласованностью и гибкостью в дизайн-системе было непросто. Обеспечение достаточной гибкости дизайн-системы, позволяющей использовать различные продукты и варианты использования, при этом сохраняя согласованность, было непростой задачей.
- Использование устаревших дизайнов. Нам пришлось рассмотреть и ассимилировать устаревшие дизайны и компоненты, которые накапливались с течением времени, было сложно согласовать их с новой системой дизайна.
- Управление изменениями. Внедрение новой системы дизайна может быть разрушительным для команд, которые привыкли работать определенным образом. Управление изменениями и предоставление достаточной поддержки и ресурсов, чтобы помочь командам адаптироваться к новой системе, было непростой задачей.
- Измерение успеха. Было сложно определить и измерить успех дизайн-системы. Определение ключевых показателей эффективности и отслеживание прогресса имели решающее значение для обеспечения успеха системы проектирования.
Размышления
В этом проекте я получил ценную информацию об отношениях между дизайнером и не дизайнером, которой я поделился в этой статье 👇
Первоначально опубликовано на https://stephaniekabi.com.