Birsan Mobile — Cart Redesign
Redesigning the sales cart for retail cashiers — replacing a flat text list with a visual, error-resistant interface that made high-volume checkout faster and more accurate.
↓22%
Reduction in cart correction errors
2×
Faster item editing flow
8
Critical UX problems found in discovery
3 mo
Design and development cycle
Context
Birsan is a retail B2B platform used by cashiers and inventory managers across multiple retail locations. The mobile app is the primary tool for cashiers processing sales on the floor — scanning items, building a cart, and completing payment transactions under constant time pressure.
Discovery
Through field observation sessions at 3 retail locations and interviews with 8 cashiers, I mapped the core frictions in the sales cart flow. The original interface was a numbered text list with no visual product identification — fast to build, but unreliable under pressure.
Pain point 1 — Visual ambiguity
Cashiers had to read item names carefully to distinguish similar products (e.g. "Ручка синяя" vs "Ручка чёрная"), increasing error rate during busy hours.
Pain point 2 — No inline quantity editing
Changing an item's quantity required going back to the catalog, finding the product, and re-adding it. There was no in-cart control.
Pain point 3 — Visual noise
Orange-highlighted rows for in-cart items created cognitive overload — cashiers struggled to quickly review the total and spot errors before checkout.
Pain point 4 — Edit flow confusion
Tapping a cart item to edit it opened the same "Add item" modal used for adding new products. Cashiers frequently hit "Add" instead of saving changes — creating duplicate entries and requiring manual correction.
Pain point 5 — Payment screen fragmentation
The cash payment screen was split across two separate screens — amount entry and confirmation — with no visual connection between them. Cashiers lost context mid-flow and had to mentally reconcile two different totals shown on separate screens.
User Flow — Sale Transaction
Mapping the end-to-end flow revealed that critical problems clustered across three steps: Cart Review, Edit Item, and Payment. All three were redesigned over a 3-month cycle alongside active development.
→
→
03
Cart Review
⚠ 3 issues
→
→
→
Cart Redesign — Before & After
Drag the handle to compare the original cart and the redesigned version side by side.
Before
After
Edit Item — Before & After
The old edit flow reused the "Add item" modal — same UI, different intent. The new design is a dedicated full-screen editor with clear sections, visible price breakdown, and a single save action.
Before
After
Payment — Before & After
The original payment flow split amount entry and confirmation across two screens, creating context switching under pressure. The redesign merges both into a single unified screen — payment method, amount, quick-entry banknote buttons, and the total are all visible at once.
Before
After
Key Design Decisions
01
Product thumbnails as primary identifier
Added product images to each cart row so cashiers can confirm items at a glance — reducing reliance on reading product names under time pressure. Images load from the existing product catalog API.
02
Inline quantity controls
Replaced the back-and-re-add flow with a −/+ stepper directly in the cart row. Editing quantity now takes one tap instead of 4+ steps, and the updated total is reflected immediately.
03
Stock badges for low inventory awareness
Each item now shows a stock badge (units available). When stock is negative, the badge turns red — giving cashiers immediate feedback before a sale is confirmed rather than discovering discrepancies after.
04
Dedicated Edit Item screen
Replaced the ambiguous "Add" modal with a purpose-built edit screen. Clear visual hierarchy separates product info, quantity, and discount into distinct cards. A single "Save" CTA eliminates the risk of accidentally adding a duplicate entry.
05
Unified single-screen payment
Merged the fragmented two-screen cash flow into one. Payment method, entered amount, quick-select banknote buttons, change calculation, and the confirm CTA are all visible without scrolling — eliminating the mental load of switching between screens mid-transaction.
The Outcome
The redesigned cart shipped after a 3-month design and development cycle. Usage data from retail locations showed a measurable drop in cart correction events and an overall improvement in cashier confidence during checkout.
↓22%
Cart correction events per shift
↑14%
Checkout speed — avg. items per minute
8/10
Cashier satisfaction score after rollout
3
Minor post-launch issues resolved in 30 days
Design System Foundations
Birsan runs across three platforms — Mobile, Web, and POS — each with its own dedicated Figma library. All three share a common token layer built as Figma Variables, ensuring visual consistency without coupling platform-specific components.
610
Colour variables
72
Spacing tokens
10
Corner radii
200
Global tokens
Token architecture — Atomic Design
⚛ Atoms
Raw values
Grey/2, Grey/50, Blue/150, Orange/200… The smallest indivisible units — raw colour, size, and scale values with no semantic meaning. Never used in components directly.
→
🧬 Molecules
Semantic tokens
Text/Primary, BG/Card, Stroke/Rest, Status/Error… Atoms combined into meaningful roles. Light and Dark mode collections switch automatically via Figma Variables.
→
🧱 Organisms
Component tokens
Button/BG, Header/Stroke, Form/Color… Molecules scoped to specific components. Developers consume these 1:1 in code — no manual translation needed.
Tokens — Typography · Colours · Spacing · Radii
The component library covers the full UI surface — buttons with semantic variants (Primary, Secondary, Danger, Warning, Info), data tables with pagination, tooltips, context menus, toggles, alerts, and modals. Every component is built with Auto Layout and exposes properties for state and variant switching.
Platform-specific libraries
🔗
Dev handoff via Figma Dev Mode
Components were handed off through Figma Dev Mode after a structured design review — specs, spacing, and variable bindings visible directly in the file. Token names map 1:1 to the codebase, reducing translation errors between design and implementation.
Figma plugin — DS Audit
To enforce consistency at scale, I built a custom Figma plugin that automates the design review process — catching violations before handoff rather than after.
🎨
Colour token audit
Scans every fill and stroke in the selected frame — flags any colour not bound to a DS token, showing the raw hex and the layer path.
📏
Spacing audit
Checks all padding and gap values against the spacing scale — highlights anything that falls outside the defined grid (0, 2, 4, 6, 8…).
Aa
Typography audit
Detects text layers using detached styles or raw font values instead of the DS text token library — ensures typographic consistency.
🏷
Layer naming
Finds default layer names (Group 123, Rectangle 45) and lets you rename them inline — keeping files clean for dev handoff.
🔄
Switchable DS profiles
Load any Figma file as the reference DS — audits work across multiple brand libraries, useful for multi-product teams.
✅
Handoff checklist
Pre-review checklist covering adaptations (Mobile / Desktop / POS), light and dark themes, and auto-layout readiness — tracks completion before each design review.
Birsan Mobile — Редизайн корзины
Редизайн корзины продаж для кассиров ритейла — замена текстового списка на визуальный, устойчивый к ошибкам интерфейс, который ускорил оформление и снизил количество ошибок.
↓22%
Снижение ошибок при выборе товара
2×
Быстрее редактирование количества
8
Критичных UX-проблем выявлено в discovery
3 мес
Цикл дизайна и разработки
Контекст
Birsan — B2B-платформа для ритейла, которой пользуются кассиры и менеджеры склада в нескольких торговых точках. Мобильное приложение — основной инструмент кассира в зале: сканирование товаров, формирование корзины и проведение оплаты под постоянным временным давлением.
Дискавери
В ходе наблюдений на 3 торговых точках и интервью с 8 кассирами я зафиксировал ключевые точки трения в флоу продажи. Исходный интерфейс — пронумерованный текстовый список без визуальной идентификации товаров: быстрый в разработке, но ненадёжный под нагрузкой.
Проблема 1 — Визуальная неоднозначность
Кассирам приходилось внимательно читать названия похожих товаров (например, «Ручка синяя» и «Ручка чёрная»), что увеличивало число ошибок в часы пик.
Проблема 2 — Нет редактирования количества
Чтобы изменить количество товара, нужно было возвращаться в каталог, находить товар и добавлять заново — никакого управления внутри корзины.
Проблема 3 — Визуальный шум
Оранжевая подсветка строк создавала когнитивную перегрузку — кассирам было сложно быстро проверить итоговый список и заметить ошибку до оформления.
Проблема 4 — Путаница в редактировании
Нажатие на товар в корзине открывало то же модальное окно «Добавить товар», что и при добавлении нового. Кассиры часто нажимали «Добавить» вместо сохранения изменений — создавая дублирующую позицию, которую затем приходилось удалять вручную.
Проблема 5 — Фрагментированный экран оплаты
Оплата наличными была разбита на два отдельных экрана — ввод суммы и подтверждение. Кассиры теряли контекст в середине флоу и вынуждены были сопоставлять две разные суммы на двух разных экранах под давлением очереди.
User Flow — транзакция продажи
Картирование флоу показало: критичные проблемы сосредоточены на трёх шагах — корзина, редактирование позиции и оплата. Все три были переработаны в рамках 3-месячного цикла параллельно с активной разработкой.
→
→
→
04
Редактирование позиции
⚠ 1 проблема
→
→
Редизайн корзины — До и после
Перетащите ползунок чтобы сравнить оригинальную корзину с редизайном.
До
После
Редактирование позиции — До и после
Старый флоу редактирования переиспользовал модальное окно «Добавить товар» — одинаковый UI, разные намерения. Новый дизайн — выделенный полноэкранный редактор с чёткими секциями, разбивкой цены и единственной кнопкой сохранения.
До
После
Оплата — До и после
Исходный флоу оплаты наличными был разбит на два экрана — ввод суммы и подтверждение — без визуальной связи между ними. Редизайн объединяет всё в один экран: способ оплаты, поле суммы, кнопки быстрого выбора купюр, сдача и кнопка подтверждения — всё доступно без переключения.
До
После
Ключевые дизайн-решения
01
Превью товара как основной идентификатор
Добавил изображения товаров в каждую строку корзины — кассир видит товар с первого взгляда, без необходимости читать название. Изображения подтягиваются из существующего API каталога.
02
Редактирование количества прямо в корзине
Заменил сценарий «вернись и добавь заново» на степпер −/+ внутри строки. Изменение количества — один тап вместо 4+ шагов, итог обновляется мгновенно.
03
Бейдж остатков для контроля наличия
Каждый товар теперь показывает количество в наличии. При отрицательном остатке бейдж краснеет — кассир видит проблему до подтверждения продажи, а не после.
04
Выделенный экран редактирования позиции
Заменил неоднозначное модальное окно «Добавить» на специальный экран редактирования. Чёткая визуальная иерархия разделяет информацию о товаре, количество и скидку на отдельные карточки. Единственная кнопка «Сохранить» исключает риск случайного создания дубликата.
05
Единый экран оплаты
Объединил фрагментированный двухэкранный флоу наличной оплаты в один. Способ оплаты, введённая сумма, кнопки быстрого выбора купюр, расчёт сдачи и кнопка подтверждения — всё видно без прокрутки и переключения между экранами.
Результат
Редизайн был выпущен после 3-месячного цикла дизайна и разработки. Данные из торговых точек зафиксировали снижение количества исправлений в корзине и общий рост уверенности кассиров при оформлении.
↓22%
Исправлений корзины за смену
↑14%
Скорость оформления — товаров в минуту
8/10
Оценка кассиров после запуска
3
Минорных проблемы закрыто в первые 30 дней
Основы дизайн-системы
Birsan работает на трёх платформах — Mobile, Web и POS — каждая с отдельной Figma-библиотекой. Все три разделяют единый слой токенов на базе Figma Variables, обеспечивая визуальную консистентность без привязки платформенных компонентов друг к другу.
610Цветовых переменных
72Токенов отступов
10Радиусов скругления
200Глобальных токенов
Архитектура токенов — Atomic Design
⚛ Атомы
Сырые значения
Grey/2, Grey/50, Blue/150, Orange/200… Наименьшие неделимые единицы — чистые значения цвета, размера и шкал без смысла. Напрямую в компонентах не используются.
→
🧬 Молекулы
Семантические токены
Text/Primary, BG/Card, Stroke/Rest, Status/Error… Атомы, объединённые в осмысленные роли. Коллекции Light и Dark переключаются автоматически через Figma Variables.
→
🧱 Организмы
Токены компонентов
Button/BG, Header/Stroke, Form/Color… Молекулы, привязанные к конкретным компонентам. Разработчики используют 1:1 в коде — никакого ручного перевода.
Токены — Типографика · Цвета · Отступы · Радиусы
Библиотека компонентов покрывает весь UI — кнопки с семантическими вариантами (Primary, Secondary, Danger, Warning, Info), таблицы с пагинацией, тултипы, контекстные меню, тогглы, алерты и модальные окна. Каждый компонент построен на Auto Layout с properties для управления состоянием и вариантом.
Платформенные библиотеки
🔗
Dev-хэндофф через Figma Dev Mode
Компоненты передавались через Figma Dev Mode после структурированного дизайн-ревью — спеки, отступы и привязка переменных видны прямо в файле. Названия токенов совпадают с кодовой базой 1:1, исключая потери при переводе между дизайном и реализацией.
Figma-плагин — DS Audit
Чтобы обеспечивать консистентность в масштабе, я разработал собственный Figma-плагин, который автоматизирует процесс дизайн-ревью — выявляет нарушения до хэндоффа, а не после.
🎨
Аудит цветовых токенов
Сканирует все заливки и обводки во фрейме — подсвечивает любой цвет, не привязанный к токену DS, показывает hex-значение и путь к слою.
📏
Аудит спейсингов
Проверяет все значения padding и gap по шкале отступов — выделяет всё, что выходит за пределы сетки (0, 2, 4, 6, 8…).
Aa
Аудит типографики
Находит текстовые слои с отвязанными стилями или сырыми шрифтовыми значениями вместо токенов DS — обеспечивает типографическую консистентность.
🏷
Нейминг слоёв
Находит дефолтные имена (Group 123, Rectangle 45) и позволяет переименовывать их прямо в плагине — чистые файлы для dev-хэндоффа.
🔄
Подключение другой DS
Любой Figma-файл можно подключить как референсную DS — аудит работает по нескольким брендовым библиотекам, полезно для мультипродуктовых команд.
✅
Чеклист хэндоффа
Чеклист перед ревью: адаптации (Mobile / Desktop / POS), светлая и тёмная темы, готовность Auto Layout — отслеживает прогресс перед каждым дизайн-ревью.
