Прототип сайта и приложения, 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 €

    Чтобы проверка UI/UX окупилась за 3 месяца, хватит

    +8,3 % к конверсии

    Сейчас сайт приносит около 3 600 € в месяц: 2 000 посетителей, из них 1,5 % покупают по 120 €. Аудит UI/UX обычно стоит 900 €.

    Цена «обычно» из прайса студии. Выручка без учёта маржи. Это порог окупаемости: рост конверсии заранее никто не гарантирует.

    Обсудить проект

    Строю что-то с нуля

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

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

    5 000 € из бюджета

    Переделать 25 % экранов после запуска значит заплатить ещё 5 000 € из 20 000 €. Кликабельный прототип обычно стоит 1 200 €, и эти правки делаются в нём до кода.

    Долю переделок задаёшь ты. Цена прототипа «обычно» из прайса студии.

    Обсудить проект

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

    Сколько человек делают интерфейс4
    Часов в неделю у каждого на подгонку экранов3 ч
    Сколько стоит твой час30 €

    Разнобой обходится в

    1 559 € в месяц

    4 человека по 3 ч в неделю по 30 € в час. Дизайн-система обычно стоит 2 650 € и окупится за 1,7 месяца.

    Часы и ставку задаёшь ты. Оценка сверху: считаем, что система снимает подгонку целиком. Цена «обычно» из прайса студии.

    Обсудить проект

    Сразу в код и сэкономить шаг?

    Пропустить прототип кажется экономией недели и пары тысяч евро. На маленьком и понятном проекте так и есть. На продукте, который ещё ищет, что нужно людям, эта экономия обычно возвращается переделкой.

    Когда можно обойтись без прототипа

    • Простой сайт с привычной структурой, например презентация компании
    • Берёшь проверенный сценарий, например стандартную корзину
    • Разработчик одновременно дизайнер, а заказчик сидит рядом
    • Это внутренний инструмент для пары человек, которые скажут, что не так

    Когда это аукнется

    • Новый продукт, где ещё проверяется, нужен ли он кому-то
    • Много экранов и ролей, и сценарий не удержать в голове
    • Фиксированный бюджет, где каждая переделка отъедает функции
    • Инвестор или руководство хотят увидеть и попробовать продукт до оплаты

    От идеи к проверенному прототипу

    1. Знаешь, что строить первым

      Созвон и объём MVP

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

    2. Видишь весь путь

      Карта страниц и сценарии

      Рисуем карту экранов и пользовательские сценарии: как человек идёт от входа к цели и где может потеряться. Здесь чаще всего вычёркиваются лишние шаги.

    3. У тебя каркас экранов

      Вайрфреймы

      Чёрно-белая раскладка каждого экрана без цвета и графики, чтобы обсуждать содержание и порядок. Правки на этом этапе занимают минуты.

    4. Держишь продукт в руках

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

      Связываем вайрфреймы в Figma в модель, которая кликается как готовое приложение, на компьютере и на телефоне. Добавляем состояния: ошибку, пустой список, загрузку.

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

      Тест на людях

      Пять-восемь человек из аудитории получают задания, а мы смотрим, где они сомневаются. Записи и выводы остаются у тебя.

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

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

      Исправляем то, что показал тест, и отдаём файлы Figma с описанием экранов. Дальше можно с нами на дизайн и разработку или с другой командой.

    Сколько стоит прототип и вайрфреймы

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

    Узнать цены

    Сначала факты, потом вкус

    Мы проектируем на фактах вместо мнений: исследование показывает, что чинить, прототип проверяет это на живых людях, а аналитика после запуска показывает, сработало ли решение. Всё держится на дизайн-системе, едином источнике правды для цвета, шрифта, отступов и компонентов, поэтому новый экран собирается за часы вместо дней, а продукт остаётся консистентным по мере роста. При передаче мы никуда не исчезаем: дизайнер остаётся на связи во время разработки, чтобы готовый продукт совпал с тем, что мы протестировали.

    О чём спрашивают чаще всего

    Что такое 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

    Отправляя форму, ты соглашаешься на обработку своих данных, чтобы мы ответили на заявку. Как мы обращаемся с данными. Данные нужны только для ответа. Не продаём и в рассылку не добавляем.