- Рік
- 2026
- Платформи
- Адаптивний вебсайт (WordPress), показаний на телефоні, з бекофісом і ШІ
- Що ми зробили
- Продуктовий дизайн, UX/UI та розробка
Бриф
AllRisk — португальський страховий посередник, який хоче робити навпаки, ніж зазвичай робить галузь: говорити ясно, без дрібного шрифту й нескінченних форм. Сайт має за лічені секунди показати, який захист підходить кожній людині й кожній компанії.
Замість меню, повного продуктів, сайт починається з питання: який твій рівень ризику? Слайдер із трьома положеннями (низький, середній і високий) змінює всю сторінку: вступний текст, ситуації з повсякденного життя, покриття, відгуки, акцентний колір, логотип і фонове відео. Оскільки є сторінка для приватних осіб і окрема для компаній, кожна з них — це фактично три сторінки: шість різних досвідів в одному сайті.
Тон — як у розмові: до приватних осіб звертаються на ти, до компаній на ви, з мінімумом страхового жаргону й багатьма конкретними прикладами.
За сайтом є ще й бекофіс на WordPress та шар ШІ, що працює з PDF-документами (RAG і вилучення вмісту) та з видами діяльності (CAE).
Для кого
-
01
Хто має передбачуваний ритм життя
Приватні особи та офісні компанії, які хочуть простого й пропорційного захисту, без жаргону й без переплат за те, що їм не потрібне.
-
02
Хто живе (або керує) в русі
Щодня за кермом, тренується, подорожує, керує невеликою командою чи автопарком. Шукає покриття, що встигає за ритмом.
-
03
Хто працює в середовищі ризику
Будівництво, промисловість, транспорт, важка техніка. Потрібне рішення, створене під професію, і жива людина, з якою можна поговорити.
01 / 05
Слайдер ризику
Угорі сторінки, під шапкою (з перемикачем між приватними особами й компаніями, логотипом, кнопкою дзвінка та меню), є питання — який твій рівень ризику — і слайдер із трьома положеннями: низький, середній і високий. Його можна перетягнути, клікнути по смузі або вибрати рівень на фіксованому перемикачі (01, 02, 03), який іде за прокруткою, тож змінити рівень можна в будь-якому місці сторінки. Кожне положення має щит з іншим символом (позначка, знак оклику, сигнал тривоги), що на високому рівні навіть тремтить, і сторінка одразу реагує: змінюються мітка (базовий, розширений або повний захист), заголовок і вступний текст, акцентний колір, логотип і фонове відео, яке ледь видно за текстом.
Кожен рівень говорить по-своєму. Низький: твоє життя спокійне, і ми хочемо, щоб так було й далі. Середній: у тебе щодня є виклики, і ми готові до них. Високий: твій ритм вимагає більше, і ми даємо тобі таке покриття. Колір іде від зеленого до бурштинового й червоного.
02 / 05
Це ти?
Під слайдером список ситуацій із повсякденного життя, у картках, які можна вибирати, дає відвідувачу змогу перевірити, чи він влучив у рівень. Кожен рівень має свої п’ять ситуацій, від того, що найбільший ризик на роботі — пролити каву на клавіатуру, до того, що безпека праці є головною темою, а індикатор прогресу росте в міру вибору, із фразою про те, наскільки близько до повного збігу. Сторінка для компаній має власний список із ситуаціями на кшталт важкої техніки, будівництва чи екологічної відповідальності, і цей список є у світлій та темній темі.
Кнопка в кінці списку теж змінює фразу залежно від рівня: хочу дізнатися більше, поговори зі мною або потрібне рішення. Вона відкриває коротку форму (ім’я, пошта й необов’язкове повідомлення), із WhatsApp і телефоном для тих, хто воліє поговорити, а вибраний рівень іде разом із запитом на контакт, тож той, хто відповідає, вже знає, про який профіль ідеться.
03 / 05
Відгуки, контакт і покриття
Ближче до кінця сторінки відгуки змінюють один одного в каруселі, зі стрілками й крапками: зірки, цитата, ініціали людини, професія й місто. Вони теж залежать від вибраного рівня: від водіїв і спортсменів до працівників будівництва.
Одразу після цього — блок прямого контакту, де WhatsApp є бажаним шляхом, а ще телефон і форма, та повідомлення, що по той бік — люди, а не чатботи.
Вище кожен рівень має свої п’ять карток покриття, з фотографією та символом, лише з тим, що має сенс для цього профілю. Низький: робота, мобільність, здоров’я, сім’я і дім. Середній: робота з обладнанням і відповідальністю, дорога, здоров’я для тих, хто тренується, сім’я в русі та дім як інвестиція. Високий: повне покриття для професій високого ризику, транспорт, здоров’я для тих, хто більше навантажує тіло, захищена сім’я та те, що ти збудував. На телефоні картки складаються в одну колонку.
04 / 05
Інші сторінки: компанії та інституційна
Сторінка для компаній повторює механіку в іншому масштабі й тоні (до відвідувачів звертаються на ви). Перемикач у шапці з іконками людини й будівлі переходить між двома сторінками, а слайдер тепер питає, який ризик вашої компанії, з базовим, розширеним і повним корпоративним захистом. Список ситуацій високого рівня, який видно в темній темі вище, питає про важку техніку, будівництво, екологічну відповідальність, працівників під ризиком і аварії в операції.
Базовий рівень — це офісна компанія: професійна цивільна відповідальність, колективне медичне страхування для команди, офіс і обладнання, кібербезпека, життя й нещасні випадки для працівників. Розширений — компанія з автопарком, командою в полі або вантажами в дорозі. Повний — промисловість, будівництво й великі ризики, зі збитками від простою через поломку машин, екологічною відповідальністю та рішеннями на замовлення.
Інституційна сторінка розповідає, хто така AllRisk і для кого вона працює (стартапи, медики, митці й креативні професії, компанії, вразливі до цифрових загроз, і великі ризики), з карткою для кожної аудиторії, і далі — місія, візія та шість принципів, від прозорості до незалежності (AllRisk працює з кількома страховиками), і наприкінці запрошення дізнатися свій рівень ризику.
05 / 05
За сайтом: бекофіс і ШІ
За сайтом є бекофіс у самому WordPress. Кожен рівень ризику, картки покриття, ситуації й відгуки — це окремі типи вмісту з власними полями (ACF), тому команда редагує текст кожного рівня, не торкаючись коду, а запити на контакт (форма, яку видно вище) приходять поштою вже з вибраним рівнем ризику. Є також калькулятор вмісту (вартості того, що всередині майна), який зберігає пропозиції, надсилає їх клієнтові й команді, експортує в CSV, надсилає повторно та друкує в PDF.
ШІ вбудований у двох напрямах. Асистент відповідає на запитання на основі PDF-документів (RAG: документи індексуються, а відповідь береться зі знайдених уривків, а не з пам’яті моделі), а вилучення вмісту перетворює ці документи на текст і структуровані поля. І є SeguroIA — плагін, який визначає обов’язкові страхування для виду діяльності: людина описує його своїми словами або вказує код CAE, мовна модель допомагає його класифікувати, а результат береться з локальної бази обов’язкових страхувань.
Зелений, бурштиновий і червоний
Візуальна система має дві теми, світлу й темну, які відвідувач перемикає, а сайт запам’ятовує. Поверхні нейтральні й холодні, а акцентний колір — це колір рівня ризику: зелений, бурштиновий або червоний, кожен із темнішою версією на світлій темі, щоб зберегти контраст. Текст набрано Outfit, а мітки й числа — Space Mono. Картки мають кути 16 px.
AllRisk (темна)
- Поверхні
-
#0A0A0F#1E1E2E - Текст
-
#F0F0F5 - Акценти: низький, середній і високий
-
#2DD4A0#F5B428#E64646
AllRisk (світла)
- Поверхні
-
#F5F5F8#FFFFFF - Текст
-
#1A1A2E - Акценти: низький, середній і високий
-
#106847#B44F09#B02020
За екраном
Що потрібно, щоб сайт із такою кількістю руху лишався легким і читабельним.
-
Тема на замовлення
Сайт — це власна тема WordPress із CSS і JavaScript, написаними вручну, та анімацією на GSAP, без конструктора сторінок.
-
Один рівень, одна сторінка
Три рівні живуть на одній сторінці й перемикаються в браузері, без перезавантаження. Текст усіх із них є в HTML, тож пошукові системи його читають, а видимою лишається лише панель вибраного рівня.
-
Відео лише тоді, коли потрібні
Фонове відео кожного рівня запитується лише тоді, коли цей рівень вибрано вперше, щоб сторінка відкривалася легкою.
-
Дві теми, три акценти
Акцентний колір — це змінна, яку JavaScript міняє разом із рівнем, у двох наборах значень (по одному на тему), щоб контраст був добрим в обох.
-
Редагований вміст без коду
Рівні, картки, ситуації й відгуки — це типи вмісту WordPress із власними полями, тож їх редагують у панелі, а запити на контакт несуть вибраний рівень ризику.
-
ШІ над документами
Асистент відповідає на основі проіндексованих PDF-документів (RAG), а вилучення вмісту перетворює ці документи на текст і структуровані поля. SeguroIA використовує мовну модель, щоб класифікувати діяльність, і звертається до локальної бази, щоб сказати, які страхування обов’язкові.
Що ми зробили
Ми спроєктували й побудували сайт від початку до кінця: UX/UI та дизайн-систему, розробку теми та взаємодій і вигляд кожного рівня, з арт-дирекцією від візуальної айдентики. І ми створили бекофіс на WordPress та інтеграцію ШІ та автоматизації: RAG над PDF, вилучення вмісту та визначення обов’язкових страхувань за CAE.
FAQ
Питання та відповіді.
-
Вебсайт португальського страхового посередника. Замість меню продуктів він починається з питання: який твій рівень ризику?
-
Він має три положення (низький, середній і високий) і змінює всю сторінку: вступний текст, ситуації з повсякденного життя, покриття, відгуки, акцентний колір, логотип і фонове відео. Є сторінка для приватних осіб і окрема для компаній, тож фактично це шість різних досвідів.
-
Так. Відвідувач перемикає, а сайт запам’ятовує вибір, і акцентний колір кожного рівня має темнішу версію на світлій темі, щоб зберегти контраст.
-
Асистент, що відповідає на основі PDF-документів (RAG), вилучення вмісту з цих документів і визначник обов’язкових страхувань за видом діяльності (CAE), який використовує мовну модель для класифікації діяльності та локальну базу для результату.
-
Так. Розкажи, що маєш на увазі, і ми скажемо, як би до цього підійшли, від дизайну до розробки. Напиши нам кнопкою «Обговорити схожий проєкт» угорі та нижче на цій сторінці.
-
З розмови, щоб зрозуміти мету, хто користуватиметься продуктом і що вже існує. З цього виходить чіткий обсяг, і ми рухаємося етапами, з результатами, які можна побачити й прокоментувати по дорозі.