Я проаналізував обидва існуючих рішення і сформував їх переваги і недоліки. Це допомогло зрозуміти, яким є очікуваний результат.
Макет частини One-Page OF
Макет одного з кроків Step-by-Step OF
Переваги | Недоліки | |
---|---|---|
**Односторінкова форма | ||
(One-Page OF)** | Усі елементи розміщені на одному екрані, що створює враження стислого брифу. | Візуально перевантажена. |
Постійне відображення вибраних параметрів для зручного перегляду. | Надмірна кількість різноманітних елементів керування. | |
Можливість перегляду зведення замовлення в режимі реального часу. | Користувачі часто експериментують із цінами. | |
Форма надто довга для мобільних пристроїв. | ||
**Покрокова форма | ||
(Step-by-Step OF)** | Поетапний процес спрощує заповнення форми. | Візуально незрозумілий лейаут. |
Зосередженість на кожному етапі дозволяє відповідати на конкретні запитання. | Незручність навігації між етапами. | |
Користувачі вибирають необхідні опції без урахування вартості. | Користувачі можуть втратити інформацію, обрану на попередніх етапах. | |
Розширені можливості для аналітики. | Огляд не дозволяє редагувати всі параметри замовлення. | |
Таймлайн не є інтуїтивно зрозумілим для всіх користувачів. |
Мета: Розробка Unified Order Form (UOF), яка об'єднає переваги обох існуючих форм та усуне їх недоліки. Це повинно полегшити підтримку і розробку нових функцій, забезпечити більш логічний та зрозумілий UX для користувачів, а також надати можливість швидкого внесення змін завдяки модульності форми.
Гіпотеза: Якщо реалізувати уніфіковану форму, це покращить UX, спростить підтримку і покращить продуктові метрики метрики.
Було створено макети для всіх екранів та станів у двох варіантах (desktop+mobile), пропрацьовано error-state та empty-state кейси. Для зручності роботи було обрано бібліотеку компонентів shadcn/ui, допрацьовано та оновлено дизайн-систему в Figma.
Приклад компоненту Button та його станів в Figma
Інтерфейс одного з кроків форми замовлення
Вигляд фінального кроку форми замовлення