UX Case Study. Сайт та додаток для музею Шевченківський Гай

Margarita Tanchik
OffGrid Design Community
10 min readDec 12, 2022

Ми — Magenta team, студенти OffGrid Design School, які протягом трьох місяців під керівництвом менторів працювали над проєктом сайту та додатку. Хочемо поділитись з вами процесом та результатами нашої роботи.

Про проєкт

Наш проєкт — це сайт та додаток для музею просто неба Шевченківський Гай, офіційна назва — Музей народної архітектури та побуту у Львові імені Климентія Шептицького.

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

Стейкхолдери прийшли до нас з запитом зробити дизайн сайту та мобільного додатку, де була б можливість купувати квитки до музею та сувеніри онлайн, а також отримувати актуальну інформацію про події та новини музею. Ще одним важливим запитом стейкхолдерів була функція аудіогіда у додатку. На наявному сайті користувачі не могли знайти потрібну інформацію, купити квиток, сайт був перевантажений інформацією, відсутня карта музею. Оскільки, стейкхолдери не мали досліджень, то нам треба було все це зробити з нуля, щоб зрозуміти справжні проблеми та потреби користувачів.

Наша команда

Студенти: Наталя Кучер, Маргарита Танчик, Олександр Шутюк.
Ментори: Андріана Волошин (Experience Designer), Ростислав Павловський (Experience Designer).

Наша команда

Дизайн-процес

При плануванні робочого процесу, ми побудували Road map, керуючись принципами Дизайн-мислення.

Road map

Discovery

Жоден проєкт не обходиться без детального дослідження, адже, як казав Альберт Ейнштейн, «якщо я мав би годину на розв’язання проблеми, я витратив би 55 хвилин на формулювання проблеми, і тільки 5 — на її вирішення».
Це найцікавіший етап, коли ти поринаєш у нову для себе сферу, відкриваєш щось цікаве, іноді неочікуване. Здавалось, музей — все зрозуміло, але ж це далеко не так!

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

Kick-off meeting

Перш за все, ми провели kick-off-meeting зі стейкхолдерами, щоб познайомитись з ними та проєктом, краще зрозуміти їх проблеми та потреби. У процесі розмови вияснили, що головна ціль сайту — побудова якісної комунікації з відвідувачами.

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

Аналіз конкурентів

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

У підсумку знайшли для себе цікаві ідеї функціоналу та інформаційної архітектури, щоби таким чином об’єднати вдалі рішення з усіх сайтів і запропонувати максимально зручний та вдалий варіант для стейкхолдерів.

Аналіз конкурентів

Польове дослідження

Щоби зібрати максимум інформації про наш проєкт, ми провели польове дослідження на території музею. Нас зустріла Віталія, комунікаційна менеджерка, та провела екскурсію по музею, розказувала, як все працює, а ми паралельно ставили питання, записуючи усі важливі деталі у нотатник та на диктофон.

Польове дослідження музею

Інтерв’ю зі стейкхолдерами

Ми підготували скрипт для інтерв’ю зі стейкхолдерами, щоб дізнатись усе, що нас цікавило. Перелік охоплював практичні питання про музей та його роботу, про місію, цілі, плани на майбутнє, а також про поточні проблеми та потреби. У той же день нам вдалось опитати як стейкхолдерів, так і працівників музею. Дуже цікавим та цінним було те, що кожен з працівників музею ділився своїм бачення проблеми, і кожна розповідь розкривала все більше деталей для розуміння глобальної картини. Пані Віталія (комунікаційна менеджерка) надала нам основну інформацію про музей, у працівників — екскурсоводів, менеджерів по роботі з клієнтами, майстрів ми дізнались, як проходить їхній робочий день, з якими проблемами вони стикаються, а керівництво допомогло нам зрозуміти місію та стратегію продукту.

Після проведеного дня в музеї ми зрозуміли, що:

  1. Відвідувачі дуже мало знають про музей та активності, які він пропонує;
  2. На території музею погано ловить мобільний зв’язок, що треба врахувати при розробці мобільного додатку;
  3. Різних людей цікавлять у музеї досить різні речі, тому сайт повинен це враховувати, бути достатньо різноплановим та структурованим;

Інтерв’ю з відвідувачами (офлайн)

Другий день досліджень ми присвятили інтерв’ю з відвідувачами музею. Попри дощовий день, змогли «спіймати» декількох респондентів і задати питання, що нас цікавили. Також дуже пощастило зустріти іноземця та почути його думки. Всі дослідження документуватися, записувалися на диктофон, інколи — на відео. Справжня командна робота — поки ми з Наталею вели пряму трансляцію з музею, Саша паралельно робив запис цієї трансляції та її транскрибацію.

