кейси
Як спроєктувати
UX-архітектуру продукту з мільйонами користувачів
UX-архітектуру продукту з мільйонами користувачів
Кейс від Яра Бірзула і його студентів
Як утримати все в голові, якщо треба спроєктувати архітектуру великого продукту з мільйонами користувачів у десятках країн? Блок-схеми з бізнес-моделями, UML-діаграми, об'єктно-орієнтоване проєктування в дії, матриці класів та ролей, ментальні карти, дизайн-системи, проєктування діаграм потоків даних. Ось скільки кроків потрібно пройти, перш ніж розробляти сам інтерфейс.
15 студентів курсу UX Architecture у Projector протягом трьох місяців пробували знайти відповідь і спроєктувати два продукти для конструктора сайтів Weblium. Працювали вечорами і на вихідних, паралельно зі щоденною роботою. Як вони справилися із завданням, розповідає директор з продукту Robota.ua і куратор курсу Яр Бірзул.
15 студентів курсу UX Architecture у Projector протягом трьох місяців пробували знайти відповідь і спроєктувати два продукти для конструктора сайтів Weblium. Працювали вечорами і на вихідних, паралельно зі щоденною роботою. Як вони справилися із завданням, розповідає директор з продукту Robota.ua і куратор курсу Яр Бірзул.
Weblium — інструмент, за допомогою якого будь-хто може зібрати собі сайт. Він особливий тим, що працює за моделлю «Зробіть для мене», поки інші сайтбілдери використовують схему «Зроби собі сам». Тобто більшість сайтів на Weblium створюють спеціальні студії, які знають інструмент на всі 100%.
Бізнес хоче виходити на міжнародні ринки. Особливо керівники Weblium зацікавлені в країнах BRICS (Бразилія, Росія, Індія, Китай, Південна Африка), які потребують дешевих, однак професійних сайтів для локальних бізнесів.
Для міжнародної експансії потрібні дві речі: якісний продукт та вебстудії, які будуть за допомогою інструментів Weblium створювати сайти для клієнтів і працюватимуть за певними стандартами якості.
Власники вирішили реалізовувати свої плани за допомогою франшизи, при якій сотні студій з усього світу працюватимуть в одному інструменті, з єдиними стандартами та процесами реалізації. Однак замість розповсюджених рушіїв для створення сайтів (на кшталт WordPress або Magento) користуватимуться сайтбілдером від Weblium.
Бізнес хоче виходити на міжнародні ринки. Особливо керівники Weblium зацікавлені в країнах BRICS (Бразилія, Росія, Індія, Китай, Південна Африка), які потребують дешевих, однак професійних сайтів для локальних бізнесів.
Для міжнародної експансії потрібні дві речі: якісний продукт та вебстудії, які будуть за допомогою інструментів Weblium створювати сайти для клієнтів і працюватимуть за певними стандартами якості.
Власники вирішили реалізовувати свої плани за допомогою франшизи, при якій сотні студій з усього світу працюватимуть в одному інструменті, з єдиними стандартами та процесами реалізації. Однак замість розповсюджених рушіїв для створення сайтів (на кшталт WordPress або Magento) користуватимуться сайтбілдером від Weblium.
Це схоже на бізнес-модель McDonalds. Завдання власників франшизи — розробити стандарти та донести відповідальність до кінцевих власників конкретного Маку, щоб клієнти могли отримати однаковий бургер і в США, і в Таїланді. Так, щоб мало хто замислювався, що майже кожен McDonalds має свого власника, бо працюють вони однаково.
Найскладніше — забезпечити якісну безперервну роботу кількох сотень студій з усього світу, оскільки за моделлю франшизи всі її учасники працюють за правилами та принципами, які встановив власник франшизи. Особливе занепокоєння викликають студії з Китаю, відомі своїм специфічним менталітетом.
Щоб запустити франшизу й почати міжнародний прорив, компанії потрібно мати два цифрових продукти під кодовими назвами:
Щоб запустити франшизу й почати міжнародний прорив, компанії потрібно мати два цифрових продукти під кодовими назвами:
1
Студіомат — інструмент для щоденної роботи всередині конкретної студії, яка працює під вивіскою «Weblium». Туди потрапляють потенційні клієнти, які хочуть мати власний сайт. У цій системі студії збирають вимоги й перетворюють їх на робочі сайти за певним процесом та SLA, які їм диктує франшиза. Передбачається, що система буде зручною для продавців, акаунт-менеджерів, служби підтримки, артдиректорів і спеціалістів зі збирання сайтів. Усіх, хто з боку студії задіяний у створенні сайтів для клієнтів.
2
Франшизомат — інструмент для власника франшизи та співробітників. У ньому вони аналізують показники всіх студій, та намагаються знайти найкращі практики, щоб поширити їх на всіх учасників франшизи. У цьому ж сервісі налаштовують процес, за яким працює кожна студія, і тестують його варіації.
Саме з пропозицією спроєктувати ці два інструменти на курсі UX Architecture до мене звернувся генеральний директор Weblium David Braun. 15 студентів-дизайнерів інтерфейсів розбилися на 5 команд, кожна з яких після трьох місяців воркшопів запропонувала своє рішення для Студіомату і Франшизомату.
Команди дизайнерів швидко усвідомили, що обидва проєкти — це одна система. Різняться лише інтерфейси роботи і цільові аудиторії, а дані — ті ж. Конкретна студія бачить тільки своє господарство, а власник франшизи працює з усіма даними.
Проєктування таких великих продуктів без системного підходу — прямий шлях до катастрофи, тому студенти насамперед опитали власника студії та власника Weblium.
Так вони зібрали та систематизували необхідну для старту інформацію.
Команди дизайнерів швидко усвідомили, що обидва проєкти — це одна система. Різняться лише інтерфейси роботи і цільові аудиторії, а дані — ті ж. Конкретна студія бачить тільки своє господарство, а власник франшизи працює з усіма даними.
Проєктування таких великих продуктів без системного підходу — прямий шлях до катастрофи, тому студенти насамперед опитали власника студії та власника Weblium.
Так вони зібрали та систематизували необхідну для старту інформацію.
Результати опитування від команди FixUX (Іра Ангелюк, Марина Акользіна, Євген Висоцький)
Після того ми ретельно проаналізували майбутню бізнес-модель учасників франшизи і виклали її у вигляді блок-схеми. Вона допомагала проєктувати продукт, націлений на підвищення ефективності роботи студій.
Діаграма бізнес-процесу роботи студії від команди FixUX
Коли студенти зрозуміли, в який спосіб працюватиме бізнес, прийшов час проєктувати продукти для обслуговування франшизи.
Базою курсу є Об'єктно-орієнтовне проєктування (ООП). Усе за класикою: ролі користувачів, класи та екземпляри об'єктів, їх властивості та методи взаємодії з ними. Утримати в голові кожну деталь — дуже складно. Щоб уникнути помилок, студенти склали так звану мегаматрицю. Вона дозволила спроєктувати дійсно цілісну систему, яку можна розвивати та масштабувати.
Базою курсу є Об'єктно-орієнтовне проєктування (ООП). Усе за класикою: ролі користувачів, класи та екземпляри об'єктів, їх властивості та методи взаємодії з ними. Утримати в голові кожну деталь — дуже складно. Щоб уникнути помилок, студенти склали так звану мегаматрицю. Вона дозволила спроєктувати дійсно цілісну систему, яку можна розвивати та масштабувати.
Матриця класів та ролей від команди CMD3 (Андрій Павлов, Павло Салига, Міша Дудар)
Мегаматриця логічним способом допомогла зрозуміти структуру майбутніх продуктів — їхню навігацію та інформаційну архітектуру. Її виклали у вигляді ментальних карт.
Структура продукту Франшизомату від команди SpaceUX (Юля Єфанова, Руслан Гопкало, Андрій Бондар)
Можна помітити, що обидва продукти мають декілька типів користувачів. Кожен виконує свою роботу та має певні потреби й болі, які вирішує за допомогою Студіомату та Франшизомату. Тому ми провели зустріч з реальними майбутніми користувачами системи, де студенти вперше зіткнулися з реальністю і зрозуміли, що багато чого потрібно переосмислити. У результаті дизайнери спроєктували всі зв'язки між користувачами та об'єктами в системі.
Діаграма зв'язків у системі від команди CMD3
Будь-який цифровий продукт — це інструмент для роботи з даними. Їх хтось вносить у систему, вони генеруються автоматично або імпортуються з зовнішніх джерел. Для проєктування якісного продукту важливо розуміти, які дані в наявності, звідкіля вони з'являються і де виводяться. Інакше дизайнер може пропонувати лише візуальні концепції, а від проєктувальника очікуєш продуктових рішень, які невідкладно підуть у розробку. Щоб розібратися в даних майбутніх продуктів, команди створили діаграми потоків даних, на яких візуально зрозуміло, що звідкіля береться, де зберігається, та куди передається.
Діаграма потоків даних у поєднаній системі Студіомату та Франшизомату від команди CMD3
«Найцінніший досвід з дизайну за останні роки», — Міша Дудар, випускник курсу, який на кожне заняття їздив із Тернополя та назад.
Інтерфейс
Після того, як зібрали та організували інформацію про майбутній продукт, настає час перейти безпосередньо до створення інтерфейсу.
Кожен продукт працює згідно з певною бізнес-логікою та реагує на дії користувачів відповідно. Не передбачивши її, проєктувальник не зможе створити цілісний інтерфейс. Тому важливо цю логіку документувати за допомогою UML-діаграм, що й стало наступним кроком студентів.
Інтерфейс
Після того, як зібрали та організували інформацію про майбутній продукт, настає час перейти безпосередньо до створення інтерфейсу.
Кожен продукт працює згідно з певною бізнес-логікою та реагує на дії користувачів відповідно. Не передбачивши її, проєктувальник не зможе створити цілісний інтерфейс. Тому важливо цю логіку документувати за допомогою UML-діаграм, що й стало наступним кроком студентів.
Логіка поведінки інтерфейсу виводу коштів в Студіоматі від команди FixUX
Коли логіка роботи продукту достеменно відома, час виробляти свої інтерфейсні рішення та перевіряти їх у бойових умовах. Тож команди створили прототипи своїх продуктів за методом прогресивного джипегу. Усе проходило ітеративно: спочатку прототипи доволі прості, а з часом стають все більш деталізованими та інтерактивними.
Інтерактивний прототип Франшизомату від команди SpaceUX
Коли прототипи стали схожими на фінальні, настав час зіткнути студентів з реальністю ще раз. Для цього ми провели швидкі сесії коридорного тестування: члени команд хапали в Проджекторі незнайомих з продуктами людей і просили їх виконати кілька тестових сценаріїв, кожен з яких складався з 4-7 абстрактних завдань. Дизайнери спостерігали, як респонденти виконували ці завдання, після чого робили висновки і переробляли свої нібито «робочі» рішення. Так відбулося декілька разів.
Команди CMD3 та SpaceUX проводять одну зі своїх тестових коридорних сесій. Приклад запису такої сесії.
«Ці три місяці спочатку були складними і незрозумілими, а потім просто дуже складними», — Юля Єфанова, падаван першого випуску UXA.
Оптимізація інтерфейсів
Студіомат і Франшизомат створюються з конкретною егоїстичною метою — потрібно, щоб студії виконували свою роботу максимально швидко, а власник франшизи миттєво дізнавався про корисні і погані інсайти (щоб розповсюдити їх на інших учасників або провести роботу над помилками).
Коли команди доопрацювали інтерактивні прототипи інтерфейсу до необхідного просмаження, прийшов час оптимізувати їх, щоб всі операції виконувалися швидко і дешево. Для цього студенти провели декілька сесій операційного тестування, яке допомогло прискорити більшість сценаріїв роботи з продуктом на 200-300%.
Оптимізація інтерфейсів
Студіомат і Франшизомат створюються з конкретною егоїстичною метою — потрібно, щоб студії виконували свою роботу максимально швидко, а власник франшизи миттєво дізнавався про корисні і погані інсайти (щоб розповсюдити їх на інших учасників або провести роботу над помилками).
Коли команди доопрацювали інтерактивні прототипи інтерфейсу до необхідного просмаження, прийшов час оптимізувати їх, щоб всі операції виконувалися швидко і дешево. Для цього студенти провели декілька сесій операційного тестування, яке допомогло прискорити більшість сценаріїв роботи з продуктом на 200-300%.
Приклад результатів операційного тестування в декілька ітерацій
Основні завдання хорошого дизайн-інженера — покращувати продукт і полегшувати подальшу розробку, щоб якомога швидше випустити проєкт для користувачів.
Дизайн-система
Окрім іншого, важливо підтримувати консистентність продукту — візуальну та функціональну одноманітність, щоб користувачі швидко навчалися, а розробники могли використовувати повторно свої напрацювання. Для цього важливо мати дизайн-систему.
Дизайн-система
Окрім іншого, важливо підтримувати консистентність продукту — візуальну та функціональну одноманітність, щоб користувачі швидко навчалися, а розробники могли використовувати повторно свої напрацювання. Для цього важливо мати дизайн-систему.
Дизайн-система — це все: від атомарної системи готових компонентів до тону повідомлень в інтерфейсі. Усе, з чим стикається користувач.
Деякі з команд вирішили використати готові системи, інші — створили свої.
Дизайн Франшизомату від команди SpaceUX. Роздивитися
Однією з найважливіших частин будь-якої дизайн-системи є бібліотеки компонентів. Існує декілька відомих підходів. На курсі студенти практикувалися в БЕМ та Атомарному дизайні і розробили власні декомпозовані бібліотеки елементів у Figma. Це дозволило прискорити створення макетів у рази і відволіктися від дурної роботи на користь прийняття важливих продуктових рішень.
Командна робота
Командна робота
Система компонентів команди для Франшизомату від команди CMD3. Детальніше
Розробка продукту — дорога. Робота дизайн-інженера триває в рази менше. Він на старті роботи над продуктом знає його краще за інших, тому одна з його задач — поширювати серед членів продуктової команди знання про те, як продукт повинен працювати. Так дизайнер економить час на розробку та прискорює запуск продукту в люди.
Тому саме гарний продуктовий дизайнер починає документування системи. Студенти курсу підготували всі необхідні для розробника матеріали. Зокрема, описали бізнес-логіку в User Story (в одному з курсових проєктів їх нарахували 188), а також підготували специфікації для фронтендерів та бекендерів.
Результати
Клієнт взяв у розробку найкращий курсовий проєкт від команди CMD3. «За гроші на аутсорсі ви такий рівень пропрацювання не отримаєте», — прокоментував клієнт першого випуску курсу Девід Браун.
За лінками можна розглянути рішення трьох дизайн-команд:
SpaceUX
Дизайн. Прототип. Документація.
FixUX
Дизайн. Прототип. Документація.
CMD3
Дизайн. Прототип. Документація.
27 інтенсивних воркшопів протягом трьох місяців дали п'ятнадцятьом дизайнерам досвід роботи з великим і складним продуктом. Більшість студентів до середини курсу покращили умови своєї роботи, а по завершенні — багато випускників отримали вигідні пропозиції від українських та міжнародних продуктових компаній та успішно в них себе проявили. Одного запросив до себе Weblium.
Тому саме гарний продуктовий дизайнер починає документування системи. Студенти курсу підготували всі необхідні для розробника матеріали. Зокрема, описали бізнес-логіку в User Story (в одному з курсових проєктів їх нарахували 188), а також підготували специфікації для фронтендерів та бекендерів.
Результати
Клієнт взяв у розробку найкращий курсовий проєкт від команди CMD3. «За гроші на аутсорсі ви такий рівень пропрацювання не отримаєте», — прокоментував клієнт першого випуску курсу Девід Браун.
За лінками можна розглянути рішення трьох дизайн-команд:
SpaceUX
Дизайн. Прототип. Документація.
FixUX
Дизайн. Прототип. Документація.
CMD3
Дизайн. Прототип. Документація.
27 інтенсивних воркшопів протягом трьох місяців дали п'ятнадцятьом дизайнерам досвід роботи з великим і складним продуктом. Більшість студентів до середини курсу покращили умови своєї роботи, а по завершенні — багато випускників отримали вигідні пропозиції від українських та міжнародних продуктових компаній та успішно в них себе проявили. Одного запросив до себе Weblium.
Джерело: Telegraf.design
Courses
Сподобалась стаття?
