Создание гайдлайнов для команды UX/UI-дизайнеров, разработчиков и тестировщиков
UX / Процессы / 2024-2025
В этом кейсе я хочу рассказать о том, как благодаря созданию гайдлайнов и обучению коллег их использованию, мне удалось ускорить и упростить процессы работы нескольких отделов компании.
Сейчас
- Гайдлайны созданы, доступны и регулярно дополняются;
- Возросла скорость принятия решений при создании макетов, их верстке и тестировании;
- Снизилась необходимость обращения к специалистам из других отделов для принятия решений в процессе создания продукта.
Гайдлайны — это набор правил и принципов, которые помогают команде создавать последовательный, понятный и масштабируемый пользовательский опыт.
На момент начала моей работы, в компании отсутствовали описания работы и поведения элементов в разных ситуациях и при разных сценариях, и поняв, что эта ситуация затрудняет работу команде, я решила её исправить, создав доступный не только для дизайнеров, но и для всей команды, сборник инструкций.
На момент начала моей работы, в компании отсутствовали описания работы и поведения элементов в разных ситуациях и при разных сценариях, и поняв, что эта ситуация затрудняет работу команде, я решила её исправить, создав доступный не только для дизайнеров, но и для всей команды, сборник инструкций.
О чём речь
Что я сделала
- Провела анализ обращений коллег в каналы, созданные для взаимодействия по вопросам дизайна, и составила список основных болевых точек;
- Дополнительно изучила материалы по темам, требующим более глубокого погружения, таких как адаптация макетов под RTL (Right-To-Left) верстку и т. п.;
- Разработала в Figma многостраничный гайдлайн с простой и удобной навигацией и интерактивными прототипами (например, для демонстрации поведения элементов при скролле);
- Успешно внедрила использование гайдлайнов в цикл разработки и улучшения продукта.
О проекте
Компании Ecoplatform (Россия и Беларусь), Sparklo (Ближний Восток и Северная Африка) и SIRC (Саудовская Аравия) — это производители и операторы фандоматов — оборудования для сбора вторсырья.
При этом пользователи могут не только позаботиться об окружающей среде, но и получить выгоду — бонусы, которыми можно оплачивать коммунальные услуги, проезд в транспорте, продукты, а также скидочные купоны.
При этом пользователи могут не только позаботиться об окружающей среде, но и получить выгоду — бонусы, которыми можно оплачивать коммунальные услуги, проезд в транспорте, продукты, а также скидочные купоны.
Взаимодействие с пользователями ведётся через фандоматы для сбора вторсырья и мобильные приложения сервисов.
Проблема и задача
Отсутствие гайдлайнов с чётким описанием поведения элементов интерфейса в различных пользовательских сценариях приводило к дополнительным временным и финансовым затратам на этапах дизайна, аналитики, верстки и тестирования.
Я поставила себе цель оптимизировать процесс работы продуктовой и смежных команд, создав гайдлайны с описанием элементов интерфейса и их ожидаемого поведения в разных сценариях использования.
Я поставила себе цель оптимизировать процесс работы продуктовой и смежных команд, создав гайдлайны с описанием элементов интерфейса и их ожидаемого поведения в разных сценариях использования.
Цель
Снизить количество ошибок, временных и финансовых затрат, возникающих в процессе создания продукта.
Инструментом достижения цели стало создание понятных для команд гайдлайнов с визуализацией этих решений для упрощения их восприятия и внедрения.
Инструментом достижения цели стало создание понятных для команд гайдлайнов с визуализацией этих решений для упрощения их восприятия и внедрения.
Я проанализировала обращения коллег, связанные с необходимостью уточнения поведения элементов интерфейса, и составила список основных болевых точек. Затем отсортировала их по частоте упоминания.
На основе этого списка я сформировала план работы над первой итерацией гайдлайнов. В неё вошли следующие разделы: «Поведение элементов при скролле», «RTL и локализация», «Нейминг фреймов» и «Анимация в приложении».
На основе этого списка я сформировала план работы над первой итерацией гайдлайнов. В неё вошли следующие разделы: «Поведение элементов при скролле», «RTL и локализация», «Нейминг фреймов» и «Анимация в приложении».
Этап 1
Сбор и анализ данных, планирование
Гайдлайн был разработан в Figma и представил собой многостраничный документ.
В первой итерации я сосредоточилась на создании блока с основными правилами, необходимыми для работы с уже готовыми макетами, и с теми, разработка которых планировалась в ближайшем квартале.
В первой итерации я сосредоточилась на создании блока с основными правилами, необходимыми для работы с уже готовыми макетами, и с теми, разработка которых планировалась в ближайшем квартале.
Этап 2
Работа над гайдлайнами
Так как многие из потенциальных пользователей гайдлайнов не работают в Figma за пределами dev режима и не знакомы со всем функционалом фигмы, я подготовила обучающие материалы, рассказывающие, как, например, проигрывать анимацию прототипов, делиться ей с коллегами и не потеряться в списке описанных сценариев.
Информацию о появлении гайдлайнов я опубликовала во всех тематических рабочих каналах, а также создала обучающий скринкаст, к которому коллеги смогут обратиться в любое время повторно.
Информацию о появлении гайдлайнов я опубликовала во всех тематических рабочих каналах, а также создала обучающий скринкаст, к которому коллеги смогут обратиться в любое время повторно.
Этап 3
Презентация и обучение
В результате внедрения гайдлайнов
- Снизилось количество ошибок, возникающих при создании макетов дизайнерами и при их верстке разработчиками;
- Поведение элементов приложения стало предсказуемым и единообразным;
- Уменьшилась нагрузка на отдел тестирования и каналы, созданные для коммуникации между дизайнерами, разработчиками и тестировщиками;
- Выросла скорость ответов на вопросы, связанные с темами из гайдлайнов, заметно выросла;
- Был упрощён процесс обучения новых сотрудников, чья работа связана с созданием прототипов и версткой продукта.
Бонус: неожиданным положительным эффектом стало то, что маркетинговая команда и SMM-дизайнеры получили поддержку в вопросах RTL. Уменьшилось количество возникающих ошибок при адаптации материалов под языковые группы, требующие использование такой системы позиционирования контента.
Сейчас гайдлайны регулярно обновляются и пополняются, а также были продублированы в Confluence для удобства работы команды менеджеров с ними.
Сейчас гайдлайны регулярно обновляются и пополняются, а также были продублированы в Confluence для удобства работы команды менеджеров с ними.
Итог
Спасибо за внимание к этому кейсу!