Інтерв’ю з відвідувачами

Онлайн-опитування

Для розуміння потреб користувачів сайту, ми також провели кількісне онлайн-опитування, яке було створене у Google Forms та публікувалося на сторінці музею і наших сторінках у різних соцмережах. На меті було перевірити наші основні гіпотези та краще зрозуміти наших користувачів, їхні болі та потреби.

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

Опитування у Google Forms

Нам вдалось зібрати 272 відповіді. Результати часом були досить очікуваними, а у деяких моментах — досить несподіваними:

  • Респонденти переважно дізнаються про події у музеї від друзів та через соцмережі та практично не знають, що музей має власний сайт;
  • Найбільше людей у нашому музеї цікавить народна архітектура та взаємодія з природою;
  • Найчастіше відвідувачі музею добираються туди на громадському транспорті (56%) та пішки (48%);
  • Більшість (71%) відвідувачів купують квитки у касі
  • При плануванні візиту респондентів найбільше цікавить наявність та чистота туалетів, навігація по території, безготівковий розрахунок, зручність графіка роботи, інформація про актуальні події та активності тощо;
  • Цікаво, що пріоритетні для стейкхолдерів функції (аудіогід, купівля сувенірів онлайн, можливість замовлення екскурсії) у рейтингу відвідувачів посіли одні з останніх місць.
Результати опитування. «Що вас найбільше приваблює у музеї?»

Глибинні інтерв’ю з відвідувачами (онлайн)

Щоб сформувати якийсь висновок на основі користувацьких інтерв’ю, попередньо опитаних наживо людей було недостатньо, тому ми вирішили також провести й онлайн-інтерв’ю з людьми, які залишили свої контакти в онлайн-опитуванні та висловили бажання взяти участь у подальшій роботі.

Онлайн-інтерв’ю мало на меті глибше розкрити тему, дослідити болі та потреби користувачів, дізнатись про їхній досвід. Всього було проведено 10 сесій, ми запитували людей про те, що для них музей Шевченківський гай, як часто вони його відвідують, з якими труднощами зіштовхувалися та що їх там найбільше надихає. Окрім того, ми питали в людей, що з побаченого в інших аналогічних музеях їм найбільше сподобалося та що варто було б змінити у нашому музеї, щоби зробити його більш популярним та привабливим для відвідування.

На цьому етапі було дуже цікаво те, що опитані люди мали дуже різний досвід та дуже різні думки щодо розвитку музею.

Інтерв’ю з відвідувачами

Головні інсайти з дослідження:

  1. Люди мало що знають про музей, про його фішки та атракції.
  2. Відвідувачі користуються переважно фейсбуком та гугл-картами, бо сайт неактуальний для відвідувачів, мало хто знає про його існування.
  3. Найважливіша інформація, яка потрібна: як доїхати, графік роботи, графік екскурсій, графік та бронювання майстер-класів, покупка квитків.
  4. Люди йдуть на майстрів, а не на Майстер-класи (особистий бренд та історія кожного).
  5. Музею не вистачає інтерактиву та іноді нудно.

Аналіз результатів та звіт

Завершивши фазу Discovery, ми зібрали всі дані та презентували стейкхолдерам попередні напрацювання. Виявилось, що наше дослідження у багатьох пунктах збігалось зі стратегічною сесією, яка проходила в музеї одночасно з нашими дослідженнями. Тому ми лише підтвердили думки стейкхолдерів, що теж важливо. Отже, ми приступили до наступної фази.

Звіт та фідбек від стейкхолдерів

Define

Мапа емпатії. Customer journey map.
Спершу на основі досліджень користувачів ми створили мапу емпатії та використали її при складанні customer journey map.
Це сприяло кращому розумінню наших користувачів та допомогло систематизувати їхні проблеми на шляху взаємодії з музеєм. Ми «стали» нашими користувачами та виявили приховані для нас моменти.

Customer journey map

Jobs to be done

Оскільки музей зацікавлений у максимальному розширенні аудиторії, ми вирішили не визначати персон, а зосередитися на методі Jobs to be done. На основі інформації, зібраної під час опитування та інтерв’ю, ми визначили проблеми користувачів та запропонували функціонал для рішення кожної з них.

Jobs to be done

Ideate

Брейншторм

Всередині команди ми провели брейншторм-сесію, на якій придумували ідеї для розв’язання кожної проблеми, сформульованій у JTBD. В результаті загальна кількість згенерованих ідей для всіх завдань та сценаріїв становила більше 400.

