В рамках одного з проектів для Uvoteam, моєю задачею було об'єднання двох різних ордер форм — односторінкової та покрокової — в одну уніфіковану форму (Unified Order Form, UOF), що мала успадкувати переваги обох підходів і мінімізувати їх недоліки.

Початок роботи

Я проаналізував обидва існуючих рішення і сформував їх переваги і недоліки. Це допомогло зрозуміти, яким є очікуваний результат.

Макет частини One-Page OF

Макет частини One-Page OF

Макет одного з кроків Step-by-Step OF

Макет одного з кроків Step-by-Step OF

Переваги Недоліки
**Односторінкова форма
(One-Page OF)** Усі елементи розміщені на одному екрані, що створює враження стислого брифу. Візуально перевантажена.
Постійне відображення вибраних параметрів для зручного перегляду. Надмірна кількість різноманітних елементів керування.
Можливість перегляду зведення замовлення в режимі реального часу. Користувачі часто експериментують із цінами.
Форма надто довга для мобільних пристроїв.
**Покрокова форма
(Step-by-Step OF)** Поетапний процес спрощує заповнення форми. Візуально незрозумілий лейаут.
Зосередженість на кожному етапі дозволяє відповідати на конкретні запитання. Незручність навігації між етапами.
Користувачі вибирають необхідні опції без урахування вартості. Користувачі можуть втратити інформацію, обрану на попередніх етапах.
Розширені можливості для аналітики. Огляд не дозволяє редагувати всі параметри замовлення.
Таймлайн не є інтуїтивно зрозумілим для всіх користувачів.

Задача

Мета: Розробка Unified Order Form (UOF), яка об'єднає переваги обох існуючих форм та усуне їх недоліки. Це повинно полегшити підтримку і розробку нових функцій, забезпечити більш логічний та зрозумілий UX для користувачів, а також надати можливість швидкого внесення змін завдяки модульності форми.

Гіпотеза: Якщо реалізувати уніфіковану форму, це покращить UX, спростить підтримку і покращить продуктові метрики метрики.

Реалізація

  1. Дослідження та аналіз: Проведено аналіз існуючих форм, зібрано дані з аналітики та відгуки користувачів.
  2. Дизайн: Створено макети та інтерактивні прототипи нової форми у Figma. Враховано всі переваги та усунено недоліки обох попередніх форм.
  3. Тестування: Проведено юзабіліті тестування нової форми, зібрано зворотний зв'язок.
  4. Впровадження: Тісна співпраця з командою розробки для інтеграції нової форми на платформу.

Інтерфейс

Було створено макети для всіх екранів та станів у двох варіантах (desktop+mobile), пропрацьовано error-state та empty-state кейси. Для зручності роботи було обрано бібліотеку компонентів shadcn/ui, допрацьовано та оновлено дизайн-систему в Figma.

Приклад компоненту Button та його станів в Figma

Приклад компоненту Button та його станів в Figma

Інтерфейс одного з кроків форми замовлення

Інтерфейс одного з кроків форми замовлення

Вигляд фінального кроку форми замовлення

Вигляд фінального кроку форми замовлення

LOF Step 4 _ mobile.png

Результати