Feysal
Одна дизайн-система для B2B-магазина оборудования и людей, которые продают и доставляют его заказы.
Приложение переросло UI-кит, с которого начиналось
Feysal продаёт и доставляет оборудование компаниям со своего склада. Первое приложение было собрано на типовом UI-ките. Со временем шрифты перемешались, цвета вводились вручную, а один и тот же компонент выглядел по-разному в разных разделах.
Каждый новый экран занимал больше времени: ничего нельзя было уверенно переиспользовать.
Около 3 900 цветовых свойств были захардкожены вместо привязки к стилю.
Аудит перед редизайном
Я прошла каждую страницу файла и выписала, что реально использует каждый экран: цвета, размеры шрифтов, формы кнопок, иконки. Аудит превратил расплывчатое «всё как-то грязно» в конкретный список: что оставить, объединить и убрать.
Залатать, взять готовое или пересобрать
Для v2.0 я сравнила три пути. Решающим была скорость будущей работы, а не цена первой недели.
Пересобрать систему с нуля на базе Untitled UI Pro, с собственными цветами Feysal, шрифтом Onest и Hugeicons. Проверенные компоненты, но продукт по-прежнему узнаваем.
Решения, которые видно на экране
- 1
У «оплачено» свой зелёный
Отдельный цвет успеха для статуса «оплачено», чтобы он не читался как ещё один элемент бренда.
- 2
Один шрифт для UZ и RU
Onest поддерживает латиницу и кириллицу, поэтому оба языка выглядят одинаково аккуратно.
- 3
Та же система, второе приложение
Внутреннее приложение для агентов и курьеров использует те же токены и компоненты.
Система в цифрах
Первая версия навела порядок в старом приложении. Вторая пересобрала основу, чтобы оба приложения росли из одного источника.
#1D7C4D#E08A00#0E3B47Что изменилось
Единый источник правды для клиентского приложения и внутреннего приложения агентов и курьеров. Новые экраны собираются из готовых компонентов, а не рисуются с нуля.
Сначала фундамент, потом экраны
[Черновик] Пересборка заняла больше времени в начале, но каждый следующий экран делался быстрее. В следующий раз я бы согласовала названия токенов с разработчиками до первого компонента.