Прототипування і проектування сайту

Проектування інтерфейсів, прототипування, створення UI, UX

53прототипа великих проектів
9прототипів SAAS и особистих кабінетів
200годин на розробку великого прототипу
Детальніше
Нагороди 6 нагород 4 номінації в UI/UX
рейтинги Рейтинг Evergreen — ITRating Рейтинг Evergreen — CMSMagazine Рейтинг Evergreen — WRate.net

Що таке MVP та прототип?

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

Відповіддю на ці питання є розробка прототипів і MVP-версій.

Прототип

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

Прототип

Подивіться приклад прототипу

Подивитися

MVP - minimum vailable product

— Мінімальна версія проекту, яку можна показувати партнерам, потенційним клієнтам, де вони можуть випробувати вашу ідею на собі і сказати наскільки вона їм подобається

MVP - minimum vailable product

Почитайте докладніше про концепцію MVP

Почитати

Чому у Evergreen виходять якісні прототипи і MVP

slogan-img

Гортайте, щоб побачити інші причини

  1. Ми не робимо сервіси "наосліп" - до початку проекту ми аналізуємо конкурентів, продукт, аналоги і виділяємо головні сильні сторони і те від чого ми повинні відрізнятися
  2. На етапі прототипування над проектом працює команда, яка детально опрацьовує портрети користувачів, розробляє карту поведінки користувача на проекті і шукає оптимальні способи реалізації завдань користувача
  3. Під запит на розробку цілковито нової концепції сайту з акцентом на зручність для користувачів у нас є відпрацьований техпроцес проектування user experience щоб був такий зовнішній вигляд, який допомагає відвідувачам здійснювати цільові дії: запити, купівлі, дзвінки і т.п.
  4. Ми обов'язково проектуємо інтерфейс на всі пристрої з якими будуть працювати користувачі (телефон, планшет, ПК, широкоформатний монітор) і адаптивна версія входить у вартість проекту
  5. Ми максимально використовуємо свій досвід, отриманий на багатьох проектах, для того щоб запропонувати найкращі рішення для проекту
  6. Фактично на всіх етапах ми створюємо єдину робочу групу з вами, яка спільно приймає найважливіші рішення, залучаючи користувачів проекту та розробку, що дозволяє збільшити кількість і якість нових ідей і створити кращий прототип
  7. Ми слідуємо найкращим практиками (створення user stories, мокап, прототипу, ui-kit, вимог до front-end і сама розробка, контроль якості та управління проектом) і підвищуємо рівень стандартів в роботі над проектом, забезпечуємо надійний результат, який зможе служити компанії роки без старіння
  8. Наш формат роботи передбачає, що ми знаходимо рішення для вашого завдання, а не виступаємо як "руки" - таким чином вашу увагу нам потрібно для затвердження рішень і того щоб вказати на ключові точки в вашій специфіці, все необхідне для вироблення рішення ми робимо самі і це економить ваш час
  1. Ми не робимо сервіси "наосліп" - до початку проекту ми аналізуємо конкурентів, продукт, аналоги і виділяємо головні сильні сторони і те від чого ми повинні відрізнятися
  2. На етапі прототипування над проектом працює команда, яка детально опрацьовує портрети користувачів, розробляє карту поведінки користувача на проекті і шукає оптимальні способи реалізації завдань користувача
  3. Під запит на розробку цілковито нової концепції сайту з акцентом на зручність для користувачів у нас є відпрацьований техпроцес проектування user experience щоб був такий зовнішній вигляд, який допомагає відвідувачам здійснювати цільові дії: запити, купівлі, дзвінки і т.п.
  4. Ми обов'язково проектуємо інтерфейс на всі пристрої з якими будуть працювати користувачі (телефон, планшет, ПК, широкоформатний монітор) і адаптивна версія входить у вартість проекту
  5. Ми максимально використовуємо свій досвід, отриманий на багатьох проектах, для того щоб запропонувати найкращі рішення для проекту
  6. Фактично на всіх етапах ми створюємо єдину робочу групу з вами, яка спільно приймає найважливіші рішення, залучаючи користувачів проекту та розробку, що дозволяє збільшити кількість і якість нових ідей і створити кращий прототип
  7. Ми слідуємо найкращим практиками (створення user stories, мокап, прототипу, ui-kit, вимог до front-end і сама розробка, контроль якості та управління проектом) і підвищуємо рівень стандартів в роботі над проектом, забезпечуємо надійний результат, який зможе служити компанії роки без старіння
  8. Наш формат роботи передбачає, що ми знаходимо рішення для вашого завдання, а не виступаємо як "руки" - таким чином вашу увагу нам потрібно для затвердження рішень і того щоб вказати на ключові точки в вашій специфіці, все необхідне для вироблення рішення ми робимо самі і це економить ваш час

