кейси
Дизайн для Укрзалізниці за
53 гривні 25 копійок
Історія самостійного кейсу студентки Product Interface Design Professium, яка взяла собі додаткове домашнє завдання та розробила новий втричі швидший шлях купівлі квитків на сайті Укрзалізниці.
«Денис, я все розумію, але не розумію: це тому, що справді розумію, чи тому, що в команді розуміти легше?» — пожалілася Леся куратору й випросила своє, і нікого більше, додаткове домашнє завдання.

Ми тоді саме проходили тему ООП (об'єктно-орієнтоване прототипування) у командній роботі над кейсом Portmone. А мені дуже хотілося зробити все самій, без колективного розуму.

«Візьми сайт Приват24 у розбери на об'єкти. Ні, краще Нову Почту. О, Укрзалізницю, точно — там печаль!» — відповів Денис.

Артдиректорка в Serviceplan Group, студентка
Грудень, 13
Об'єкти та Дослідження


Поверталася з курсів і гортала мобільну версію сайту. Не випускала телефон з рук і ледве стримувалася, щоб не почати записувати скрінкаст прямо на сидінні автобусу №37.

Дісталася до ноута і одразу купила квиток. За 53 гривні 25 копійок. І перейшла до визначення об'єктів класів, їх властивостей, обмежень та функцій.
Тут потрібно уточнити, що метод використовується дизайнерами для правильного проектування інтерфейсу, але має спрощення та деяку міру свободи, а отже не може використовуватися програмістами для створення структури баз даних.

Почала з класу «Користувач» (User). Те, що ми знаємо про кожного користувача — це його властивості. У класу «User» є властивості:
- ID (тип даних: ID)
- Прізвище (string)
- Ім'я (string)
- Еmail (string)
- Телефон (string)
- Тип користувача (string)
- Реєстрація (timestamp)
- Пароль (string)
- Fb (number)
- G + (number).

Тип користувача — це студентський/пільговий, наприклад. Дещо з цього не обов'язкове до заповнення — Телефон, Тип користувача, Fb (number), G + (number) — значить, може мати значення «null». Те, що ми можемо робити з об'єктом класу — це методи. Це Create User, Read User, Update User, Delete User. Начебто не складно.

Також є класи «Поїзд» (Train), «Оплата» (Card), та «Документ» (Doc). З них цікавий «Поїзд» (Train).

Давайте подивимося.

У класу «Train» є властивості:
- ID (тип даних: ID)
- Номер поїзда (string)
- Маршрут (Array [Time_come:timastamp, Time_go:timastamp, Station:string])
- Дата відправлення (date)
- Дата прибуття (date)
- Вагони (Array [Number:num, Class:string, All_places:num, Free_places:num]).

Властивість «Маршрут» (Array [Time_come:timastamp, Time_go:timastamp, Station:string]) означає, що у кожного поїзда є таблиця зі стовпчиками «Прибуття», «Відбуття» та «Станція».

Властивість «Вагони» (Array [Number:num, Class:string, All_places:num, Free_places:num]) — означає, що кожен поїзд складається з вагонів, а у кожного вагону є номер, клас, загальна кількість місць та кількість вільних місць. Звісно, ще є продані місця та заброньовані, але в нашому контексті ми можемо цим знехтувати.
Тоді ж зрозуміла, що кейс на цьому не залишу. Хочу його повністю, з дослідженням, проектуванням, тестуванням, та юайкою. Може навіть анімацією.

Similar Web не показав нічого нового. 2,87 млн візитів на сайт, з них 59,16% точно знали, куди і для чого. Навіть адресу запам'ятали правильно. Чи, навіть краще, сайт у них в закладках. Ще 29,76% (80% від органічного пошуку) знали, чого хочуть, але не могли згадати, де це взяти.
Виходить, Укрзалізниця уже виховала 2,55 млн, котрим «і так норм».

Але можна краще.
Січень, 22
Шедовінг

Довгий новорічний застій. Бррр.

Налаштована рішуче, притисла телефон ближче до тіла й пішла на вокзал. Тихо стояла біля каси й робила вигляд, ніби мені потрібен столик, а насправді записувала діалоги. Дивно, що ввечері понеділка черг не було.
Одразу визначилися 2 паттерна:

До (Козятина) найближчий! На (6-й поїзд) мені! А ще часто лунало «І зворотній теж!», «Два квитки, поряд» та «Дешевше є?». Ок, записала.

Добре, що за людьми слідкувала — інакше б сортувала видачу квитків по часу в дорозі. Не люблю поїзди, люблю добиратися швидко. А тут, виявляється, що ціна важливіша.

– Скільки коштує квиток до Новоград-Волинського?
– На коли?
– На сьогодні.
– Плацкарт — 110, купе… — клієнт розвертається і йде.
– Це з постільною білизною, без неї 70.89 за плацкарт! — кричать в спину. — Давати?
– Да! — клієнт щасливий.

Січень, 27
Гіпотези

Що мені сподобалося у мобільній адаптації сайту — логотип. Його агенція Galagan розробляла у далекому 2018, але мені дати вектор відмовилися, не мають права. Що ж, розумію. Доросла дівчинка, сама зроблю.

Тепер серйозно. Як людей не налякати своїм «краще»?

Для початку, підказав Денис, залишити лейаут і навігацію. З лейаутом на цій сторінці все нормально, з меню не настільки, але це не сьогодні. Далі — ідентифікація через шрифт, лого, кольори. Тут все логічно.

Що мені не подобається на основному екрані (якщо брати до уваги лише UX), так це згорнуте поле «Дата відправлення», де для вибору дати треба викликати поп-ап. Так, автоматично стоїть сьогоднішня дата, але, якщо мені потрібен квиток на завтра — втрачу тап на вибір нової дати. А якщо на завтра квитки закінчилися — то й не один.

Є гіпотеза: якщо календарик показувати розгорнутим, з обраною сьогоднішньою датою, й дозволити обирати не одну, а кілька дат виїзду, це зекономить клієнтам час і гроші, а значить, додасть нам лояльності. А лояльність не купиш!

Що ще? «В обидві сторони» та «Два місця поряд». Припустимо, нам потрібно купити два квитки до Жмеринки на вихідні, а це по 2 квитка на кожного. В нинішньому варіанті для цього ми пройдемо шлях у 66 кроки.

66 кроків, Карл!
Наявний флоу.
66 кроків на замовлення квитків в обидві сторони для двох
Оскільки у нас реалізований функціонал вибору зворотніх квитків через функцію «В обидві сторони» — то кнопка «зміна станцій» вже не потрібна.

Зате додам одразу активний чекбаттон «використати ті самі дані для зворотнього квитка», щоб не вводити знову прізвища, імена та пільгові дані. Змінювати — будь ласка, але це уже інший конеркейс.

До того ж, вибір часу відправлення був надлишковим. На вокзалі потрібно було «вже» (бо люди були там фізично), або «байдуже коли, аби дешевше». Замовленню через сайт ближче другий варіант.

Це приводить до такого висновку — сортуватиму за ціною, від найдешевшого.

Подивилася, як наразі відбувається вибір найдешевшого квитка у мобільній версії. Для цього юзери заходять на сторінку кожного поїзда окремо і запам'ятовують нижчу ціну. Кумендо зляться.

Отже. Найважливіші зміни на сторінці з модулем вибору квитків:

- Станцію «Звідки» визначаємо по геолокації
- Вводим функціонал «квитки в обидва боки»
- Позбуваємось кнопки «перемикання» між станціями
- Додаємо «2 квитки поряд»
- Показуємо календар повністю, не використовуючи поп-апи
- Позбуваємось вибору часу відправлення

На сторінці з результатом пошуку:

- Вводимо сортування квитків за ціною — від найдешевшого
- Показуємо доступні квитки та їх ціни у кожному з поїздів, виділяючи найдешевші.

На сторінці поїзда:

- Змінюємо горизонтальний формат відображення на вертикальний, зі зручними великими кнопками для вибору місця

На сторінці замовлення квитків:

- Вводимо чек баттон «використати ті самі дані для зворотнього квитка».
Новий флоу. 21 крок на замовлення квитків в обидві сторони для двох.

21, а не 66!
Дуже хотілося зробити не правки до наявного флоу, а змінити його на глибшому рівні. Так родився варіант без кошика, коли обрані квитки після заповнення просто висіли зверху, щоб можна було повернутися до них та перевірити. Варіація на тему акордеону. Але ж як бути з тими двома мільйонами людей, навіть більше, котрі приходять сюди і очікують пройти старим шляхом? Бо сортування за ціною, зміна ієрархії в картці поїзду чи вивід цін одразу на картці (без необхідності заходити на сторінку поїзда) — це одне, а відсутність кошика як такого може налякати. Точно налякає.

Стрималася. Пора б накидати щось, що можна тестити.
«Давай, Леся, ти зможеш», — сказала собі і… закінчила роботу через два тижні, зате гарно. Знаю, що грішу, але мій кейс — мої правила.

На нашій курсовій з Portmone, що йшла майже паралельно моєму особистому проекту, ми дуже вдало розділили ролі. Ми з Ігорем створювали та структурували хаос в дизайн-системі, Саша перетворював фігмівську статику в анімований та робочий прототип в Axure. А тут я одна. Доведеться згадувати неймінги компонентів та автолейаут. Axure — так взагалі вчити. Окей, да, буде складно. Як і люблю.
Лютий, 10
Прототипування та тестування

Розібралася в динамічних панелях, умовах і зовнішніх змінних за допомогою трьох відео по 8 хвилин. Дякую, Саша.

Зібрала прототип і показала першій живій людині. Виявилося, що про сортування «від дешевших» — не очевидно геть.
Задача: «Купити два квитки Київ-Львів-Київ. Найдешевші, за тиждень до.

Соня постійно користується цим сайтом і часто їздить зі своєю сестрою. І у неї пішло 3 хвилини 1 секунда в оригінальній версії сайту, 1 хвилина 49 секунд — при першому проходженні нового прототипу, і всього 53 секунди після адаптації.

Для чистоти експерименту додамо до останнього 8 секунд за рекапчу, котрої у тому варіанті не було. Хоча, рекапча — окрема тема.
Флоу в новій версії можна пройти втричі швидше оригіналу. Та це офігенський результат!

На цьому можна було б закінчити, але Продж люб'язно дав в аренду Віталія Фрідмана на тиждень. Не могла не скористатися можливістю.
Давайте одразу домовимося, що це не операційне тестування. Проводити таке з дизайнером було б великою помилкою. Але хіба не цікаво? Тим паче, що прототип однаково виграв в оригіналу.
Фідбек був корисний. Мені часом потрібно вказувати на відтінки сірого на інших екранах, бо на моєму все прекрасно. В результаті контраст підняла, кнопки виразнішими зробила, але флоу залишився.
День Х. Публікація
Корисно. Для мене, бо вчуся бути самостійною, і для Укрзалізниці (я сподіваюся), бо вони саме в процесі змін. Я працювала для задоволення, але «що якщо?..»

Цікаво. Трохи страшно на вокзалі, особливо коли пацанчик підходить і дуже не проханим тоном каже: «Допоможи зібрати на дорогу додому, що тобі, важко?». Але все ще цікаво.

І дивно. Робила проект 2 місяці, а відчуття закінченості немає. Мабуть, так і повинно бути з продуктовим дизайном, да?

А фігма тут, забирайте.
Courses
Сподобалась стаття?