Дизайн-система для e-com платформы
Сross-platform
SDUI
Management
Компания:
BSTD
Роль:
Дизайнер продукта, UX/UI
Sorry, this page is currently available in Russian only. I'll translate it soon. 🙏
Ikon Tyres — крупный производитель шин, которому нужно было выйти за пределы российского рынка и запустить международный сайт для европейского и ближневосточного направлений. Новый продукт должен был одновременно работать как витрина бренда, каталог и точка входа для B2B-сценария.
Задача
На старте у бренда был российский сайт, но не было единого международного цифрового опыта. Нужно было спроектировать новый продукт для зарубежных рынков так, чтобы он решал сразу несколько задач:
- Презентовал бренд как современного производителя
- Помогал пользователям ориентироваться в сложном ассортименте
- Учитывал особенности B2B арабского рынка
- Корректно работал на LTR — и RTL-языках
- Выглядел целостно на пяти брейкпоинтах
Отдельным вызовом было то, что это не классический e-commerce. В сегменте шин пользовательский путь строится не только вокруг каталога, но и вокруг подбора по параметрам, технических характеристик, доверия к бренду и сценариев обращения через дилеров, точки продаж и форму запроса.
Зоны ответственности
- На моей стороне были UX — и UI-решения для части интерфейса, мультиязычность, RTL-адаптация арабской версии, а также часть дизайн-системы и документации. Участки пользовательского пути, над которыми я работала:
- Навигация
- Форма запроса
- Страница контактов
- Политика конфиденциальности
- Конструктор текстовых страниц
- Часть каталога: фильтры и сортировка
- RTL-версии интерфейсов и компонентов
Задачи и функции
UX/UI
Конкурентный анализ
Юзабилити-тестирование
Дизайн QA
Дизайн-система
RTL
Документация
Hi-fi прототипирование
Hand-off
В чём была сложность
У проекта было сразу несколько слоёв сложности.
1. Неоднозначная модель продукта
Нужно было собрать в одном интерфейсе и витрину бренда, и продуктовый каталог, и сценарии обращения для разных типов клиентов. Для пользователя это должно было выглядеть как единый понятный опыт, а не как набор несвязанных разделов.
2. Консервативный рынок
Конкурентный анализ показал, что в сегменте шин многие цифровые продукты визуально и структурно устарели: перегруженные страницы, слабая иерархия, тяжёлое восприятие технической информации. Для нового сайта было важно не просто «выглядеть современно», а через визуальный язык и ясную структуру повысить доверие к бренду.
3. RTL и постоянные изменения в переводах
Арабская версия не была отдельным сайтом — это был перевод поверх тех же сценариев и экранов. При этом переводы приходили частями, правки от заказчика появлялись регулярно, а ошибка в текстах была недопустима. Задачу усложняли уникальные страницы с графическим контентом, которые при переводе могли сильно измениться.
4. Большой объём в сжатые сроки
Весь сайт проектировался сразу на пяти брейкпоинтах. Это сильно увеличивало объём работы: каждый сценарий, блок и состояние нужно было не просто нарисовать, а довести до устойчивого поведения на разных ширинах экрана.
Исследование и выводы
Я работала с данными внутреннего исследования заказчика и проводила свои исследования, которые были достаточно компактными из-за формата проекта. Этих данных в совокупности хватило, чтобы принять ключевые решения.
Конкурентный анализ
Я участвовала в анализе рынка и референсов. Мы смотрели, как устроены сайты производителей шин, как подаются технические параметры, как организованы каталог, подбор, контакты и продуктовые страницы. Для анализа были выбраны наиболее узнаваемые бренды шин на 2024 год.
Главный вывод был таким: рынок говорит с пользователем тяжёлым, консервативным языком. Интерфейсы часто перегружены и плохо помогают пройти путь от интереса к конкретному действию. На этом фоне более современный и структурный интерфейс мог стать не только эстетическим, но и вполне прикладным преимуществом — быстрее объяснять продукт, снижать когнитивную нагрузку и усиливать доверие.
Тестирование подборщика шин
Подборщик был одним из ключевых сценариев: пользователи выбирают шины либо по параметрам, либо по автомобилю, а это два разных механизма с пошаговым заполнением и большим количеством сущностей внутри одного блока.
Я участвовала в проектировании этого блока, конкурентном анализе и тестировании. По итогам тестирования сценарий проходили 100% респондентов (10 человек). Это подтвердило, что при высокой насыщенности данных интерфейс можно сделать понятным, если правильно выстроить последовательность действий и визуальную иерархию.
Подход
В этом проекте для меня было важно не просто отрисовать набор страниц, а сделать систему, которая выдержит масштабирование по языкам, контенту и разработке. Я опиралась на три принципа:
1. Снижать сложность там, где она неизбежна
В этом сегменте нельзя убрать технические характеристики или уменьшить количество параметров до минимума. Поэтому задача была другой: не прятать сложность, а делать её воспринимаемой — через структуру, шаги, группировку и состояние интерфейса.
2. Закладывать мультиязычность как систему, а не как прямой перевод
RTL нельзя качественно обеспечить вставкой текста и изменением выключки. Поэтому я строила свои компоненты и макеты так, чтобы разворот интерфейса, замена шрифта и корректировка направлений были встроены в сами копоненты.
3. Делать макет максимально близким к будущей реализации
Поскольку разработка была на аутсорсе, я целенаправленно снижала риск неверной интерпретации: подробно готовила спецификации, комментарии и прототипы переходов. Это было важно не только для качества, но и для скорости коммуникации.
Что я сделала
1. Проработала RTL версию интерфейса
На мне была арабская часть интерфейса в рамках проекта. Это включало не просто зеркальный разворот блоков, а полноценную адаптацию под стандарты RTL: направление компонентов, поведение навигации и слайдеров, перестройку композиции, корректную типографику, направление иконок и читаемость.
Отдельной задачей был шрифт. Брендовый шрифт не соответствовал требованиям accessibility для RTL-сегмента, поэтому для арабской версии мы использовали другой шрифт. Чтобы это решение не ломало систему, я настраивала компоненты, токены и переменные так, чтобы язык переключался быстро и предсказуемо.
Я собрала интерфейс, в котором RTL-версия не ощущалась «переводом поверх оригинала», а выглядела как полноценная нативная версия интерфейса.
2. Собрала фильтры и сортировку в каталоге
В каталоге я отвечала за блок фильтров и сортировки: механику действий и состояния. Это был участок средней сложности, но с высокой чувствительностью к ошибкам, потому что пользователи выбирают продукт по техническим параметрам, а значит интерфейс должен помогать принимать решение, а не усиливать путаницу.
Чтобы корректно спроектировать блок, мне пришлось погрузиться в технические характеристики шин и понять, какие параметры действительно важны для выбора, а какие нужно увести на второй план. В результате я собрала решение, в котором фильтрация не перегружала экран и оставалась управляемой на разных брейкпоинтах.
3. Подготовила конструктор текстовых страниц
Одна из моих задач — спроектировать страницу, которая должна была покрывать все нужные контентные блоки для текстовых материалов: статей, информационных страниц и других редакторских материалов. Эти страницы собирались администратором или контент-менеджером через готовые блоки в админке.
Моя задача была не просто показать набор секций, а предусмотреть, как они будут вести себя с очень разным контентом: с длинными заголовками, разным объёмом текста, изображениями, списками, врезками и прочими форматами. Я приводила такие блоки во всех необходимых вариациях, описывала ограничения и фиксировала правила использования, чтобы на этапе наполнения продукт не терял качество.
Это был важный кусок системы: он снижал зависимость от ручного дизайна в будущем и позволял команде публиковать контент без постоянного участия дизайнеров.
4. Упростила процесс работы с переводами
Одним из самых нестандартных вызовов была не только сама RTL-адаптация, но и организация работы с переводом. Тексты не приходили единым пакетом: переводчики работали на аутсорсе, материалы поступали частями, а изменения в английской версии продолжались параллельно проектированию.
Я договорилась с менеджером о способе взаимодействия: вместо постоянных разрозненных запросов на маленькие правки мы собирали изменения пакетно и передавали их переводчикам большими блоками. Для этого я доработала Excel-таблицу с переводами, чтобы в ней было удобно отслеживать изменения, новые тексты и повторные запросы на перевод.
Это решение сократило количество итераций, снизило риск ошибок и позволило держать под контролем большой объём арабских текстов, хотя я сама не владею языком.
5. Собрала и задокументировала часть дизайн-системы
В рамках своей зоны ответственности я собирала компоненты, переменные и документацию. Если по моим страницам требовались новые компоненты, я проектировала их с нуля; если нужно было доработать уже существующие решения, вносила изменения в общую систему.
Отдельно я создавала RTL-версии компонентов и фиксировала правила их использования. Для меня было важно, чтобы дизайн-система помогала не только внутри Figma, но и на этапе передачи в разработку — была понятна, воспроизводима и не требовала лишних расшифровок.
6. Подготовила макеты к передаче в разработку
Поскольку разработка была на внешней команде, я делала большой акцент на качестве упаковки макетов. Для каждой страницы и компонента готовила комментарии, ограничения, состояния и прототипы с наглядной демонстрацией переходов и анимации.
Это снижало вероятность неверной трактовки решений и помогло добиться очень точного соответствия продакшена макетам.
Результат
Проект был передан заказчику и ушёл в разработку.
Так как количественные продуктовые метрики находились на стороне клиента и были недоступны, я оцениваю результат по трём направлениям:
100%
респондентов справились со сценарием подборщика шин
Качество реализации
Благодаря подробной подготовке макетов, спецификаций и прототипов удалось добиться почти полного соответствия продакшена дизайну без большого числа уточняющих циклов.
Операционная устойчивость
Удалось выстроить рабочий процесс по переводам и RTL-адаптации так, чтобы проект двигался быстро даже при постоянных правках, частичной поставке текстов и большом объёме экранов.
Дополнительно я получила положительную обратную связь от менеджера со стороны заказчика за педантичный подход к деталям и высокую скорость реакции на изменения.
Смотреть далее
Скоро будет
Bars. Сайт и дизайн-система производителя шин
B2B
D2C
Multilanguage
Ikon Tyres. Международный портал производителя шин
Компания:
BSTD
Роль:
Дизайнер продукта, UX/UI
Sorry, this page is currently available in Russian only. I'll translate it soon. 🙏
Ikon Tyres — крупный производитель шин, которому нужно было выйти за пределы российского рынка и запустить международный сайт для европейского и ближневосточного направлений. Новый продукт должен был одновременно работать как витрина бренда, каталог и точка входа для B2B-сценария.
Задача
На старте у бренда был российский сайт, но не было единого международного цифрового опыта. Нужно было спроектировать новый продукт для зарубежных рынков так, чтобы он решал сразу несколько задач:
- Презентовал бренд как современного производителя
- Помогал пользователям ориентироваться в сложном ассортименте
- Учитывал особенности B2B арабского рынка
- Корректно работал на LTR — и RTL-языках
- Выглядел целостно на пяти брейкпоинтах
Отдельным вызовом было то, что это не классический e-commerce. В сегменте шин пользовательский путь строится не только вокруг каталога, но и вокруг подбора по параметрам, технических характеристик, доверия к бренду и сценариев обращения через дилеров, точки продаж и форму запроса.
Зоны ответственности
- На моей стороне были UX — и UI-решения для части интерфейса, мультиязычность, RTL-адаптация арабской версии, а также часть дизайн-системы и документации. Участки пользовательского пути, над которыми я работала:
- Навигация
- Форма запроса
- Страница контактов
- Политика конфиденциальности
- Конструктор текстовых страниц
- Часть каталога: фильтры и сортировка
- RTL-версии интерфейсов и компонентов
Задачи и функции
UX/UI
Конкурентный анализ
Юзабилити-тестирование
Дизайн QA
Дизайн-система
RTL
Документация
Hi-fi прототипирование
Hand-off
В чём была сложность
У проекта было сразу несколько слоёв сложности.
1. Неоднозначная модель продукта
Нужно было собрать в одном интерфейсе и витрину бренда, и продуктовый каталог, и сценарии обращения для разных типов клиентов. Для пользователя это должно было выглядеть как единый понятный опыт, а не как набор несвязанных разделов.
2. Консервативный рынок
Конкурентный анализ показал, что в сегменте шин многие цифровые продукты визуально и структурно устарели: перегруженные страницы, слабая иерархия, тяжёлое восприятие технической информации. Для нового сайта было важно не просто «выглядеть современно», а через визуальный язык и ясную структуру повысить доверие к бренду.
3. RTL и постоянные изменения в переводах
Арабская версия не была отдельным сайтом — это был перевод поверх тех же сценариев и экранов. При этом переводы приходили частями, правки от заказчика появлялись регулярно, а ошибка в текстах была недопустима. Задачу усложняли уникальные страницы с графическим контентом, которые при переводе могли сильно измениться.
4. Большой объём в сжатые сроки
Весь сайт проектировался сразу на пяти брейкпоинтах. Это сильно увеличивало объём работы: каждый сценарий, блок и состояние нужно было не просто нарисовать, а довести до устойчивого поведения на разных ширинах экрана.
Исследование и выводы
Я работала с данными внутреннего исследования заказчика и проводила свои исследования, которые были достаточно компактными из-за формата проекта. Этих данных в совокупности хватило, чтобы принять ключевые решения.
Конкурентный анализ
Я участвовала в анализе рынка и референсов. Мы смотрели, как устроены сайты производителей шин, как подаются технические параметры, как организованы каталог, подбор, контакты и продуктовые страницы. Для анализа были выбраны наиболее узнаваемые бренды шин на 2024 год.
Главный вывод был таким: рынок говорит с пользователем тяжёлым, консервативным языком. Интерфейсы часто перегружены и плохо помогают пройти путь от интереса к конкретному действию. На этом фоне более современный и структурный интерфейс мог стать не только эстетическим, но и вполне прикладным преимуществом — быстрее объяснять продукт, снижать когнитивную нагрузку и усиливать доверие.
Тестирование подборщика шин
Подборщик был одним из ключевых сценариев: пользователи выбирают шины либо по параметрам, либо по автомобилю, а это два разных механизма с пошаговым заполнением и большим количеством сущностей внутри одного блока.
Я участвовала в проектировании этого блока, конкурентном анализе и тестировании. По итогам тестирования сценарий проходили 100% респондентов (10 человек). Это подтвердило, что при высокой насыщенности данных интерфейс можно сделать понятным, если правильно выстроить последовательность действий и визуальную иерархию.
Подход
В этом проекте для меня было важно не просто отрисовать набор страниц, а сделать систему, которая выдержит масштабирование по языкам, контенту и разработке. Я опиралась на три принципа:
1. Снижать сложность там, где она неизбежна
В этом сегменте нельзя убрать технические характеристики или уменьшить количество параметров до минимума. Поэтому задача была другой: не прятать сложность, а делать её воспринимаемой — через структуру, шаги, группировку и состояние интерфейса.
2. Закладывать мультиязычность как систему, а не как прямой перевод
RTL нельзя качественно обеспечить вставкой текста и изменением выключки. Поэтому я строила свои компоненты и макеты так, чтобы разворот интерфейса, замена шрифта и корректировка направлений были встроены в сами копоненты.
3. Делать макет максимально близким к будущей реализации
Поскольку разработка была на аутсорсе, я целенаправленно снижала риск неверной интерпретации: подробно готовила спецификации, комментарии и прототипы переходов. Это было важно не только для качества, но и для скорости коммуникации.
Что я сделала
1. Проработала RTL версию интерфейса
На мне была арабская часть интерфейса в рамках проекта. Это включало не просто зеркальный разворот блоков, а полноценную адаптацию под стандарты RTL: направление компонентов, поведение навигации и слайдеров, перестройку композиции, корректную типографику, направление иконок и читаемость.
Отдельной задачей был шрифт. Брендовый шрифт не соответствовал требованиям accessibility для RTL-сегмента, поэтому для арабской версии мы использовали другой шрифт. Чтобы это решение не ломало систему, я настраивала компоненты, токены и переменные так, чтобы язык переключался быстро и предсказуемо.
Я собрала интерфейс, в котором RTL-версия не ощущалась «переводом поверх оригинала», а выглядела как полноценная нативная версия интерфейса.
2. Собрала фильтры и сортировку в каталоге
В каталоге я отвечала за блок фильтров и сортировки: механику действий и состояния. Это был участок средней сложности, но с высокой чувствительностью к ошибкам, потому что пользователи выбирают продукт по техническим параметрам, а значит интерфейс должен помогать принимать решение, а не усиливать путаницу.
Чтобы корректно спроектировать блок, мне пришлось погрузиться в технические характеристики шин и понять, какие параметры действительно важны для выбора, а какие нужно увести на второй план. В результате я собрала решение, в котором фильтрация не перегружала экран и оставалась управляемой на разных брейкпоинтах.
3. Подготовила конструктор текстовых страниц
Одна из моих задач — спроектировать страницу, которая должна была покрывать все нужные контентные блоки для текстовых материалов: статей, информационных страниц и других редакторских материалов. Эти страницы собирались администратором или контент-менеджером через готовые блоки в админке.
Моя задача была не просто показать набор секций, а предусмотреть, как они будут вести себя с очень разным контентом: с длинными заголовками, разным объёмом текста, изображениями, списками, врезками и прочими форматами. Я приводила такие блоки во всех необходимых вариациях, описывала ограничения и фиксировала правила использования, чтобы на этапе наполнения продукт не терял качество.
Это был важный кусок системы: он снижал зависимость от ручного дизайна в будущем и позволял команде публиковать контент без постоянного участия дизайнеров.
4. Упростила процесс работы с переводами
Одним из самых нестандартных вызовов была не только сама RTL-адаптация, но и организация работы с переводом. Тексты не приходили единым пакетом: переводчики работали на аутсорсе, материалы поступали частями, а изменения в английской версии продолжались параллельно проектированию.
Я договорилась с менеджером о способе взаимодействия: вместо постоянных разрозненных запросов на маленькие правки мы собирали изменения пакетно и передавали их переводчикам большими блоками. Для этого я доработала Excel-таблицу с переводами, чтобы в ней было удобно отслеживать изменения, новые тексты и повторные запросы на перевод.
Это решение сократило количество итераций, снизило риск ошибок и позволило держать под контролем большой объём арабских текстов, хотя я сама не владею языком.
5. Собрала и задокументировала часть дизайн-системы
В рамках своей зоны ответственности я собирала компоненты, переменные и документацию. Если по моим страницам требовались новые компоненты, я проектировала их с нуля; если нужно было доработать уже существующие решения, вносила изменения в общую систему.
Отдельно я создавала RTL-версии компонентов и фиксировала правила их использования. Для меня было важно, чтобы дизайн-система помогала не только внутри Figma, но и на этапе передачи в разработку — была понятна, воспроизводима и не требовала лишних расшифровок.
6. Подготовила макеты к передаче в разработку
Поскольку разработка была на внешней команде, я делала большой акцент на качестве упаковки макетов. Для каждой страницы и компонента готовила комментарии, ограничения, состояния и прототипы с наглядной демонстрацией переходов и анимации.
Это снижало вероятность неверной трактовки решений и помогло добиться очень точного соответствия продакшена макетам.
Результат
Проект был передан заказчику и ушёл в разработку.
Так как количественные продуктовые метрики находились на стороне клиента и были недоступны, я оцениваю результат по трём направлениям:
100%
респондентов справились со сценарием подборщика шин
Качество реализации
Благодаря подробной подготовке макетов, спецификаций и прототипов удалось добиться почти полного соответствия продакшена дизайну без большого числа уточняющих циклов.
Операционная устойчивость
Удалось выстроить рабочий процесс по переводам и RTL-адаптации так, чтобы проект двигался быстро даже при постоянных правках, частичной поставке текстов и большом объёме экранов.
Дополнительно я получила положительную обратную связь от менеджера со стороны заказчика за педантичный подход к деталям и высокую скорость реакции на изменения.
Смотреть далее
Дизайн-система для e-com платформы
Сross-platform
SDUI
Management
Скоро будет
Bars. Сайт и дизайн-система производителя шин
B2B
D2C
Multilanguage
Компания:
BSTD
Роль:
Дизайнер продукта, UX/UI
Ikon Tyres. Международный портал производителя шин
Sorry, this page is currently available in Russian only. I'll translate it soon. 🙏
Ikon Tyres — крупный производитель шин, которому нужно было выйти за пределы российского рынка и запустить международный сайт для европейского и ближневосточного направлений. Новый продукт должен был одновременно работать как витрина бренда, каталог и точка входа для B2B-сценария.
Задача
На старте у бренда был российский сайт, но не было единого международного цифрового опыта. Нужно было спроектировать новый продукт для зарубежных рынков так, чтобы он решал сразу несколько задач:
- Презентовал бренд как современного производителя
- Помогал пользователям ориентироваться в сложном ассортименте
- Учитывал особенности B2B арабского рынка
- Корректно работал на LTR — и RTL-языках
- Выглядел целостно на пяти брейкпоинтах
Отдельным вызовом было то, что это не классический e-commerce. В сегменте шин пользовательский путь строится не только вокруг каталога, но и вокруг подбора по параметрам, технических характеристик, доверия к бренду и сценариев обращения через дилеров, точки продаж и форму запроса.
Зоны ответственности
- На моей стороне были UX — и UI-решения для части интерфейса, мультиязычность, RTL-адаптация арабской версии, а также часть дизайн-системы и документации. Участки пользовательского пути, над которыми я работала:
- Навигация
- Форма запроса
- Страница контактов
- Политика конфиденциальности
- Конструктор текстовых страниц
- Часть каталога: фильтры и сортировка
- RTL-версии интерфейсов и компонентов
Задачи и функции
UX/UI
Конкурентный анализ
Юзабилити-тестирование
Дизайн QA
Дизайн-система
RTL
Документация
Hi-fi прототипирование
Hand-off
В чём была сложность
У проекта было сразу несколько слоёв сложности.
1. Неоднозначная модель продукта
Нужно было собрать в одном интерфейсе и витрину бренда, и продуктовый каталог, и сценарии обращения для разных типов клиентов. Для пользователя это должно было выглядеть как единый понятный опыт, а не как набор несвязанных разделов.
2. Консервативный рынок
Конкурентный анализ показал, что в сегменте шин многие цифровые продукты визуально и структурно устарели: перегруженные страницы, слабая иерархия, тяжёлое восприятие технической информации. Для нового сайта было важно не просто «выглядеть современно», а через визуальный язык и ясную структуру повысить доверие к бренду.
3. RTL и постоянные изменения в переводах
Арабская версия не была отдельным сайтом — это был перевод поверх тех же сценариев и экранов. При этом переводы приходили частями, правки от заказчика появлялись регулярно, а ошибка в текстах была недопустима. Задачу усложняли уникальные страницы с графическим контентом, которые при переводе могли сильно измениться.
4. Большой объём в сжатые сроки
Весь сайт проектировался сразу на пяти брейкпоинтах. Это сильно увеличивало объём работы: каждый сценарий, блок и состояние нужно было не просто нарисовать, а довести до устойчивого поведения на разных ширинах экрана.
Исследование и выводы
Я работала с данными внутреннего исследования заказчика и проводила свои исследования, которые были достаточно компактными из-за формата проекта. Этих данных в совокупности хватило, чтобы принять ключевые решения.
Конкурентный анализ
Я участвовала в анализе рынка и референсов. Мы смотрели, как устроены сайты производителей шин, как подаются технические параметры, как организованы каталог, подбор, контакты и продуктовые страницы. Для анализа были выбраны наиболее узнаваемые бренды шин на 2024 год.
Главный вывод был таким: рынок говорит с пользователем тяжёлым, консервативным языком. Интерфейсы часто перегружены и плохо помогают пройти путь от интереса к конкретному действию. На этом фоне более современный и структурный интерфейс мог стать не только эстетическим, но и вполне прикладным преимуществом — быстрее объяснять продукт, снижать когнитивную нагрузку и усиливать доверие.
Тестирование подборщика шин
Подборщик был одним из ключевых сценариев: пользователи выбирают шины либо по параметрам, либо по автомобилю, а это два разных механизма с пошаговым заполнением и большим количеством сущностей внутри одного блока.
Я участвовала в проектировании этого блока, конкурентном анализе и тестировании. По итогам тестирования сценарий проходили 100% респондентов (10 человек). Это подтвердило, что при высокой насыщенности данных интерфейс можно сделать понятным, если правильно выстроить последовательность действий и визуальную иерархию.
Подход
В этом проекте для меня было важно не просто отрисовать набор страниц, а сделать систему, которая выдержит масштабирование по языкам, контенту и разработке. Я опиралась на три принципа:
1. Снижать сложность там, где она неизбежна
В этом сегменте нельзя убрать технические характеристики или уменьшить количество параметров до минимума. Поэтому задача была другой: не прятать сложность, а делать её воспринимаемой — через структуру, шаги, группировку и состояние интерфейса.
2. Закладывать мультиязычность как систему, а не как прямой перевод
RTL нельзя качественно обеспечить вставкой текста и изменением выключки. Поэтому я строила свои компоненты и макеты так, чтобы разворот интерфейса, замена шрифта и корректировка направлений были встроены в сами копоненты.
3. Делать макет максимально близким к будущей реализации
Поскольку разработка была на аутсорсе, я целенаправленно снижала риск неверной интерпретации: подробно готовила спецификации, комментарии и прототипы переходов. Это было важно не только для качества, но и для скорости коммуникации.
Что я сделала
1. Проработала RTL версию интерфейса
На мне была арабская часть интерфейса в рамках проекта. Это включало не просто зеркальный разворот блоков, а полноценную адаптацию под стандарты RTL: направление компонентов, поведение навигации и слайдеров, перестройку композиции, корректную типографику, направление иконок и читаемость.
Отдельной задачей был шрифт. Брендовый шрифт не соответствовал требованиям accessibility для RTL-сегмента, поэтому для арабской версии мы использовали другой шрифт. Чтобы это решение не ломало систему, я настраивала компоненты, токены и переменные так, чтобы язык переключался быстро и предсказуемо.
Я собрала интерфейс, в котором RTL-версия не ощущалась «переводом поверх оригинала», а выглядела как полноценная нативная версия интерфейса.
2. Собрала фильтры и сортировку в каталоге
В каталоге я отвечала за блок фильтров и сортировки: механику действий и состояния. Это был участок средней сложности, но с высокой чувствительностью к ошибкам, потому что пользователи выбирают продукт по техническим параметрам, а значит интерфейс должен помогать принимать решение, а не усиливать путаницу.
Чтобы корректно спроектировать блок, мне пришлось погрузиться в технические характеристики шин и понять, какие параметры действительно важны для выбора, а какие нужно увести на второй план. В результате я собрала решение, в котором фильтрация не перегружала экран и оставалась управляемой на разных брейкпоинтах.
3. Подготовила конструктор текстовых страниц
Одна из моих задач — спроектировать страницу, которая должна была покрывать все нужные контентные блоки для текстовых материалов: статей, информационных страниц и других редакторских материалов. Эти страницы собирались администратором или контент-менеджером через готовые блоки в админке.
Моя задача была не просто показать набор секций, а предусмотреть, как они будут вести себя с очень разным контентом: с длинными заголовками, разным объёмом текста, изображениями, списками, врезками и прочими форматами. Я приводила такие блоки во всех необходимых вариациях, описывала ограничения и фиксировала правила использования, чтобы на этапе наполнения продукт не терял качество.
Это был важный кусок системы: он снижал зависимость от ручного дизайна в будущем и позволял команде публиковать контент без постоянного участия дизайнеров.
4. Упростила процесс работы с переводами
Одним из самых нестандартных вызовов была не только сама RTL-адаптация, но и организация работы с переводом. Тексты не приходили единым пакетом: переводчики работали на аутсорсе, материалы поступали частями, а изменения в английской версии продолжались параллельно проектированию.
Я договорилась с менеджером о способе взаимодействия: вместо постоянных разрозненных запросов на маленькие правки мы собирали изменения пакетно и передавали их переводчикам большими блоками. Для этого я доработала Excel-таблицу с переводами, чтобы в ней было удобно отслеживать изменения, новые тексты и повторные запросы на перевод.
Это решение сократило количество итераций, снизило риск ошибок и позволило держать под контролем большой объём арабских текстов, хотя я сама не владею языком.
5. Собрала и задокументировала часть дизайн-системы
В рамках своей зоны ответственности я собирала компоненты, переменные и документацию. Если по моим страницам требовались новые компоненты, я проектировала их с нуля; если нужно было доработать уже существующие решения, вносила изменения в общую систему.
Отдельно я создавала RTL-версии компонентов и фиксировала правила их использования. Для меня было важно, чтобы дизайн-система помогала не только внутри Figma, но и на этапе передачи в разработку — была понятна, воспроизводима и не требовала лишних расшифровок.
6. Подготовила макеты к передаче в разработку
Поскольку разработка была на внешней команде, я делала большой акцент на качестве упаковки макетов. Для каждой страницы и компонента готовила комментарии, ограничения, состояния и прототипы с наглядной демонстрацией переходов и анимации.
Это снижало вероятность неверной трактовки решений и помогло добиться очень точного соответствия продакшена макетам.
Результат
Проект был передан заказчику и ушёл в разработку.
Так как количественные продуктовые метрики находились на стороне клиента и были недоступны, я оцениваю результат по трём направлениям:
100%
респондентов справились со сценарием подборщика шин
Качество реализации
Благодаря подробной подготовке макетов, спецификаций и прототипов удалось добиться почти полного соответствия продакшена дизайну без большого числа уточняющих циклов.
Операционная устойчивость
Удалось выстроить рабочий процесс по переводам и RTL-адаптации так, чтобы проект двигался быстро даже при постоянных правках, частичной поставке текстов и большом объёме экранов.
Дополнительно я получила положительную обратную связь от менеджера со стороны заказчика за педантичный подход к деталям и высокую скорость реакции на изменения.
Смотреть далее
Дизайн-система для e-com платформы
Сross-platform
SDUI
Management
Скоро будет
Bars. Сайт и дизайн-система производителя шин
B2B
D2C
Multilanguage
Компания:
BSTD
Роль:
Дизайнер продукта, UX/UI
Ikon Tyres. Международный портал производителя шин
Sorry, this page is currently available in Russian only. I'll translate it soon. 🙏
Ikon Tyres — крупный производитель шин, которому нужно было выйти за пределы российского рынка и запустить международный сайт для европейского и ближневосточного направлений. Новый продукт должен был одновременно работать как витрина бренда, каталог и точка входа для B2B-сценария.
Задача
На старте у бренда был российский сайт, но не было единого международного цифрового опыта. Нужно было спроектировать новый продукт для зарубежных рынков так, чтобы он решал сразу несколько задач:
- Презентовал бренд как современного производителя
- Помогал пользователям ориентироваться в сложном ассортименте
- Учитывал особенности B2B арабского рынка
- Корректно работал на LTR — и RTL-языках
- Выглядел целостно на пяти брейкпоинтах
Отдельным вызовом было то, что это не классический e-commerce. В сегменте шин пользовательский путь строится не только вокруг каталога, но и вокруг подбора по параметрам, технических характеристик, доверия к бренду и сценариев обращения через дилеров, точки продаж и форму запроса.
Зоны ответственности
На моей стороне были UX — и UI-решения для части интерфейса, мультиязычность, RTL-адаптация арабской версии, а также часть дизайн-системы и документации. Участки пользовательского пути, над которыми я работала:
- Навигация
- Форма запроса
- Страница контактов
- Политика конфиденциальности
- Конструктор текстовых страниц
- Часть каталога: фильтры и сортировка
- RTL-версии интерфейсов и компонентов
Задачи и функции
UX/UI
Конкурентный анализ
Юзабилити-тестирование
Дизайн QA
Дизайн-система
RTL
Документация
Hi-fi прототипирование
Hand-off
В чём была сложность
У проекта было сразу несколько слоёв сложности.
1. Неоднозначная модель продукта
Нужно было собрать в одном интерфейсе и витрину бренда, и продуктовый каталог, и сценарии обращения для разных типов клиентов. Для пользователя это должно было выглядеть как единый понятный опыт, а не как набор несвязанных разделов.
2. Консервативный рынок
Конкурентный анализ показал, что в сегменте шин многие цифровые продукты визуально и структурно устарели: перегруженные страницы, слабая иерархия, тяжёлое восприятие технической информации. Для нового сайта было важно не просто «выглядеть современно», а через визуальный язык и ясную структуру повысить доверие к бренду.
3. RTL и постоянные изменения в переводах
Арабская версия не была отдельным сайтом — это был перевод поверх тех же сценариев и экранов. При этом переводы приходили частями, правки от заказчика появлялись регулярно, а ошибка в текстах была недопустима. Задачу усложняли уникальные страницы с графическим контентом, которые при переводе могли сильно измениться.
4. Большой объём в сжатые сроки
Весь сайт проектировался сразу на пяти брейкпоинтах. Это сильно увеличивало объём работы: каждый сценарий, блок и состояние нужно было не просто нарисовать, а довести до устойчивого поведения на разных ширинах экрана.
Исследование и выводы
Я работала с данными внутреннего исследования заказчика и проводила свои исследования, которые были достаточно компактными из-за формата проекта. Этих данных в совокупности хватило, чтобы принять ключевые решения.
Конкурентный анализ
Я участвовала в анализе рынка и референсов. Мы смотрели, как устроены сайты производителей шин, как подаются технические параметры, как организованы каталог, подбор, контакты и продуктовые страницы. Для анализа были выбраны наиболее узнаваемые бренды шин на 2024 год.
Главный вывод был таким: рынок говорит с пользователем тяжёлым, консервативным языком. Интерфейсы часто перегружены и плохо помогают пройти путь от интереса к конкретному действию. На этом фоне более современный и структурный интерфейс мог стать не только эстетическим, но и вполне прикладным преимуществом — быстрее объяснять продукт, снижать когнитивную нагрузку и усиливать доверие.
Тестирование подборщика шин
Подборщик был одним из ключевых сценариев: пользователи выбирают шины либо по параметрам, либо по автомобилю, а это два разных механизма с пошаговым заполнением и большим количеством сущностей внутри одного блока.
Я участвовала в проектировании этого блока, конкурентном анализе и тестировании. По итогам тестирования сценарий проходили 100% респондентов (10 человек). Это подтвердило, что при высокой насыщенности данных интерфейс можно сделать понятным, если правильно выстроить последовательность действий и визуальную иерархию.
Подход
В этом проекте для меня было важно не просто отрисовать набор страниц, а сделать систему, которая выдержит масштабирование по языкам, контенту и разработке. Я опиралась на три принципа:
1. Снижать сложность там, где она неизбежна
В этом сегменте нельзя убрать технические характеристики или уменьшить количество параметров до минимума. Поэтому задача была другой: не прятать сложность, а делать её воспринимаемой — через структуру, шаги, группировку и состояние интерфейса.
2. Закладывать мультиязычность как систему, а не как прямой перевод
RTL нельзя качественно обеспечить вставкой текста и изменением выключки. Поэтому я строила свои компоненты и макеты так, чтобы разворот интерфейса, замена шрифта и корректировка направлений были встроены в сами копоненты.
3. Делать макет максимально близким к будущей реализации
Поскольку разработка была на аутсорсе, я целенаправленно снижала риск неверной интерпретации: подробно готовила спецификации, комментарии и прототипы переходов. Это было важно не только для качества, но и для скорости коммуникации.
Что я сделала
1. Проработала RTL версию интерфейса
На мне была арабская часть интерфейса в рамках проекта. Это включало не просто зеркальный разворот блоков, а полноценную адаптацию под стандарты RTL: направление компонентов, поведение навигации и слайдеров, перестройку композиции, корректную типографику, направление иконок и читаемость.
Отдельной задачей был шрифт. Брендовый шрифт не соответствовал требованиям accessibility для RTL-сегмента, поэтому для арабской версии мы использовали другой шрифт. Чтобы это решение не ломало систему, я настраивала компоненты, токены и переменные так, чтобы язык переключался быстро и предсказуемо.
Я собрала интерфейс, в котором RTL-версия не ощущалась «переводом поверх оригинала», а выглядела как полноценная нативная версия интерфейса.
2. Собрала фильтры и сортировку в каталоге
В каталоге я отвечала за блок фильтров и сортировки: механику действий и состояния. Это был участок средней сложности, но с высокой чувствительностью к ошибкам, потому что пользователи выбирают продукт по техническим параметрам, а значит интерфейс должен помогать принимать решение, а не усиливать путаницу.
Чтобы корректно спроектировать блок, мне пришлось погрузиться в технические характеристики шин и понять, какие параметры действительно важны для выбора, а какие нужно увести на второй план. В результате я собрала решение, в котором фильтрация не перегружала экран и оставалась управляемой на разных брейкпоинтах.
3. Подготовила конструктор текстовых страниц
Одна из моих задач — спроектировать страницу, которая должна была покрывать все нужные контентные блоки для текстовых материалов: статей, информационных страниц и других редакторских материалов. Эти страницы собирались администратором или контент-менеджером через готовые блоки в админке.
Моя задача была не просто показать набор секций, а предусмотреть, как они будут вести себя с очень разным контентом: с длинными заголовками, разным объёмом текста, изображениями, списками, врезками и прочими форматами. Я приводила такие блоки во всех необходимых вариациях, описывала ограничения и фиксировала правила использования, чтобы на этапе наполнения продукт не терял качество.
Это был важный кусок системы: он снижал зависимость от ручного дизайна в будущем и позволял команде публиковать контент без постоянного участия дизайнеров.
4. Упростила процесс работы с переводами
Одним из самых нестандартных вызовов была не только сама RTL-адаптация, но и организация работы с переводом. Тексты не приходили единым пакетом: переводчики работали на аутсорсе, материалы поступали частями, а изменения в английской версии продолжались параллельно проектированию.
Я договорилась с менеджером о способе взаимодействия: вместо постоянных разрозненных запросов на маленькие правки мы собирали изменения пакетно и передавали их переводчикам большими блоками. Для этого я доработала Excel-таблицу с переводами, чтобы в ней было удобно отслеживать изменения, новые тексты и повторные запросы на перевод.
Это решение сократило количество итераций, снизило риск ошибок и позволило держать под контролем большой объём арабских текстов, хотя я сама не владею языком.
5. Собрала и задокументировала часть дизайн-системы
В рамках своей зоны ответственности я собирала компоненты, переменные и документацию. Если по моим страницам требовались новые компоненты, я проектировала их с нуля; если нужно было доработать уже существующие решения, вносила изменения в общую систему.
Отдельно я создавала RTL-версии компонентов и фиксировала правила их использования. Для меня было важно, чтобы дизайн-система помогала не только внутри Figma, но и на этапе передачи в разработку — была понятна, воспроизводима и не требовала лишних расшифровок.
6. Подготовила макеты к передаче в разработку
Поскольку разработка была на внешней команде, я делала большой акцент на качестве упаковки макетов. Для каждой страницы и компонента готовила комментарии, ограничения, состояния и прототипы с наглядной демонстрацией переходов и анимации.
Это снижало вероятность неверной трактовки решений и помогло добиться очень точного соответствия продакшена макетам.
Результат
Проект был передан заказчику и ушёл в разработку.
Так как количественные продуктовые метрики находились на стороне клиента и были недоступны, я оцениваю результат по трём направлениям:
100%
респондентов справились со сценарием подборщика шин
Качество реализации
Благодаря подробной подготовке макетов, спецификаций и прототипов удалось добиться почти полного соответствия продакшена дизайну без большого числа уточняющих циклов.
Операционная устойчивость
Удалось выстроить рабочий процесс по переводам и RTL-адаптации так, чтобы проект двигался быстро даже при постоянных правках, частичной поставке текстов и большом объёме экранов.
Дополнительно я получила положительную обратную связь от менеджера со стороны заказчика за педантичный подход к деталям и высокую скорость реакции на изменения.
Смотреть далее
Дизайн-система для e-com платформы
Сross-platform
SDUI
Management
Скоро будет
Bars. Сайт и дизайн-система производителя шин
B2B
D2C
Multilanguage