На главную
UX Редизайн и Веб-Разработка

Langner GM Website
Redesign

Конверсионный редизайн сайта сервисной компании — улучшенная информационная архитектура, прозрачная навигация к контакту и структурированная UX-воронка.

Langner GM Website Redesign
UX ResearchInformation ArchitectureConversion OptimizationReactVite
01 · Контекст проекта

Ориентация и Исходная точка

Langner GM — местная компания по восстановлению после водных повреждений и сушке зданий.

Отрасль
Gebäudemanagement · B2C
Задача
UX Redesign & Entwicklung
Роль
UX Strategie · Design · Dev
Стек
React · Vite · Figma
02 · Проблема

Что пошло не так

Старый сайт не передавал ценность услуг и затруднял быстрый контакт в срочных ситуациях.

Непонятная структура услуг
Услуги не были логично сгруппированы — пользователи не понимали, какие задачи решает компания.
Сложно найти контакт
В критический момент отсутствовали CTA — нет быстрого контакта, нет WhatsApp.
Слабая визуальная иерархия
Нет приоритета контента. Всё выглядит одинаково важным — значит ничто не важно.
Плохой мобильный опыт
Мобильные пользователи — ключевая аудитория — не имели удобной навигации и быстрого контакта.
Alte Website Screenshot
// X-Ray: Alte Website — Screenshot
03 · UX Анализ

Почему это не сработало

Структурная диагностика ключевых проблем — не как список ошибок, а как причинно-следственный анализ: Причина → Следствие → Решение.

Пользователи должны были найти контакт за секунды, особенно в аварийной ситуации (затопление).

// 01
структура навигации
До (типичные проблемы) —Непонятная структура услуг
После —Плоская структура с максимум 5 главными пунктами. Экстренный контакт всегда виден в шапке.
Before: структура навигации
After: структура навигации
// 02
информационная иерархия
До (типичные проблемы) —Сложно найти контакт
После —Четкая последовательность H1→H2→CTA. Каждая секция имеет одну главную цель.
Before: информационная иерархия
After: информационная иерархия
// 03
контакт-флоу
До (типичные проблемы) —Слабая визуальная иерархия
После —Мультиканальный контакт: липкий CTA, кнопка WhatsApp, звонок — в один клик.
Before: контакт-флоу
After: контакт-флоу
04 · Стратегия

Генеральный план

Цель: направить пользователей напрямую к контакту с компанией.

01
упрощённая навигация
Разбить страницу на логические блоки контента — Услуги → Доверие → Контакт. Пользователи сразу находят нужное.
02
чёткие категории услуг
Оптимизировать все критические взаимодействия для экстренного пользователя: быстрая загрузка, мгновенный контакт, удобные CTA.
03
заметные кнопки контакта
Стратегически использовать отзывы, время реакции, страховых партнёров и фото команды — строить доверие за секунды.
04
улучшенная Mobile-First структура
Каждая секция ведёт к следующему действию. Нет тупиков на странице — всегда есть чёткий следующий шаг для пользователя.
05
более сильная визуальная иерархия
05 · Процесс дизайна

Генеральный план

01
Исследование и Аудит
Анализ старого сайта, исследование целевой аудитории и конкурентный анализ. Выявление критических UX-проблем.
02
Информационная Архитектура
Определение карты сайта и пользовательских путей. Какой контент на каком уровне — и в каком порядке он представлен?
Information Architecture
03
Вайрфрейминг и Прототипирование
Низкодетализированные вайрфреймы в Figma. Тестирование структурных решений перед началом визуального дизайна.
Wireframing & Prototyping
04
High-Fidelity Дизайн и Разработка
Финальный дизайн в Figma, затем чистая реализация на React + Vite с подходом mobile-first и оптимизацией производительности.
High-Fidelity Design
06 · Ключевые UX Решения

Ключевые UX-решения

Каждое решение следует четкой логике: Проблема → Решение → Измеримый Эффект.

// Решение 01
Sticky SOS Header
Проблема
Номер экстренной службы всегда остается в поле зрения при скролле, сокращая время поиска контакта в стрессовых условиях.
// Решение 02
Прямая связь через WhatsApp
Проблема
Добавление возможности мгновенной отправки фото повреждений для ускорения предварительной оценки экспертами.
// Решение 03
Акцент на работе со страховкой
Проблема
Заметные пометки о прямом расчете со страховыми снимают финансовые опасения клиента при первом же контакте.
// Решение 04
Mobile-First взаимодействие
Проблема
Оптимизация всех кнопок и полей для удобного использования одной рукой прямо на месте аварии со смартфона.
07 · UX Решение

Итоговый Результат

Визуальное доказательство — финальный дизайн в высоком качестве.

Hero-секция
Структура услуг
Контактная зона
Kontakt & Footer
08 · Мобильный опыт

Мобильный опыт

Сайт переработан по Mobile-First принципу для быстрого доступа к услугам и контактам.

Hero-секцияHero-секция
Структура услугСтруктура услуг
Контактная зонаКонтактная зона
Подход
Mobile-First Design
Контакт
1 Tap entfernt
Производительность
Optimierte Ladezeit
09 · Коммуникация продукта

Коммуникация продукта

Для поддержки общей коммуникации бизнеса было создано короткое промо-видео. Целью было дать потенциальным клиентам четкое и быстрое понимание компании, её услуг и принципов работы — особенно в экстренных ситуациях, таких как повреждение водой.

Langner GM Website Redesign
// Promo Video — Langner GM
10 · Результаты

Доставленная Ценность

Редизайн был направлен на устранение 'информационного шума' и создание быстрого пути к контакту для клиентов в экстренных ситуациях.

Повышенная ясность конверсии
Чёткая структура услуг и сфокусированные призывы к действию помогают пользователям понять следующий шаг без лишней путаницы.
Сниженное трение при контакте
Упрощенная навигация и заметные способы связи помогают пользователям быстрее выйти на контакт, особенно в экстренных ситуациях.
Сильная иерархия информации
Контент разбит на логические блоки, что позволяет пользователям мгновенно находить нужные услуги и ключевые данные.
Mobile-First UX стратегия
Интерфейс оптимизирован для мобильных устройств, гарантируя быстрый доступ к услугам и контактам на небольших экранах.
Следующий проектFitHub Digital Ecosystem

Обсудить проект

Давайте вместе выясним, как UX и чёткая информационная архитектура могут улучшить ваш продукт.

Начать консультацию