кейси
Як виграти кейс для ЛУН Місто
Цю історію виграшного кейсу з курсу Product Interface Design Professium нам розповіла студентка Олеся Каіта. Читайте про всі етапи реорганізації карти комфортного життя для ЛУН: від досліджень до тестування.
Київ, люди і карта
Аня, керівниця ЛУН Місто, прийшла до нас з соціальним проєктом, що розвивася хаотично, і радше за правилом «що ми можемо», а не «що потрібно людям». Як результат — карта з 4 фільтрами та 19 статей, котрі неможливо гармонійно поєднати в цілісний продукт.
Хочеться, щоб ЛУН Місто доносив до людей більше, ніж окремі графіки чи зони, а Київ у довготривалій перспективі розвивався в сторону комфорту, а не щільності забудов. Щоб містяни цінували простір навколо і можливості, які він їм дає, а не обирали квартиру за знижкою.
Як це зробити? Створити щось, що допоможе зрозуміти — де буде комфортно жити саме тобі. Але як?
Аня, керівниця ЛУН Місто, прийшла до нас з соціальним проєктом, що розвивася хаотично, і радше за правилом «що ми можемо», а не «що потрібно людям». Як результат — карта з 4 фільтрами та 19 статей, котрі неможливо гармонійно поєднати в цілісний продукт.
Хочеться, щоб ЛУН Місто доносив до людей більше, ніж окремі графіки чи зони, а Київ у довготривалій перспективі розвивався в сторону комфорту, а не щільності забудов. Щоб містяни цінували простір навколо і можливості, які він їм дає, а не обирали квартиру за знижкою.
Як це зробити? Створити щось, що допоможе зрозуміти — де буде комфортно жити саме тобі. Але як?
Дослідження
Наша команда почала з дослідження. Випадково (ну, майже) ми обрали 25 людей. Усі вони змінювали чи купували квартиру протягом останніх 3 місяців. Це гарантувало нам свіжість спогадів, а отже — точність у деталях. На вік чи професію ми ставку не робили.
Хоча всі 7 інтерв'ю, які я провела, були різного рівня глибини, однак усі респонденти знову і знову починали свою розповідь з «щоб по ціні не занадто і до роботи близько».
І до цього ми ще повернемося.
Що ж, етап глибинного інтерв'ювання ми закінчили на Miro-дошці, де розібрали все на gains/pains/tasks. Йшло гладко.
Далі потрібно було обрати фреймворк. CJM не підходив — надто сильно відрізнялися пройдені шляхи у респондентів. У мене виникала думка розбити ЦА на архетипи «самодостатні» та «сімейники», однак я не знайшла достатньої бази для підтвердження теорії. Ми відмовилися й від JTBD — не хотіли відкидати більшу частину тасків ще до етапу пошуку рішень, щоб випадково не викинути «must be» штуки під час суб'єктивного визначення пріоритетів. Залишився VPC.
Наша команда почала з дослідження. Випадково (ну, майже) ми обрали 25 людей. Усі вони змінювали чи купували квартиру протягом останніх 3 місяців. Це гарантувало нам свіжість спогадів, а отже — точність у деталях. На вік чи професію ми ставку не робили.
Хоча всі 7 інтерв'ю, які я провела, були різного рівня глибини, однак усі респонденти знову і знову починали свою розповідь з «щоб по ціні не занадто і до роботи близько».
І до цього ми ще повернемося.
Що ж, етап глибинного інтерв'ювання ми закінчили на Miro-дошці, де розібрали все на gains/pains/tasks. Йшло гладко.
Далі потрібно було обрати фреймворк. CJM не підходив — надто сильно відрізнялися пройдені шляхи у респондентів. У мене виникала думка розбити ЦА на архетипи «самодостатні» та «сімейники», однак я не знайшла достатньої бази для підтвердження теорії. Ми відмовилися й від JTBD — не хотіли відкидати більшу частину тасків ще до етапу пошуку рішень, щоб випадково не викинути «must be» штуки під час суб'єктивного визначення пріоритетів. Залишився VPC.
Зрозуміло, що зустрічалися схожі болі і радості, тож на етапі групування вони перетворювалися у купки стікерів на тему «ходити на роботу пішки», «безпечно дістатися додому», чи «купити продукти неподалік». Це мало про що говорило, але вже допомагало зробити наш борд структурованим, а отже — зрозумілішим.
Згодом, ті групи, на котрі ми розбили стікери, перетворилися на фільтри продукту.
Ми обробили gains/pains/tasks і отримали мільярд рішень. Якісь із них були очевидними чи навіть реалізованими — як показати зелені зони. Щось з запропонованого (наприклад, карта шуму) були впроваджені за день до нашої презентації. Інші — були новими і цікавими, як от райони з історичним характером.
В один момент я була дуже задоволена собою через ідею трекати звернення в 1551, щоб показати будинки з проблемами у водо/газо/енергопостачанні, але я все ще не розуміла, як (а може і навіщо) це можна відобразити на карті.
Згодом, ті групи, на котрі ми розбили стікери, перетворилися на фільтри продукту.
Ми обробили gains/pains/tasks і отримали мільярд рішень. Якісь із них були очевидними чи навіть реалізованими — як показати зелені зони. Щось з запропонованого (наприклад, карта шуму) були впроваджені за день до нашої презентації. Інші — були новими і цікавими, як от райони з історичним характером.
В один момент я була дуже задоволена собою через ідею трекати звернення в 1551, щоб показати будинки з проблемами у водо/газо/енергопостачанні, але я все ще не розуміла, як (а може і навіщо) це можна відобразити на карті.
Я протестувала нинішню карту, і першою реакцією було «де на карті я і чому мені показує саме це?». На той момент відображалася карта теплових островів.
Прототипування
Нам подобалося те, що у нас виходило, але прийшов час переходити на наступний етап (ще тиждень до), і було страшно. Що це буде? Карта? Чат-бот? Табличка? Ватман?
Ну, ок, карта. Це було легко.
Не те, що далі.
Наче вирішили, що на карті буде 3 види інформації — рівень районів (зелені зони, наприклад), рівень вулиць (затори чи освітленість) і рівень будинків (магазини, аптеки чи спортзали). І поєднувати їх можна, обравши по одній категорії кожного виду.
«Чому не зробити все картами району і не поєднувати у довільній кількості та порядку?» — запитала я.
«Бо карти надто різні і неможливо поєднати таку різнорідну інформацію, щоб це виглядало зрозуміло. Як тільки вони накладаються між собою — виходить Г».
Мені не варто говорити, що неможливо. Якщо тільки ти не боженька у темі розмови. Хоча якщо у мене є відчуття, що це таки можливо, — байдуже, хто ти.
Спершу виникла ідея показувати все напів прозорими картами одного типу. Приклад. Є 2 карти, кожна з яких у своїй найнасиченіший точці має значення прозорості 50%. Коли ці 2 карти накладаються — у точках перетину максимальних значень отримана карта матиме значення прозорості 100%. Але це справедливо для однокольорової карти, інакше те саме Г.
Нам подобалося те, що у нас виходило, але прийшов час переходити на наступний етап (ще тиждень до), і було страшно. Що це буде? Карта? Чат-бот? Табличка? Ватман?
Ну, ок, карта. Це було легко.
Не те, що далі.
Наче вирішили, що на карті буде 3 види інформації — рівень районів (зелені зони, наприклад), рівень вулиць (затори чи освітленість) і рівень будинків (магазини, аптеки чи спортзали). І поєднувати їх можна, обравши по одній категорії кожного виду.
«Чому не зробити все картами району і не поєднувати у довільній кількості та порядку?» — запитала я.
«Бо карти надто різні і неможливо поєднати таку різнорідну інформацію, щоб це виглядало зрозуміло. Як тільки вони накладаються між собою — виходить Г».
Мені не варто говорити, що неможливо. Якщо тільки ти не боженька у темі розмови. Хоча якщо у мене є відчуття, що це таки можливо, — байдуже, хто ти.
Спершу виникла ідея показувати все напів прозорими картами одного типу. Приклад. Є 2 карти, кожна з яких у своїй найнасиченіший точці має значення прозорості 50%. Коли ці 2 карти накладаються — у точках перетину максимальних значень отримана карта матиме значення прозорості 100%. Але це справедливо для однокольорової карти, інакше те саме Г.
Що ж. Десь між 3 і 4 ранку, під час перегляду вже готові карти ЛУН Місто я побачила фрагмент, що дуже нагадував соти. І зрозуміла, що потрібно оперувати гексами. Будь-яку територію (у нашому випадку — Київ) можна розбити на шестикутники, дати їм значення. При накладанні карт проводити математичну операцію і визначати значення отриманого гекса (і, відповідно, його колір).
По суті, вони уже мали рішення, але давайте ми їм про це не скажемо.
Один мінус — спроби візуалізації були не фонтан. Але я вірила в ідею, отже варіант «не впораюся» — не варіант.
На той момент ми закінчили двофакторний аналіз і вже працювали над фільтрами та прототипом для мобільного телефону. Тож змінити напрямок корабля було не так легко. Я навіть подумала, що гекси залишаться лише в моєму особистому кейсі, але мені важко здаватися.
Пам'ятаєте, ми говорили про те, що вибір квартири починався з визначення ціни та пошуку місця, близького до роботи. І що люди не розуміли, де вони розташовані, адже на карті не було геолокації.
Отже, нам потрібно було зробити онбордінг з обраними критеріями «ціна» та «поряд з…» і додатковими, щоб допомогти обирати комфортний район. А оскільки ми не знаємо, планує людина орендувати чи купувати квартиру — ціна може бути за метр чи за місяць. І респонденти часто займалися вибором квартири, фізично перебуваючи на роботі — тому є варіант «моя геолокація» замість введення адреси. Комусь потрібно було зручно добиратися до двох точок — роботи партнера, інституту чи помешкання батьків, тому після введення однієї адреси можна ввести ще й другу.
А ще покажемо точку на карті, де людина перебуває саме зараз, не будемо її мучити.
На ранок у мене вже був прототип десктопної версії онбордінгу і карти з криво накиданими гексами. Дуже криво.
По суті, вони уже мали рішення, але давайте ми їм про це не скажемо.
Один мінус — спроби візуалізації були не фонтан. Але я вірила в ідею, отже варіант «не впораюся» — не варіант.
На той момент ми закінчили двофакторний аналіз і вже працювали над фільтрами та прототипом для мобільного телефону. Тож змінити напрямок корабля було не так легко. Я навіть подумала, що гекси залишаться лише в моєму особистому кейсі, але мені важко здаватися.
Пам'ятаєте, ми говорили про те, що вибір квартири починався з визначення ціни та пошуку місця, близького до роботи. І що люди не розуміли, де вони розташовані, адже на карті не було геолокації.
Отже, нам потрібно було зробити онбордінг з обраними критеріями «ціна» та «поряд з…» і додатковими, щоб допомогти обирати комфортний район. А оскільки ми не знаємо, планує людина орендувати чи купувати квартиру — ціна може бути за метр чи за місяць. І респонденти часто займалися вибором квартири, фізично перебуваючи на роботі — тому є варіант «моя геолокація» замість введення адреси. Комусь потрібно було зручно добиратися до двох точок — роботи партнера, інституту чи помешкання батьків, тому після введення однієї адреси можна ввести ще й другу.
А ще покажемо точку на карті, де людина перебуває саме зараз, не будемо її мучити.
На ранок у мене вже був прототип десктопної версії онбордінгу і карти з криво накиданими гексами. Дуже криво.
Все здавалося логічним та підтвердженим якісним дослідженням. А реалізувати дешевше, ніж перевіряти кількісними. Так сказав Денис Суділковський (Chief Design Officer в ЛУН та куратор курсу, а нині — куратор курсу Product design), я ж далека від цін на розробку.
Фільтри мені здалися опрацьованими непогано (тести з цим твердженням потім не погодяться), вони поки залишилися без змін.
Показала команді й... іноді здавалося, що мене хочуть убити. Іноді — що так і варто зробити. Я заважала жити і руйнувала плани. Ненавиджу таких. Але очевидно я зробила щось правильно, бо ми таки зійшлися на гексах і онбордінгу, я навіть отримала kiss-емоджі після перепалки, тож перестала непокоїтися за своє життя.
Фільтри мені здалися опрацьованими непогано (тести з цим твердженням потім не погодяться), вони поки залишилися без змін.
Показала команді й... іноді здавалося, що мене хочуть убити. Іноді — що так і варто зробити. Я заважала жити і руйнувала плани. Ненавиджу таких. Але очевидно я зробила щось правильно, бо ми таки зійшлися на гексах і онбордінгу, я навіть отримала kiss-емоджі після перепалки, тож перестала непокоїтися за своє життя.
Тестування
Мені хотілося б сказати, що це було весело, але ні. Якщо поп-ап для онбордінгу летів ще не погано (відносно), то з фільтрами була біда. «БЦ» це Біла Церква? Що таке теплові острови? Фільтри в категоріях «Транспорт» та «Інфраструктура» на тестуванні-сортуванні змішувалися у довільному порядку.
Десь у цей момент стало зрозуміло, що зелені гекси на карті це добре, але наскільки? А якщо карта ледве червона — то це зовсім погано, чи ще можна жити?
Зі змін — в поп-апі з передвибраними фільтрами цін та адрес люди не завжди розуміли, що це теги. Тепер їх потрібно буде обирати, але й зв'язок стане очевидним.
У наступній версії залишиться лише варіант ціни за квадратний метр. Чому? Ми проходили блок аналітики на прикладі малазійського Flatfy і бачили різницю між паттернами купівлі житла і його оренди. Вони кардинально відрізняються в швидкості, а отже й у зваженості. А карту ми робимо для тих, кому потрібно буде жити з тим компромісом, на котрий вони підуть зараз.
І не хочеться, щоб вони повторили мій власний досвід і купили прекрасний таунхаус у Чайці, який робить дуже незручною роботу в Києві. Три години щодня на транспорт — це 72 години в місяць або 864 в рік. 36 повних діб у рік (!!!) я проводжу тільки у дорозі на роботу та з неї. Краще б у мене була карта.
Внесли правки і перейшли до дизайну.
Мені хотілося б сказати, що це було весело, але ні. Якщо поп-ап для онбордінгу летів ще не погано (відносно), то з фільтрами була біда. «БЦ» це Біла Церква? Що таке теплові острови? Фільтри в категоріях «Транспорт» та «Інфраструктура» на тестуванні-сортуванні змішувалися у довільному порядку.
Десь у цей момент стало зрозуміло, що зелені гекси на карті це добре, але наскільки? А якщо карта ледве червона — то це зовсім погано, чи ще можна жити?
Зі змін — в поп-апі з передвибраними фільтрами цін та адрес люди не завжди розуміли, що це теги. Тепер їх потрібно буде обирати, але й зв'язок стане очевидним.
У наступній версії залишиться лише варіант ціни за квадратний метр. Чому? Ми проходили блок аналітики на прикладі малазійського Flatfy і бачили різницю між паттернами купівлі житла і його оренди. Вони кардинально відрізняються в швидкості, а отже й у зваженості. А карту ми робимо для тих, кому потрібно буде жити з тим компромісом, на котрий вони підуть зараз.
І не хочеться, щоб вони повторили мій власний досвід і купили прекрасний таунхаус у Чайці, який робить дуже незручною роботу в Києві. Три години щодня на транспорт — це 72 години в місяць або 864 в рік. 36 повних діб у рік (!!!) я проводжу тільки у дорозі на роботу та з неї. Краще б у мене була карта.
Внесли правки і перейшли до дизайну.
UI
У чому плюс нинішньої карти ЛУН Місто — так це в просторі. Так, було не зрозуміло, що з ним робити, але саму карту видно чудово. Ніяких зайвих меню, табів й іншого візуального шуму. Акуратна кнопка для налаштування фільтрів. А якщо позбутися незрозумілості, показавши на онбордінгу (після вибору критеріїв у поп-апі), що, де і як працює? «Чудова ідея» сказала собі Леся і відкрила Figma. Леся взагалі часто розмовляє з собою.
Серед нас був крутий системний дизайнер, Влад Кишкан, якому фізично боляче від такої різкої зміни вбік від формату ЛУН. А ще у нього з'явилася чудова ідея — показувати поп-ап (при тривалому ховері на гекс) з детальною інформацією по вибраним параметрам і емоджі. Ван лав.
Я натомість зовсім не хотіла повторювати ЛУН. А навіщо? Навіть Денис каже, що виглядає убого. А він його (ЛУН) любить. Не через дизайн, але все-таки.
Я за френдлі, просторий, з мило і по-айосовскі скругленими кутами. І емоджі — так! Але якщо використовувати — то не соромлячись ставити на першу сходинку ієрархії.
У чому плюс нинішньої карти ЛУН Місто — так це в просторі. Так, було не зрозуміло, що з ним робити, але саму карту видно чудово. Ніяких зайвих меню, табів й іншого візуального шуму. Акуратна кнопка для налаштування фільтрів. А якщо позбутися незрозумілості, показавши на онбордінгу (після вибору критеріїв у поп-апі), що, де і як працює? «Чудова ідея» сказала собі Леся і відкрила Figma. Леся взагалі часто розмовляє з собою.
Серед нас був крутий системний дизайнер, Влад Кишкан, якому фізично боляче від такої різкої зміни вбік від формату ЛУН. А ще у нього з'явилася чудова ідея — показувати поп-ап (при тривалому ховері на гекс) з детальною інформацією по вибраним параметрам і емоджі. Ван лав.
Я натомість зовсім не хотіла повторювати ЛУН. А навіщо? Навіть Денис каже, що виглядає убого. А він його (ЛУН) любить. Не через дизайн, але все-таки.
Я за френдлі, просторий, з мило і по-айосовскі скругленими кутами. І емоджі — так! Але якщо використовувати — то не соромлячись ставити на першу сходинку ієрархії.
Того вечора мене запитали: «А це результат поєднання усіх карт чи що?». Значить, треба зробити так, щоб ще на старті було зрозуміло, як карти накладаються, і як ними керувати.
Працювала я у Figma, і мій погляд зупинився на значку видимості шару. Закрите око замість порожньої зіниці — люблю Figma за її людяність. Ми теж покажемо наші шари, анімуємо виникнення карти і відповідного шару, потім наступну, і наступну. Повинно бути зрозуміло. А ще можна додати на онборді «Вмикай/вимикай видимість шарів тут». Якось так, але нормальною мовою.
Працювала я у Figma, і мій погляд зупинився на значку видимості шару. Закрите око замість порожньої зіниці — люблю Figma за її людяність. Ми теж покажемо наші шари, анімуємо виникнення карти і відповідного шару, потім наступну, і наступну. Повинно бути зрозуміло. А ще можна додати на онборді «Вмикай/вимикай видимість шарів тут». Якось так, але нормальною мовою.
Результат
Усю ніч до презентації робила відео, озвучене цитатами з наших інтерв'ю, бо я ж не просто так артдиректором в рекламі працюю — знаю, наскільки важливо змусити співпереживати. І анімацію основних UI-елементів додала для зрозумілості.
Хоча кого я обманюю, я сподівалася, що лише наша команда зайде так далеко і це дасть нам кілька бонусних балів. Я бачила інші команди і визначила для себе сильного конкурента.
Насправді, у них теж був дизайнер, котрий в After Effects працює. Зате ми отримали бонуси за мобільну версію, котру зробив Влад Кишкан тієї ж ночі. Ближче до суті.
Усю ніч до презентації робила відео, озвучене цитатами з наших інтерв'ю, бо я ж не просто так артдиректором в рекламі працюю — знаю, наскільки важливо змусити співпереживати. І анімацію основних UI-елементів додала для зрозумілості.
Хоча кого я обманюю, я сподівалася, що лише наша команда зайде так далеко і це дасть нам кілька бонусних балів. Я бачила інші команди і визначила для себе сильного конкурента.
Насправді, у них теж був дизайнер, котрий в After Effects працює. Зате ми отримали бонуси за мобільну версію, котру зробив Влад Кишкан тієї ж ночі. Ближче до суті.
Ми презентували клієнту і… перемогли! Стрибала і кричала, коли Аня назвала нашу команду. Люблю бачити очі замовника, котрий вірить у рішення. Люблю знаходити відповіді на неочікувані запитання, особливо — неочікувано хороші відповіді. Люблю дні, в які я перемагаю.
Денис про мій захист сказав «Зв'язно, сильно, віриш в ідею, тобі можна довірити гроші». Денис, у мене завжди є пара ідей, якщо що :)
Чекаю, доки вийде бета. Щаслива.
Фото після захисту.
Facebook
Читайте також: Дизайн для Укрзалізниці за 53 гривні 25 копійок
Courses
Сподобалась стаття?
