контекст
работа над редизайном веб-сайта кофемании и внутренних интерфейсов
что было
устаревшая дизайн-система, дубли компонентов, отсутствие единых правил, неудобство масштабирования
бизнес проблема
нарушение консистентности интерфейсов, многократная переработка компонентов, сложности с адаптивностью
цель
создать единую, масштабируемую дизайн-систему, которая обеспечивает визуальное и функциональное единство для всех цифровых точек контакта
аудит интерфейсов
на первом этапе я провела детальный аудит всех цифровых продуктов, использующих элементы текущей дизайн-системы. внимание было уделено как веб-сайту сети, так и мобильной версии сайта, а также внутренним сервисами (CRM-интерфейс)
согласование визуального языка
с командой маркетинга
на этом этапе важно было обеспечить согласованность обновленных элементов дизайн-системы с ценностями и визуальному стилю бренда кофемании. я изучила актуальных брендбук, в котором были зафиксированы основные характеристики бренда: уважение, доверие и достоинство, удовольствие и стабильность
мы провели несколько рабочих сессий с командой маркетинга, где обсудили:
как сохранить баланс между эстетикой и функциональностью в компонентах — чтобы визуальный язык был одновременно выразительным и удобным для пользователя
где нужно оставить больше «воздуха», какой визуальный ритм и структура типографики должны использоваться в заголовках и карточках
какие цвета, шрифты и формы можно увести на второстепенный план, а какие, наоборот, вывести на передний
в результаты были определены ключевые принципы визуального языка. на их основе я доработала ui-компоненты и создала гайд по визуальному стилю внутри дизайн-системы
процесс работы
повторяющиеся элементы
для устранения повторяющихся компонентов я провела анализ существующих дизайн-макетов и компонентов, используемых на сайте и во внутренних сервисах, выявила случаи, когда один и тот же компонент создавался заново вместо переиспользования из основной библиотеке. это мешало адаптивности и масштабируемости интерфейса — каждый компонент вел себя по-разному и имел разные состояния без привязки к материнскому
неиспользуемые элементы
неиспользуемые элементы были выявлены в процессе аудита — это устаревшие компоненты от предыдущих итераций. они загромождали дизайн-систему, мешали навигации и вводили разработку в заблуждение. мы провели звонок с разработкой и дизайн-руководителем для определение совсем неактуальных элементов и элементов, которые пока стоит перенести в архив. также я удалила дубли, актуализировала некоторые версии компонентов и зафиксировала правила архивирования неиспользуемых компонентов
отсутствие состояний
отсутствие состояний у части элементов (таких как кнопки, поля ввода и карточки) вызывало сложности при разработке и тестировании интерфейсов. без четко заданных состояний — hover, pressed, disabled и focus — пользователи не получали необходимой визуальной обратной связи, а разработчикам приходилось импровизировать. я разработала и внедрила стандартные состояния для всех ключевых элементов, чтобы повысить интерактивность интерфейса и упростить реализацию
отсутствие адаптивности
неподдерживаемость адаптивности стала одной из критических проблем: часть компонентов не имела корректных мобильных версий или была недоступна в иных видах это снижало удобство использования сайта с телефонов из-за импровизации разработки. я переработала структуру компонентов, внедрив адаптивные правила и проверив их поведение в целевых разрешениях
результат
развитие и поддержка дизайн-системы — это про заботу о команде, скорости, бренде и пользователе. в кофемании это особенно важно — ведь интерфейсы должны соответствовать продукту
основные метрики успеха
производительность разработки
консистентность ux/ui
скорость адаптации дизайна под мобильные устройства
удобство поддержки и масштабирования
контекст
работа над редизайном веб-сайта кофемании и внутренних интерфейсов
что было
устаревшая дизайн-система, дубли компонентов, отсутствие единых правил, неудобство масштабирования
бизнес проблема
нарушение консистентности интерфейсов, многократная переработка компонентов, сложности с адаптивностью
цель
создать единую, масштабируемую дизайн-систему, которая обеспечивает визуальное и функциональное единство для всех цифровых точек контакта
аудит интерфейсов
на первом этапе я провела детальный аудит всех цифровых продуктов, использующих элементы текущей дизайн-системы. внимание было уделено как веб-сайту сети, так и мобильной версии сайта, а также внутренним сервисами (CRM-интерфейс)
согласование визуального языка с командой маркетинга
на этом этапе важно было обеспечить согласованность обновленных элементов дизайн-системы с ценностями и визуальному стилю бренда кофемании. я изучила актуальных брендбук, в котором были зафиксированы основные характеристики бренда: уважение, доверие и достоинство, удовольствие и стабильность
мы провели несколько рабочих сессий с командой маркетинга, где обсудили:
как сохранить баланс между эстетикой и функциональностью в компонентах — чтобы визуальный язык был одновременно выразительным и удобным для пользователя
где нужно оставить больше «воздуха», какой визуальный ритм и структура типографики должны использоваться в заголовках и карточках
какие цвета, шрифты и формы можно увести на второстепенный план, а какие, наоборот, вывести на передний
в результаты были определены ключевые принципы визуального языка. на их основе я доработала ui-компоненты и создала гайд по визуальному стилю внутри дизайн-системы
процесс работы
повторяющиеся элементы
для устранения повторяющихся компонентов я провела анализ существующих дизайн-макетов и компонентов, используемых на сайте и во внутренних сервисах, выявила случаи, когда один и тот же компонент создавался заново вместо переиспользования из основной библиотеке. это мешало адаптивности и масштабируемости интерфейса — каждый компонент вел себя по-разному и имел разные состояния без привязки к материнскому
неиспользуемые элементы
неиспользуемые элементы были выявлены в процессе аудита — это устаревшие компоненты от предыдущих итераций. они загромождали дизайн-систему, мешали навигации и вводили разработку в заблуждение. мы провели звонок с разработкой и дизайн-руководителем для определение совсем неактуальных элементов и элементов, которые пока стоит перенести в архив. также я удалила дубли, актуализировала некоторые версии компонентов и зафиксировала правила архивирования неиспользуемых компонентов
отсутствие состояний
отсутствие состояний у части элементов (таких как кнопки, поля ввода и карточки) вызывало сложности при разработке и тестировании интерфейсов. без четко заданных состояний — hover, pressed, disabled и focus — пользователи не получали необходимой визуальной обратной связи, а разработчикам приходилось импровизировать. я разработала и внедрила стандартные состояния для всех ключевых элементов, чтобы повысить интерактивность интерфейса и упростить реализацию
отсутствие адаптивности
неподдерживаемость адаптивности стала одной из критических проблем: часть компонентов не имела корректных мобильных версий или была недоступна в иных видах это снижало удобство использования сайта с телефонов из-за импровизации разработки. я переработала структуру компонентов, внедрив адаптивные правила и проверив их поведение в целевых разрешениях
результат
развитие и поддержка дизайн-системы — это про заботу о команде, скорости, бренде и пользователе. в кофемании это особенно важно — ведь интерфейсы должны соответствовать продукту
основные метрики успеха
производительность разработки
консистентность ux/ui
скорость адаптации дизайна под мобильные устройства
удобство поддержки и масштабирования