Дизайн SaaS
Продукти, які відкривають щодня і з яких не хочеться йти. Проєктуємо SaaS від першого сценарію до повної дизайн-системи і розробляємо, коли це потрібно.
Що ви отримуєте
Продуктова стратегія
Для кого продукт, що має вміти перша версія і що може почекати. Обсяг робіт, який ви зможете захистити перед інвесторами і командою.
Сценарії та інтерфейс
Онбординг, дашборди, налаштування, оплата, порожні стани. Кожен екран, який бачить реальний користувач, а не лише красиві обкладинки.
Дизайн-система
Компоненти, токени, світла і темна теми, задокументовані у Figma. Нові екрани займають години, а не тижні. Моушн-специфікації з Adobe After Effects.
Розробка
Next.js, React, TypeScript і Supabase для веб-застосунку, нативний iOS-застосунок на SwiftUI, коли продукт живе в телефоні, Webflow для маркетингового сайту. Розробка разом із Claude Code тримає темп.
AI-функції
Функції на основі великих мовних моделей: введення звичайною мовою, AI-планування, підсумки і MCP-конектори, щоб клієнти користувались вашим продуктом прямо з Claude.
З чого починається SaaS-проєкт
Перший тиждень іде на розуміння. Вивчаємо продукт і те, що вже зроблено, потім ринок: прямих конкурентів та інструменти навколо них.
Далі перші ескізи. Іноді нова карта сайту, коли треба змінити структуру розділів. Іноді ієрархія інформації ще до прототипу: що йде першим, що нижче, що згортається у список і яким шрифтом це подати. Часто тиждень закінчується дизайн-концептом головного екрана, зазвичай дашборду, або лендингу, коли продукту потрібне зростання. Потім концепт масштабується на всі сторінки.
Дашборди та складні інтерфейси
У лендингу одне завдання і одна кнопка, яка повторюється, доки відвідувач не діє. На екрані продукту може бути сорок дій: додати, змінити, відфільтрувати, призначити, вивантажити. Наша робота розкласти їх так, щоб усе легко знаходилось і нічого не кидалось в очі одночасно.
Починаємо з результату. З чим користувач має піти? В Aimgod це день виконаних задач і нічого не забуто, тому список задач став головним екраном, вбудованим у ширший напрям особистого зростання. У Spillsjakk це шаховий турнір, налаштований і проведений з одного місця. З результату виростає ієрархія: головні функції першими, другорядні на крок далі.
На практиці
У Spillsjakk список гравців вміщує десятки функцій і не перевантажує екран. П’ять сторінок старого інтерфейсу стали однією: списки, що згортаються, вікно кожного гравця з усією історією і суперниками, перехід між гравцями в один клік, досягнення у вигляді графіків. Працювати швидше, розуміти значно легше.
Aimgod побудований на трьох рівнях фокусу. Довгий фокус зберігає думки на все життя: цитату чи рядок із книги, збережені з фото і відкриті на весь екран. Середній фокус тримає цілі на місяць і рік. Короткий фокус це сьогодні, із задачами, прив’язаними до цих цілей. Кожна частина працює сама по собі, а жорсткі правила з’являються лише там, де допомагають: етапи цілі відкриваються один за одним. Час задачі ставиться у два дотики.
Наші роботи
Aimgod
Система особистого розвитку. Продуктовий дизайн, full stack веб-застосунок і нативний застосунок для iPhone на SwiftUI. Обидва вже працюють.
Spillsjakk
Платформа шахових турнірів для Норвезької шахової федерації. Продуктовий дизайн і дизайн-система на понад 150 екранів.
Basebank
Концепт мобільного банку. Брендинг, інтерфейс, дизайн-система і моушн.
Чому Creayou
Бутикова студія дизайну і розробки SaaS. Кілька людей, десятиліття в ремеслі і справжня любов до роботи.
Спершу дизайн
З дизайну ми почали 22 роки тому. Кожен проєкт отримує власний дизайн, який виглядає дорого і запам’ятовується, з моушном і мікроанімаціями, зробленими вручну.
Ніколи не повторюємось
Багато студій беруть один перевірений макет для всіх клієнтів. Кожен наш проєкт отримує свою структуру, навігацію і візуальну мову, побудовані навколо того, хто купує і чому.
Сенс замість списку функцій
Сторінки та інтеграції сьогодні зробити легко. Продає інше: ясне розуміння покупця, інформація в правильному порядку і смак у кожній деталі.
Одна людина від брифу до запуску
Засновник, який проєктує ваш продукт, сам пише бриф, спілкується з вами і веде розробку. Нічого не губиться між продажами, дизайном і розробкою.
Трохи більше, ніж просили
По ходу роботи підказуємо, що ще може спрацювати для вашого бізнесу. Ви йдете з ясним баченням наступних кроків.
Як ми працюємо
Знайомство
Довгі розмови з вами, ваш поточний сайт, конкуренти. Записуємо цілі і сьогоднішні цифри, зокрема конверсію, щоб було з чим порівнювати.
Мудборд
Вручну зібрана дошка з найкращих сайтів світу, що пасують вашій аудиторії, стилю і кольорам. Погоджуємо напрям ще до першого екрана.
Концепція
Два-три варіанти ключової сторінки, зазвичай головної або дашборду. Ви обираєте один, і він задає мову для всього іншого.
Дизайн
Кожна сторінка і кожен стан, десктоп і мобільний, на одній системі, тож нові сторінки збираються швидко.
Розробка
Webflow для маркетингових сайтів, Next.js або React для продуктів, нативний iOS, коли продукт живе в телефоні. Разом із Claude Code, моушн і швидкість для нас частина дизайну.
Тестування
Автотести плюс ручна перевірка на реальних телефонах, ноутбуках і комп’ютерах, доки все не працює як слід.
Запуск
Ви затверджуєте, ми передаємо всі акаунти, файли і права, з текстовими і відеоінструкціями для вашої команди.
Розвиток
Search Console, аналітика, SEO, реклама за потреби, щомісячний звіт із цифрами, статті для блогу з ваших матеріалів. Щомісяця, раз на рік або за запитом.
Питання
З ким ви працюєте найкраще?
Із засновниками і невеликими командами на три-п’ять людей, у яких уже є клієнти і які готові інвестувати в зростання: новий дизайн продукту, сильніший сайт, рекламу і пошук. Більшість наших клієнтів зі США та Європи.
Скільки коштує MVP?
Від $10 000, зазвичай один-два місяці від перших ескізів до робочого продукту.
Чи працюєте ви зі стартапами на ранній стадії?
Так. Багато проєктів починаються з ідеї та презентації. Допомагаємо сформувати MVP, щоб він вийшов швидко і при цьому виглядав як компанія, якій можна довіряти.
Чи можете ви оновити продукт, який уже працює?
Так. Починаємо з аудиту продукту і його цифр, потім покращуємо екран за екраном, не зупиняючи ваших релізів.
Чи передаєте ви роботу нашим розробникам?
Так. Ви отримуєте задокументовану дизайн-систему у Figma і специфікації. Ми на зв’язку, поки ваша команда розробляє, або розробляємо самі.
Скільки це триває?
Дизайн MVP зазвичай займає чотири-вісім тижнів. Повна дизайн-система для зрілого продукту довше. Етапи погоджуємо до старту.
На якому стеку ви розробляєте?
Next.js, React, TypeScript, Tailwind і Supabase на Vercel для веб-застосунків, SwiftUI з віджетами і Live Activities для iOS, Paddle або покупки в App Store для оплат, Resend для листів. Наш продукт Aimgod працює саме на цьому стеку.
Як ви використовуєте AI?
Дизайн робимо руками: ідеї, сценарії, інтерфейс і кожну деталь вирішують люди. AI бере на себе рутинну інженерію. Ми розробляємо з Claude Code, систематизуємо з ним дизайн-токени, пишемо тести і перевіряємо збірки на відповідність правилам платформ. Тож проєкти виходять швидше, а зекономлений час іде на шліфування.