Сайт компанії з нерухомості на Кипрі
Яким має бути сайт з нерухомості? Сучасним, серйозним і стильним. Вселяти довіру та забезпечувати бездоганний користувальницький (і прибутковий) досвід. Ми знаємо це напевно, бо мали справу не з одним проєктом у сфері real estate. Що в нас вийшло цього разу — читайте в новому кейсі.
Про проєкт і завдання
Знайомтесь, Irindholding — компанія, що займається нерухомістю на Північному Кіпрі та розвиває висококласний післяпродажний сервіс. Однак нехитрий і застарілий сайт відмовлявся цьому сприяти та благав про капітальний апгрейд.
Унаслідок спілкування з клієнтом ми дійшли висновку, що прийшов час переосмислити бренд і спроєктувати продукт з нуля — за новою концепцією, зрозумілою логікою та сучасним wow-дизайном. А ще передбачити функцію мультимовності та вшити в сайт онлайн-калькулятор, генератор PDF-файлів і головне джерело лідів компанії — YouTube. Окрім інтеграції з каналом нам малося інтегрувати сайт зі звичною для клієнта amoCRM.
Отже, команді Webnauts належало поєднати технічну функціональність з візуальним захопленням, які приноситимуть заявки від клієнтів. А тому ми вирішили не обмежуватися готовими рішеннями типу WordPress і пустити в дію прогресивні фреймворки Nuxt 3 і Laravel.
Особливості UX-дизайну
Сценарій користувача
Прототипуванню сторінок передувало довге обговорення структури та логіки майбутнього сайту. Ми розробили сценарій користувача для двох цільових груп: інвесторів і покупців нерухомості.
Інвесторам:
Покупцям:
Роль розподілювача відвідувачів на першому екрані сайту виконує подвійна кнопка з приміткою «Я вибираю Кіпр для…»
Загалом, дизайн сайту схожий на інтерактивну презентацію. Ми розбили контент на зручні та доступні для сприйняття блоки-слайди. Процес скролінгу приємний (бо плавний), зручний (бо дозований) і комфортний (бо передбачуваний і мимоволі викликає відчуття контролю). Цей ефект посилюється завдяки сайдбару зліва, що демонструє «місцеположення» користувача слайд за слайдом, в міру його просування кожною сторінкою. Наведення курсора на сайдбар додатково викликає зміст поточної сторінки:
Одним з ключових побажань клієнта був вау-ефект. І разом нам вдалося домогтися захопливого результату — завдяки грамотному проєктуванню, плавній анімації та мегакорисним фічам. Про них і поговоримо.
Функціональність
Користувальницькі сценарії сайту відрізняться за своєю функціональністю та настроєм. На сторінці, призначеній інвесторам, ми вбудували зручний онлайн-калькулятор, завдяки чому вона виглядає серйозною та прагматичною. Сторінка для покупців акцентує увагу на інтерактивній карті та яскравих відео з YouTube-каналу компанії (не кажучи вже про цілий комплекс післяпродажних послуг). Зрештою маємо сайт, де на противагу практичності та діловитості виступає чарівний вайб життя на Північному Кіпрі. З однієї сторони, сайт породжує довіру інвесторів, а з іншої — інтерес людей, які хочуть придбати нерухомість.
Онлайн-калькулятор
На сайті компанії з нерухомості важливо не просто показати її переваги, а довести конкретну вигоду від співпраці, втілену в цифрах і фактах. У цьому контексті ми розробили кастомний калькулятор для розрахунку прибутку від інвестицій. Чому «кастомний»? А тому, що написаний на замовлення клієнта за його чітким і нестандартним запитом.
Тепер у розділах сайту «Інвестиції» та «Проєкти» потенційні інвестори можуть не тільки швидко розрахувати прибуток від вкладення коштів у нерухомість, а й побачити зростання цього прибутку на графіку через рік, два, три… ну ви зрозуміли.
YouTube
Цікаво, що YouTube-канал став головним лідогенератором нашого клієнта. Тому для нас було вкрай важливо інтегрувати його на сторінки сайту. Крім цього, відео дозволяє користувачам якнайкраще зануритися в атмосферу життя на острові, а команді Irindholding — продемонструвати свою експертність у сфері нерухомості.
Інтеграція сайту з популярним відеохостингом була реалізована через API програвач iframe. Так, під час розробки адмінки сайту бекендер передбачив поля для вводу посилань, а фронтендер вбудував iframe на видимій частині сайту. Як це працює? Посилання з бекенду динамічно надходить на інтерфейс сайту, завдяки чому відтворюється ролик з YouTube.
Додати чи змінити відео на сайті дуже просто: клієнту потрібно лишень зайти в адмінку сайту та вставити потрібне посилання у відповідне поле конкретної вебсторінки:
Кастомна мапа
Ще одним втіленням наочності та інтерактиву на сайті стала залипальна кастомна мапа Північного Кіпру. Щоб «підсвітити» райони острова та «викликати» локації актуальних об’єктів нерухомості, достатньо просто навести на них курсор.
Як відомо, сенсорний екран смартфонів і планшетів виключає можливість ховер-ефекту, тому карта в мобільній версії сайту містить лише локації актуальних об’єктів. Однак вони цікаві як з погляду анімації, бо мають ефект пульсації, так і з погляду розробки. Наш бекендер «пришпилив» їх на мапі за координатами в пікселях, окремо для десктопної та мобільної версії.
Верстка сайту
Дизайн сайту зі всіма його анімаціями та функціями написаний мовою Vue.js, а саме фреймворком Nuxt 3. Зокрема, для роботи з бекендом була використана технологія useAsyncData, а для інших завдань були використані деякі плагіни:
- Splide — для створення слайдерів,
- Chart.js — для візуалізації графіка прибутку в онлайн-калькуляторі,
- Vue screen — для відстеження розмірів екрана під час роботи з серверним рендерингом (SSR, або server-side rendering).
Під час верстання сайту фронтендеру допомогли такі бібліотеки:
- GSAP — для адаптивної та плавної анімації JavaScript,
- Pinia — для створення сховища даних.
Цікавим, складним і небанальним завданням стала власноручна розробка ідеї поекранного скролу без підключення сторонніх бібліотек:
Програмінг сайту
Сайт був реалізований завдяки гнучкому, потужному та водночас витонченому PHP-фреймворку Laravel 10, зокрема:
1) Розроблена адміністративна панель за шаблоном дизайну Admin LTE.
2) Закладена мультимовність і можливість легко редагувати контент сторінок англійською та російською мовами прямо з адмінки.
3) Забезпечена функція завантаження вебсторінок проєктів і готових об’єктів у вигляді PDF-документа, готового до друку та подальшої передачі клієнтам.
4) Інтегрована звична для клієнта amoCRM.
Розгортання та запуск готового сайту на сервері виконаний за допомогою технології Docker.
Висновок
Команда Webnauts запустила черговий сайт з нерухомості, викреслюючи з ТЗ пункт за пунктом. Отже, ми:
- Визначилися зі стратегією.
- Продумали логіку роботи інтерфейсу та спроєктували прототипи.
- Зверстали сторінки та приправили їх анімацією.
- Запрограмували та інтегрували сайт із CRM.
- Наділили продукт потужним функціоналом: двомовність, онлайн-калькулятор, генератор PDF-документів, інтерактивна карта та відтворення відео з YouTube.
У кінцевому підсумку маємо сайт, який працює відразу на два фронти: на догоду інвесторам і покупцям. Він не лише розповідає про складні речі простою мовою, а й забезпечує винятковий користувальницький досвід через наочність і зручні інструменти.
Комментарии