Имплантация зубов

Имплантация зубов

Тип
лендинг
Дата
Сентябрь 2023

О проекте

Лендинг для презентации услуги по имплантации зубов
Длительность 2 месяца
Роль Дизайнер интерфейса Разработчик
 
notion image
 

Фактор Альфа — это семейная клиника в Екатеринбурге, направленная на полную профилактику стоматологических заболеваний

Задачей проекта было создание и запуск лендинга для презентации услуги по имплантации зубов
Пользователь оставляет заявку, после чего с ним связывается администратор и записывает его на консультацию
Важно было подчеркнуть современность клиники и показать, что имплантация это не так сложно и страшно, как кажется на первый взгляд
Ради достижения этой цели мы пошли даже на 3д-эксперименты

Продумывание идеи

Сначала я проанализировал сайты других клиник и выделил из них структуру для лендинга. Чтобы погрузить пользователя глубже в процедуру и показать, что в имплантации нет ничего страшного — главной идеей проекта стала анимация зубного импланта
Примерная структура
Примерная структура
Первые наброски анимации импланта https://sonniydsgn.github.io/scroll-test/
В последствии мы решили показать на сайте 3д-модель импланта. Идея эксперементальная, потому что плавно обрабатывать 3д в реальном времени может не каждое устройство. Особенно мобильное.
Но аудитория оказалась подходящей, поэтому мы решили попробовать. Про результаты эксперимента с 3д-моделью рассказал ниже.

Создание дизайна

Далее я погрузился в поиск возможных решений: сделал мудборд и подобрал композиционные референсы
Страница в фигме с мудбордом
Страница в фигме с мудбордом
Затем взялся за копирайтинг и создал дизайн-концепцию
Иттераций много, но это того стоило…
Иттераций много, но это того стоило…
Финальная версия дизайна с адаптивами
Финальная версия дизайна с адаптивами
В процессе создания проекта, заказчик предложил дарить щедрый подарок всем, кто отправил заявку. Я поразмышлял, как это можно сделать, написал техническое задание, и так мы внедрили в лендинг систему подарков
Обзор системы подарков
В дополнение к ней заказчик также попросил показать, как каждый год меняется стоимость имплантации
Обзор блока с ростом цены на имплантацию
Эти два решения мы добавили для того, чтобы замотивировать пользователя действовать уже сейчас

Разработка

Калинин Алексей  |  фронтенд-разработка
Калинин Алексей | фронтенд-разработка
Крылов Николай  |  бэкенд-разработка
Крылов Николай | бэкенд-разработка
Перед нами стояли задачи:
  1. сверстать и анимировать макеты
  1. настроить отправку заявок в CRM
  1. реализовать систему подарков

Фронтенд

Фронт разработан на базовых языках, а с помощью фреймворка WebGi удалось быстро настроить 3д-модель и подключить её к сайту
notion image

Бэкенд

Кроме красоты, нужно и бизнесу заявки показывать — за их обработку и систему подарков отвечает Python и легкий фреймворк Flask
notion image

Эксперимент с 3д-моделью

После первого запуска сайта, мы выяснили, что современные телефоны плавно обрабатывают 3д анимацию.
Так выглядила анимация модели в начале эксперимента
Однако главная проблема оказалась в условиях медленной работы интернета. Люди не дожидались загрузки страницы и спустя 3-4 секунды закрывали её.
💡
Мы попытались максимально сжать модель и в лучшем варианте добились размера меньше 1 мб. Однако оставался WebGi, который весил 2.5 мб и подгружал ещё зависимости из сети
Поэтому мы решили убрать 3д-модель и заменить её на рендер. Раздели его на три части и анимировали каждую
Дополнительно перенесли блок с анимацией импланта ниже, чтобы загрузка сайта была моментальной
Тесты скорости загрузки сайта с разными моделями

Результаты

Обзор лендинга, который получился в результате проекта

Отзыв клиента

Посмотреть сайт