Як дизайн-підписка Ambi допомогла клієнту масштабувати дизайн-напрям

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

У цей момент вони обрали модель дизайн-підписки з Ambi — і ми одразу взяли на себе всю операційну дизайн-роботу: від складних продуктових вайрфреймів до повних UI-концептів.

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

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

Тиждень 1 — старт і перші концепти

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

• Project №1 — wireframe + 3 візуальні концепції
• Project №2 — wireframe + 3 візуальні концепції

25 годин

Коли базовий стиль і формат взаємодії стали зрозумілі, ми перейшли до глибшої роботи. Тут з'явився новий цікавий проєкт (№3), суть якого створювати дизайн монет за допомогою ШІ і потім ці монети користувач мав змогу замовити собі. Наша задача була вивчити конкурентів і розробити інтерфейс кабінету для цього продукту, на базі отриманих знань про ринок і нішу

Тиждень 2

• Project №3 — аналіз конкурентів, 3 варфрейми та 2 дизайн-концепти
• Project №1 — 7 повноцінних сторінок дизайну по обраній концепції

28 годин

Тиждень 3 — адаптиви та системність

На цьому тижні наш фокус був лише на одному проєкті (№1), бо там були стилсі терміни реалізації

• Project №1 — 3 нові сторінки та мобільна адаптація всіх сторінок

31 година

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

Щоб повернути керованість проєкту, ми взяли на себе повну реконструкцію дизайну. Через стислі терміни, над проєктом працювало одразу 3 дизайнери:

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

Тиждень 4

• Project №4 — переніс 25 сторінок + PDF-документ з фіксацією покращень

38 годин

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

На кожній ітерації було запропоновано 2 концепції. Ми отримували екологічний, структурований фідбек і робили наступний підхід. Наша основна задача - зробити якісний продукт, щоб замовник залишився на 100% задоволений

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

Тут особливо немає що відокремити. Цей етап - це довга та кропітка робота, враховуючи кількість сторінок. З боку клієнта були затримки по підготовці контенту, тому весь процес був достатньо довготривалий. Але наша команда і команда замовника впорались с задачею на відмінно

Зробивши всі макети, дизайнери підготували UI-kit та затвердили референси по анімації ключових секцій сайту. Далі був спільний дзвінок з командою розробників і замовником, де були передані всі матеріали

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

Перед стартом робіт із верстки для зручності та монументальності проєкту ми створюємо style guide, де визначені всі службові класи для заголовків, текстових блоків, кнопок, зображень тощо. Також перед початком роботи важливо визначитись з типом верстки та поведінкою сайту на різних типах десктоп пристроїів (1440, 1920, 2560 тощо). Наш варіант - гумова верстка з адаптивами на брейкпоінтах. Максимальна ширина контейнера — 1380 пікселів.

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

Далі ми приступили до проєктування Webflow CMS. Якихось складних вимог до системи управління контентом не висувалося, тому робота рухалася швидко. Водночас для нас було важливо забезпечити максимальну зручність експлуатації CMS клієнтом, який не пов’язаний із IT. Тому все мало бути максимально зрозумілим. Кожне поле бази даних ми називали та описували. Усе вторинне або не для клієнтського використання — позначали.

Коли весь проєкт був зверстаний, ми знову відправили його на рев’ю клієнту. Так, ми надаємо перевагу тісній взаємодії з клієнтом, щоб:

• Він був спокійний, бачив динаміку роботи та знав, на якому етапі ми перебуваємо.
• Залишався емоційно залученим у процес

В останню чергу ми приступили до створення анімаційних сценаріїв. Традиційно, ми використовували нативну анімацію Webflow і, звісно, бібліотеку GSAP (для анімації заголовків і головних екранів сторінок). А також SplideJS для реалізації слайдерів.

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

Загалом проєкт налічує 27 статичних сторінок і 4 CMS-колекції (відповідно, 4 унікальні динамічні сторінки). Загальна тривалість реалізації - близько 16 місяців, що є рекордним терміном реалізації для нашої команди. Але це було пов’язано з особливою завантаженістю клієнта та відсутністю можливості швидко надавати зворотний зв’язок. Для нас комфорт клієнта — передусім, тому доводилося пристосовуватися.

Якщо вам цікава тема дедлайнів і їхнього впливу на результат, пропонуємо вам прочитати нашу статтю: “Терміни реалізації веб-проєктів: як клієнт і підрядник можуть вплинути на дедлайни”

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

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