Як я переробив mommyrefuel.comу справжній продуктовий сайт за один день

Чому старий сайт треба було замінити

Mommy Refuel, як і більшість проєктів, починався з однієї сторінки зі скролом: хіро-блок, пітч, форма для листа очікування. Для того, щоб показати ідею людям на старті, цього вистачало. Але коли за цим уже стояв справжній продукт — реальний Refuel Score, реальний чек-ін, реальне Care Circle — сайт усе ще виглядав як обіцянка, а не як щось, що можна побачити.

Частину літа я вже витратив на те, щоб додати руху й полірування до тієї старої структури: власний курсор, магнітні кнопки, кінематографічну завісу, яка піднімається при завантаженні. Дещо з цього вийшло того ж ранку (PR #11, PR #12). Виглядало краще. Але форма все одно була не та. Одна сторінка не витримує продукт з такою кількістю окремих, чесних частин — приватність, безпека, ШІ, сімейні функції — без того, щоб перетворитися на дуже довгий скрол, який ніхто не дочитує.

Що відбувалося того дня

Ранок пішов на доопрацювання старого дизайну: темну, теплу редакційну палітру я поставив замість попередньої світлої теми (коміт d633692), перевіривши контраст реальними цифрами — основний текст приблизно 14:1, другорядний приблизно 7:1, а не «на око нормально». Разом із цим вийшла кінематографічна завіса-заставка і повільний рух фону при скролі (коміт d6c3f80), повністю вимкнені для тих, у кого стоїть налаштування зменшеного руху, — щоб нікого не заскочило й нікому не заважало.

Ближче до вечора стало зрозуміло, що полірувати стару сторінку далі — не те рішення. Тож я зібрав сайт заново, з нуля: нова оповідь на головній, яка справді проводить крізь продукт (початок → щоденний чек-ін → Refuel Score → одна маленька дія сьогодні → як це виглядає за місяці → все ваше життя в одному місці → Refuel AI → Care Circle → приватність за задумом → ширша екосистема → фінал), 20 реальних сторінок замість однієї, і повні англо-українські пари для кожної з них — 48 сторінок загалом (коміт 3d49723).

Справжні екрани, а не макети

Тут я дуже принциповий: кожен пристрій, який ви бачите на сайті, — це справжній знімок реального застосунку на iOS, а не ілюстрація, намальована «під застосунок». Я додав службовий хук запуску, доступний лише в дебаг-збірках (він фізично не потрапляє в жодну реальну збірку), який заповнює демо-дані й одразу відкриває потрібний екран, а потім прогнав 27 знімків через симулятор iOS і конвеєр AVIF/WebP для сайту. Показую їх трьома способами залежно від контексту — повна рамка пристрою, тісний кроп, макро-наближення на одну деталь, — щоб той самий скріншот міг нести і головний момент, і невеликий підтримувальний акцент, не повторюючись.

Для мене важливо, щоб мама, яка гортає сайт ще до того, як завантажити застосунок, бачила справжнє кільце Refuel Score чи справжній екран чек-іну — а не стокову картинку «як міг би виглядати застосунок про самопочуття».

Одна мова дизайну, а не дві

Сайт тепер бере ті самі токени, що й застосунок на iOS: лише Manrope як шрифт, ті самі кольори й радіуси (MRColor і MRRadius, віддзеркалені в CSS сайту), жодних бібліотек анімації, і все безпечно для зменшеного руху. Дрібниця на перший погляд, але це означає, що застосунок і сайт більше не розповзатимуться тихо у два різні бренди, як часто буває. Якщо палітра застосунку зміниться — палітра сайту зміниться теж, свідомо, в одному місці.

Тихо міняю ґрунт під ногами

Паралельно з візуальною переробкою я почав інфраструктурну роботу з переїзду хостингу на AWS. Уранці полагодив конвеєр збірки Amplify для монорепозиторію: установку залежностей окремо для кожного застосунку, правильні шляхи збірки, завантаження потрібних SSR-змінних середовища (коміти 2d962c2, b5244c5, af088dc, 28cf948), щоб сайт, внутрішній Control Center для команди і опитувальник могли збиратися й деплоїтися з одного репозиторію, не заважаючи один одному. Пізніше того ж дня додав зону Route 53 в Terraform (коміт 2cc2c18) і полагодив вхід через Apple для внутрішньої панелі команди (коміт 847444f). Відвідувач цього не бачить — це сантехніка, яка зробила можливим перемикання домену наступного дня.

Де і коли

• 4 вересня, ~10:11–10:25 — полагоджено конвеєр збірки Amplify для монорепо з кількома застосунками (2d962c2, b5244c5, af088dc, 28cf948).
• 4 вересня, ~10:36 — на mommyrefuel.com виїхав шар курсора для десктопу (власний курсор, магнітні кнопки) (PR #11).
• 4 вересня, ~13:24 — кінематографічна завіса і фон, що рухається при скролі (PR #12, коміт d6c3f80).
• 4 вересня, ~17:03 — темна редакційна палітра (PR #13, коміт d633692).
• 4 вересня, ~17:12 — додано зону Route 53 в Terraform перед перенесенням DNS (2cc2c18).
• 4 вересня, ~17:31 — полагоджено вхід через Apple для внутрішнього інструменту команди / Control Center (847444f).
• 4 вересня, ~19:55 — сайт повністю переібраний з нуля: 20 сторінок × EN/UK, 27 справжніх знімків застосунку, нова оповідь на головній (коміт 3d49723).
• 4 вересня, ~19:58 — виправлення для екранів ноутбуків і контрасту поверх переробки (0346224). Того дня змінювався лише сайт — ні застосунок, ні бекенд, ні App Store не чіпалися.

Що це означає, якщо ви читаєте це на mommyrefuel.com

Якщо ви заходили на сайт раніше, ви бачили пітч. Починаючи з цього дня, ви бачите сторінки, які справді віддзеркалюють, що робить застосунок, вашою мовою, зі справжніми екранами. Можна прочитати про Refuel Score, ще нічого не завантажуючи, подивитися, як працює Care Circle, або прочитати українську версію кожної сторінки — вона не приписка з перекладом, а зроблена сторінка в сторінку з самого початку.

Що далі

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