Роботи · Салон краси, Львів
Редизайн сайту салону краси на Сихові
Концепт. Не замовлення клієнта — редизайн наявного сайту svit.beauty, зроблений, щоб показати підхід. Заміри чинного сайту справжні.
Чинний сайт салону вантажив 55 зображень без жодного lazy-loading, мав чотири теги header і 60 дрібних елементів керування на мобільному. Переробив структуру навколо однієї ідеї: ціна залежить від довжини волосся, і цю шкалу видно одразу.
Заміри
Зняті з чинного сайту й з концепту однаковим способом: браузер, мобільний екран 390 px, ті самі перевірки.
- Провали контрасту тексту
- 4
- 0
- Зображення з lazy-loading
- 0 із 55
- 12 із 17
- Сучасні формати (webp/avif)
- 5 із 55
- 17 із 17
- Мережевих запитів
- 18
- 8
- Час завантаження
- 440 мс
- 90 мс
- Довжина сторінки на телефоні
- 17,1 екрана
- 10,8 екрана
- Тегів header / footer
- 4 і 2
- 1 і 1
Що не так із чинним сайтом
-
Ціну неможливо порахувати заздалегідь
Головне заперечення ніші: «прийду, а рахунок буде інший». Прайс на сайті не пояснює, від чого залежить сума, хоча в салоні є власна шкала довжин, і клієнтка йде до конкурента, який показує ціну одразу.
-
55 зображень без жодного lazy-loading
Усі 55 фото вантажаться одразу, і лише 5 із них у сучасному форматі. На слабкому мобільному інтернеті, з якого заходить більшість клієнток, сторінка не встигає відкритися до того, як людина закриє вкладку і подзвонить у сусідній салон.
-
Чотири теги header і два footer
Браузер і Google не розуміють, де на сторінці справжня шапка, а де підвал. Пошуковику це заважає правильно показувати салон у видачі: менше людей узагалі бачать сайт до того, як зайти на нього.
-
60 із 73 елементів керування дрібніші за 44 px
На екрані телефону в кнопку важко влучити пальцем, хоча саме з телефону записуються на манікюр майже всі клієнтки. Кожен незручний дотик підвищує ризик, що жінка закриє сайт і піде шукати простіший.
-
Емодзі замість оффера в заголовку і описі
Title починається з «▶», а description складається з «❇️ ❤ ☝». У видачі це виглядає як спам і не пояснює, чим салон кращий за сусідній.
Що змінив і чому
-
Шкала довжин 1–5 як головна ідея першого екрана
Ціна прив'язана до довжини, шкала показана одразу, фарба включена у вартість. Заперечення про непередбачувану суму знімається до звернення.
-
Реальні роботи замість стокових фото
На першому екрані одразу видно смугу власних робіт салону різної ширини, підписану відтінками: мідь, червоне, каштан, мед, блонд. Це доказ рівня майстрів, який переконує краще за будь-який текст.
-
Запис у два дотики з будь-якої точки сторінки
Нижня панель на мобільному тримає «Подзвонити» і «Записатися онлайн»; віджет запису вбудований у сторінку, з запасним посиланням окремою вкладкою.
-
Швидкість як частина досвіду
Усі зображення переведені у webp, увімкнено lazy-loading, кількість запитів скорочена з 18 до 8. Сторінка відкривається за 90 мс замість 440. На слабкому інтернеті це різниця між тим, що клієнтка дочекається завантаження, і тим, що вона піде до конкурента.
Як це виглядає цілком
Прокрутіть усередині рамки. Це знімок усієї сторінки, знятий у браузері — відкрити сайт.
Салон працює на Сихові й має власну систему розрахунку ціни за довжиною волосся, але на чинному сайті цього не видно. Концепт побудований навколо цієї ідеї: відвідувачка бачить шкалу, розуміє свою довжину і бачить суму до того, як подзвонить.
Решту рішень підказали заміри, а не смак: контраст, вага сторінки, розміри елементів керування й структура документа виправлені там, де інструменти показали проблему.
Чого концепт не закриває
- Концепт не переніс мікророзмітку чинного сайту: в оригіналі є HairSalon, GeoCoordinates, OpeningHoursSpecification, 15 Service з цінами та відгуки, у концепті лише FAQPage. У бойовій роботі розмітку треба переносити повністю, інакше салон втрачає локальну видачу в Google.
- Canonical у концепті успадкований з оригіналу й веде на неіснуючу адресу. Для демонстрації це не критично, а для запуску це обов'язково треба виправити.
Концепт зробив Остап Йонка
Львів · сам, від структури до запуску
Зробити такий розбір вашого сайту
Надішліть посилання — покажу заміри чинного сайту й що з ними не так. Безкоштовно, без зобов'язань.