Брейншторм

Метод MoSCoW

Ми скористались методом MoSCow, щоб провести пріорітезацію наших рішень за категоріями must have, should have, could have, shouldn’t have. Зібрані ідеї ми презентували стейкхолдерам, що було прийнято ними дуже позитивно. Отримавши фідбек, що ми дуже класно заглибились у продукт та згенерували цікаві ідеї, ми відчули, наскільки UX-навички важливі при проєктуванні будь-якого продукту.

Метод MoSCoW

Шляхи користувача

Ми побудували основні шляхи користувача сайтом та додатком, щоб бачити послідовність інтеракцій під час планування відвідування музею, купівлі квитка та сувеніру, запису на майстер-клас.

Шляхи користувача

Сортування карток

Оскільки основна ціль нашого сайту — гарна комунікація музею з його відвідувачами, нам було важливо побудувати зрозумілу інформаційну архітектуру. Виявилось, структура сайту не така вже й проста, та на допомогу нам прийшов воркшоп Card sorting.

Сортування карток

Інформаційна архітектура

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

Інформаційна архітектура

Прототипування

Затвердивши структуру сайту зі стейкхолдерами, ми приступили до побудови ваєрфреймів, далі зробили прототипи сайту та додатку.

Вайрфрейми

Тестування

Ми провели три тестування. Нашою метою було перевірити чи зрозуміла навігація для користувача. Загалом результати тестування показали, що сайт та додаток мають зрозумілу навігацію за винятком деяких проблемних моментів:

– користувачі не одразу помічали кнопку «купити квиток»;
– формулювання текстів деяких сторінок було неочевидне.

Кнопку «купити квиток» ми винесли та закріпили її в хедері та покращили UX-writing.
Ми зрозуміли, наскільки важливим є тестування на ранніх етапах, і чим частіше — тим краще.

Тестування взаємодії з сайтом

Deliver

Пошук референсів

Референси

Style guide & UI kit

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

Style guide & UI kit

Візуальний дизайн веб-сайту

Дизайн веб-сайту

На сайті ми заклали такі можливості:

  1. Тепер відвідувач може швидко отримати інформацію про музей та його експонати.
  2. Знайти для себе чи своїх дітей цікаві активності та спланувати візит.
  3. Для тих, хто не може прийти до музею — можливість побачити його експозиції онлайн.
  4. Купівля квитка онлайн.
  5. Запис на екскурсії та майстер-класи.
  6. Покупка сувенірної продукції без черги онлайн.
  7. Інформування відвідувачів про події.
  8. Окремий розділ з активностями для дітей.
  9. Розділ для підтримки музею.
  10. Можливість підтримати конкретного майстра.
  11. Усі можливі варіанти добирання до музею.
  12. Віджет з прогнозом погоди.
  13. Зрозуміле оформлення графіка роботи.

Візуальний дизайн додатку

Дизайн додатку

У мобільному додатку ми заклали такі можливості:

  1. Навігація по території музею та інформування про зміни.
  2. Інформування про об’єкти, у тому числі у вигляді аудіогіда.
  3. Купівля квитків онлайн та зберігання їх в додатку.
  4. Покупка сувенірної продукції онлайн.
  5. Інформування відвідувачів про події.
  6. Можливість самостійно досліджувати музей.
  7. Інтерактивний квест для дітей і дорослих.
  8. Незалежність від якості зв’язку на території музею — карту та гід можна завантажити офлайн.

Тестування

Щоб провалідувати наші рішення, ми вирішили повторно провести 3 тестування офлайн (коридорні).

Виявили такі інсайти:
— всі користувачі оцінили сучасний дизайн сайту та додатку;
— послідовність купівлі квитків була неочевидною;
— користувачі довго шукали «аудіогід».

Після тестування ми покращили процес купівлі квитків, а аудіогід перенесли в розділ «інтерактив», який зробили key-feature.

Тестування

Інсайти з навчання:

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

Марго: Робота над дизайном користувацького досвіду — ітеративний процес, а не лінійний, і тут немає правильних і неправильних підходів та фреймворків, головне — чи допомагає той чи інший метод вирішити проблему.

Наталя: Коли ти навчишся робити достатньо добре, то з’явиться час на більше креативні рішення. Не забувайте, що дизайн має бути інтуїтивно зрозумілим для користувачів. Компоненти… завжди робіть компоненти 🙂

Саша: Працюючи в команді, особливо важливо знайти ту частину роботи, де твій внесок буде максимально корисним для результату.

--

--