Прототип сайту й застосунку, MVP

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

Від€400за проєкт

Замовити проєктПереглянути ціни
  • 5користувачів знаходять близько 80 % проблем
  • 1-2 тиж.до клікабельного прототипу
  • 2 колаправок входять у ціну дизайну
  • €0за зміну, поки це макет

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

Тестуємо прототип на п'ятьох-вісьмох людях з аудиторії: вони отримують завдання, і ніхто їм не підказує.

Тестуємо прототип на п'ятьох-вісьмох людях з аудиторії: вони отримують завдання, і ніхто їм не підказує.

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

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

Усе малюємо в Figma й віддаємо файли повністю, тож прототип може зібрати будь-яка команда.

Усе малюємо в Figma й віддаємо файли повністю, тож прототип може зібрати будь-яка команда.

Розробники в тій самій команді, тому вже на прототипі зрозуміло, що зібрати дешево, а що ні.

Розробники в тій самій команді, тому вже на прототипі зрозуміло, що зібрати дешево, а що ні.

Усі послуги цієї категорії по-людськи

  • Дизайн взаємодії

    Як інтерфейс поводиться під час натискання, завантаження й помилки.

    Замовити проєктПорахувати ціну

    Коротко Це про поведінку інтерфейсу, не лише вигляд: стани, переходи, відгук, анімації з призначенням. Саме вона відрізняє інтерфейс, що просто працює, від того, яким приємно користуватися.

    Як ми працюємоДо кожного екрана додаємо опис: що станеться після кліку, як виглядає завантаження, порожній список і помилка. Переходи проєктуємо з чіткою метою і одразу перевіряємо, як вони працюють при увімкненому режимі «менше руху». Поведінку перевіряємо на живому прототипі, не лише на статичних макетах.

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

    Що входить у вартість

    • Стан завантаження, помилки, порожній список
    • Анімація з призначенням
    • Поважає системне «менше руху»
    • Записана поведінка замість здогадок

    Інтерактивний прототип

    Клікабельна модель продукту до початку розробки.

    Замовити проєктПорахувати ціну

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

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

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

    Що входить у вартість

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

    Входить у комплект

    Це не замовляють окремо: воно входить у будь-яку роботу, і робимо це ми.

    Вайрфрейми

    Швидкі схематичні макети без деталей: вирішують структуру й ієрархію ще до візуального дизайну. Десять дешевих переробок тут заощаджують одну дорогу переробку в готовому продукті.

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

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

    • Структура визначена до візуалу
    • Справжній контент замість тексту-заповнювача
    • Дешеві правки замість дорогої переробки
    • Основа для оцінки обсягу проєкту

    Маршрут користувача

    Схеми всіх шляхів, якими користувач іде до мети, разом з невдалими: помилки, глухі кути, кнопка «назад». Виправити сценарій на папері займає хвилини, у готовому продукті вже спринти.

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

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

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

    Карти сайту

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

    Фіксуємо, що зараз є на сайті, знаходимо адреси з відвідуваністю чи посиланнями і вирішуємо, що лишається, що об'єднується, а що зникає. У план додаємо і те, чого ще немає. При редизайні додатково звіряємо старі й нові адреси одну за одною.

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

    • Своя адреса для кожної послуги
    • Мапа переспрямувань при редизайні
    • Враховує контент, якого ще немає
    • Можна відзначати під час наповнення

    Технології

    Знайоме?

    Іван Іваненкоперша розмова

    1. Інвестор хоче побачити продукт, а в нас лише презентація

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

    3. Розробники зробили зовсім інше, ніж ми мали на увазі

    4. Текстове ТЗ кожен читає по-своєму. Прототип показує кожен екран і кожен стан, тлумачити більше нічого. Правки робляться в Figma, де забирають хвилини.

    5. Бюджет на розробку фіксований, і незрозуміло, що в нього вміститься

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

    7. Застосунок готовий, а люди в ньому блукають

    8. Помилки в сценарії дорого виправляти в коді. Новий сценарій малюємо й тестуємо в прототипі, у код іде лише версія, що пройшла тест. Розробники переписують один раз.

    У якій ситуації ти?

    Вибери свій випадок і підстав свої числа. Екран порахує, що ти втрачаєш або отримуєш.

    Люди йдуть, і я не розумію чому

    Відвідувачів на місяць2 000
    Скільки відвідувачів купують1,5%
    Середнє замовлення120 EUR

    Щоб перевірка UI/UX окупилася за 3 місяці, досить

    +8,3% до конверсії

    Зараз сайт приносить приблизно 3 600 EUR на місяць: 2 000 відвідувачів, з них 1,5% купують по 120 EUR. Аудит UI/UX зазвичай коштує 900 EUR.

    Ціна «зазвичай» з прайса студії. Виручка без урахування маржі. Це поріг окупності: зростання конверсії наперед ніхто не гарантує.

    Замовити проєкт

    Я створюю щось нове

    Бюджет на розробку20 000 EUR
    Скільки екранів, на твою думку, доведеться переробити25%

    Під ризиком переробки після запуску

    5 000 EUR з бюджету

    Переробити 25% екранів після запуску означає заплатити ще 5 000 EUR з 20 000 EUR. Клікабельний прототип зазвичай коштує 1 200 EUR, і ці правки робляться в ньому ще до коду.

    Частку переробок задаєш ти. Ціна прототипу «зазвичай» з прайса студії.

    Замовити проєкт

    Продукт розповзся в різнобій

    Скільки людей роблять інтерфейс4
    Годин на тиждень у кожного на підгонку екранів3 год
    Скільки коштує твоя година30 EUR

    Різнобій коштує

    1 559 EUR на місяць

    4 люди по 3 год на тиждень по 30 EUR за годину. Дизайн-система зазвичай коштує 2 650 EUR і окупиться за 1,7 місяця.

    Години і ставку задаєш ти. Оцінка зверху: вважаємо, що система знімає підгонку повністю. Ціна «зазвичай» з прайса студії.

    Замовити проєкт

    Одразу в код і зекономити крок?

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

    Коли можна обійтися без прототипу

    • Простий сайт зі звичною структурою, наприклад презентація компанії
    • Береш перевірений сценарій, наприклад стандартний кошик
    • Розробник водночас дизайнер, а замовник сидить поруч
    • Це внутрішній інструмент для кількох людей, які скажуть, що не так

    Коли це обернеться проти тебе

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

    Від ідеї до перевіреного прототипу

    1. Знаєш, що будувати першим

      Дзвінок і обсяг MVP

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

    2. Бачиш увесь шлях

      Карта сторінок і сценарії

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

    3. Маєш каркас екранів

      Вайрфрейми

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

    4. Тримаєш продукт у руках

      Клікабельний прототип

      Пов'язуємо вайрфрейми в Figma в модель, яка клікається як готовий застосунок, на комп'ютері й телефоні. Додаємо стани: помилку, порожній список, завантаження.

    5. Знаєш, де люди блукають

      Тест на людях

      П'ять-вісім людей з аудиторії отримують завдання, а ми дивимося, де вони вагаються. Записи й висновки залишаються в тебе.

    6. Прототип готовий

      Правки й передача

      Виправляємо те, що показав тест, і віддаємо файли Figma з описом екранів. Далі можна з нами на дизайн і розробку або з іншою командою.

    Скільки коштує прототип і вайрфрейми

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

    Переглянути ціни

    Спочатку факти, потім смак

    Проєктуємо UX/UI-дизайн на фактах: дослідження показує, що лагодити, прототип перевіряє це на живих людях, а аналітика після запуску показує, чи спрацювало. Усе стоїть на дизайн-системі, єдиному джерелі правди для кольору, шрифту, відступів і компонентів, тому нові екрани з'являються за години замість днів, а продукт лишається консистентним, поки росте. І на етапі передачі ми нікуди не зникаємо: дизайнер лишається на зв'язку під час розробки, щоб готовий продукт збігався з тим, що ми тестували.

    Про що питають найчастіше

    Що таке MVP?

    MVP (minimum viable product) означає мінімальну версію продукту, яку можна дати людям у руки й зрозуміти, чи вона їм потрібна. У ній лише функції, без яких продукт втрачає сенс. Прототип часто перший крок до MVP: перевіряє сценарій до того, як його збудують.

    Чим вайрфрейм відрізняється від прототипу?

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

    Скільки коштує прототип сайту?

    Вайрфрейми від €400, клікабельний прототип від €600, для великого застосунку зазвичай близько €1 200. Карта сайту від €250. Точну ціну назвемо після дзвінка, де порахуємо екрани й ролі. Ціна остаточна, зверху нічого не додається.

    Скільки це триває?

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

    У чому ви робите прототип?

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

    Тестуєте прототип на людях?

    Так, заради цього прототип і роблять. П'ять-вісім людей з аудиторії отримують завдання, і ми дивимося, де вони застрягають. За даними Nielsen Norman Group, п'ять учасників знаходять близько 85% проблем.

    Чи може прототип зібрати інша команда?

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

    Чи вистачить прототипу для зустрічі з інвестором?

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

    А якщо тест покаже, що ідея не працює?

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

    Категорії поруч

    Усі послуги

    Дослідження

    3 послуги

    Візуальний дизайн

    3 послуги

    Тестування і здача

    3 послуги

    Розкажи про свою задачу

    Вистачить кількох речень. Відповімо протягом кількох годин і запропонуємо час для дзвінка.

    1. 1За кілька годин: відповість людина, поділиться першими думками й, можливо, поставить кілька питань.
    2. 2За кілька днів: дзвінок на 30 хвилин. Безкоштовно й ні до чого не зобов’язує.
    3. 3Після дзвінка: кошторис із фіксованою ціною. Або чесна відповідь, що ми тобі не підходимо, і порада, до кого звернутися.

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

    Алергія на форми? Розуміємо.info@chronicles.cz+420 773 230 278

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