UX/UI B2B Manufacturing 2025

isqod — UX-UI демоisqod — UX-UI demo

Сквозной UX/UI: карта пути пользователя, ключевые флоу и кликабельный демо-прототип мобайла и дашборда End-to-end UX/UI: a user journey map, key flows and a clickable demo prototype of the mobile app and the dashboard

Открыть макет в Figma →Open the mockup in Figma →
Моя рольMy role
UX/UI Designer
СфераField
B2B SaaS
МетодMethod
Customer Journey Map + UX/UI-дизайнCustomer Journey Map + UX/UI design
12
Ключевых экрановKey screens
мобайл + дашбордmobile + dashboard
2
Платформы продуктаProduct platforms
моб. приложение и веб-дашбордmobile app and web dashboard
1
Кликабельный прототипClickable prototype
сквозной демо-флоуan end-to-end demo flow
ПРОЦЕССPROCESS

Собрала путь и спроектировала кликабельное демоI mapped the path and designed a clickable demo

Разложила сценарий на этапы, описала действия и цели пользователя, собрала вайрфреймы и UI и связала экраны в кликабельный прототип — для мобайла и веб-дашборда.I broke the flow into stages, described user actions and goals, built wireframes and UI, and linked the screens into a clickable prototype — for both mobile and the web dashboard.

Карта путиJourney map Сценарии и JTBDScenarios & JTBD ВайрфреймыWireframes UI-китUI kit Кликабельный прототипClickable prototype Моб + дашбордMobile + dashboard
РЕШЕНИЕSOLUTION

Единый путь с понятными переходамиOne path with clear transitions

Шесть этапов связаны в один маршрут: на каждом экране видно, где пользователь сейчас и какое действие главное. Переходы подсказывают следующий шаг, а не оставляют в тупике.Six stages are linked into a single route: on every screen it's clear where the user is and which action is primary. Transitions suggest the next step instead of leaving a dead end.

01

ВходSign in

Логин и контекст пользователяLogin and user context

02

СтартStart

Понятная точка входа в сценарийA clear entry point to the flow

03

СозданиеCreate

Ключевое действие всегда на видуThe key action is always in sight

04

ПроверкаReview

Подсказки и валидация по ходуHints and validation along the way

05

ГотовоDone

Явный следующий шагAn explicit next step

06

РезультатResult

Статус и что делать дальшеStatus and what to do next

Открыть макет в Figma →Open the mockup in Figma →
ЭКРАНЫSCREENS

Мобайл и дашборд в одном флоуMobile and dashboard in one flow

Ключевые экраны сценария: мобильное приложение для действий «в поле» и веб-дашборд для контроля. Единый визуальный язык и предсказуемые переходы.The flow's key screens: a mobile app for actions “in the field” and a web dashboard for oversight. One visual language and predictable transitions.

РЕЗУЛЬТАТRESULT

Что получилосьWhat came out of it

Сквозной путь и кликабельное демо дали команде общий язык: сценарий стало можно показывать, обсуждать и тестировать на реальных людях — ещё до разработки.The end-to-end path and the clickable demo gave the team a shared language: the flow could be shown, discussed and tested on real people — before any development.

Понятные переходыClear transitions

На каждом экране ясно, какое действие главное и что делать дальше.On every screen it's clear which action is primary and what to do next.

Кликабельное демоClickable demo

Прототип мобайла и дашборда — можно показать и протестировать.A prototype of the mobile app and dashboard — ready to show and test.

Открыть макет в Figma →Open the mockup in Figma →