Чому у Evergreen виходять якісні прототипи і MVP

Процес починається з аналізу і постановки вимог

Первинний аналіз конкурентів, юзабіліті аудит, аналіз даних Google Analytics і Яндекс.Метрики ресурсу.

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

На цьому етапі ми даємо конкретні рекомендації для проекту які ми далі реалізуємо в прототипі

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

Проведення опитування - враховуємо побажання існуючих і потенційних користувачів

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

Приклад такого документа для адмін-панелі сервісу (анонімізувати і скорочений з міркувань етики), цей документ ретельно готувався з маркетологами і технічними фахівцями клієнта, містить питання, пов'язані з користуванням адмін-панеллю сервісу і має зрозумілі варіанти відповіді.

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

Розробка персон

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

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

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

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

Розробка User Stories, User Flow

User Story - докладний список того що користувач може робити на сайті, User Flow - очікуваний алгоритм дії користувача.

Розробка KPI для прототипу

Постановка індикаторів ефективності (KPI) за якими ми будемо визначати що прототип досягає мети. Приклади KPI: збільшення кількості бронювань, збільшення швидкості оформлення бронювання, швидкість пошуку, швидкість отримання результатів, зростання числа позитивних відгуків від користувачів і тощо

Результати етапу аналітики

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

Створення прототипу, архітектури проекту і формування специфікації

Зазвичай для великих і середніх проектів ми дотримуємося такої послідовності:

Проектування інтерфейсу в мокап - за нашим досвідом, для великих проектів становить 8-10 ітерацій прототипування. Тут процес будується таким чином, що на початкових ітераціях ми працюємо з дуже грубими начерками і послідовно покращуємо і уточнюємо з кожним наступним підходом.
Після розробки мокап ми робимо детальне прототипування кількох обраних розділів - висока деталізація всіх елементів з урахуванням динамічних форм, адаптивного дизайну під різні дозволи екрану.
Фіксація і проектування структур даних для front-end (які дані на яких сторінках мокап використовуються, контроль, що ми не зробили щось не реалізовуються або алогічне, і врахували всі особливості);
Проектування архітектури front-end - схема обміну даними з back-end (опис і узгодження з розробкою куди конкретно на які вузли бекенд фронт передає дані), начерк архітектури front-end (що зберігаємо в local storage, що запитуємо у сервера, структура класів і модулів front-end);
R&D front-end розробки всіх складних і невідомих моментів (потрібно на випадок, якщо за підсумками проектування потрібно використовувати незвичайний тех.стек або незнайомі компоненти);

QA і тестування прототипу

Як ми перевіряємо якість протипу і перевіряємо досягнення поставлених цілей:

Quality Assuarance (QA) прототипу

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

Тестування на користувачів, usability аудит

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

За допомогою отриманих від тестування даних, ми можемо відповісти на питання: "Чи змогли ми досягти поставленої нам мети?"

Тестування проекту після запуску

Після здачі проекту клієнту, ми на сайтах або веб-проектах відстежуємо поведінку користувачів за допомогою Яндекс.Метрики (Вебвізор, карти Скрол, кліків) і Google Analytics (аналізуємо поведінкові звіти GA), ми це робимо для того щоб переконатися в тому, що наша задумка на проект працює.

Ви хочете розробити новий сайт або сервіс?

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