Dragondelve
Редизайн сайта веб-студии. Как исследование рынка Армении помогло выстроить позиционирование с нуля.
01 Контекст и проблема
Сайт перестал справляться
со своей задачей
Dragondelve — небольшая веб-студия в Армении, работающая через личные контакты и рефералы основателя. Существующий сайт (сделанный в сентябре 2024) перестал справляться со своей задачей.
Домен уже существует, студия на рынке — есть база для SEO. Момент подходящий, чтобы сделать сайт реальным инструментом привлечения клиентов.
Плохо индексируется поисковиками — потенциальные клиенты не находят студию через Google
Не конвертирует холодных посетителей — нет чёткого нарратива и иерархии CTA
Не отражает текущий уровень студии — визуальное и структурное несоответствие ожиданиям
02 Discovery: исследование рынка
Армения — незнакомый рынок
Прежде чем проектировать, нужно было понять: кто здесь ищет веб-услуги, как и на каком языке.
Армяне ищут веб-услуги на армянском языке→ Русский и английский доминируют даже внутри страны Опровержено
Рынок конкурентен по SEO→ У лидеров буквально 0–15 органических посетителей в месяц Опровержено
Студии с большим числом бэклинков получают больше трафика→ Masterweb — 800K бэклинков и ноль трафика Опровержено
Много CTA = больше конверсий→ На старом сайте CTA были везде, но без иерархии — только шум Опровержено
Клиенты приходят через рефералы, не через поиск→ Сайт никогда не был источником лидов — подтверждено Подтверждено
Портфолио важнее любого текста на сайте→ Подтвердилась, но создала вызов: у Dragondelve почти нет работ для показа Частично
03 Инсайты исследований
Что это значит для проекта
04.1 User Journey
Путь пользователя
Сценарий построен на данных маркет-ресёрча и аудита конкурентов. Путь отражает наиболее вероятное поведение на основе собранных данных.
04.2 Jobs To Be Done
Зачем пользователь приходит на сайт
— Владелец кафе, получил рекомендацию от знакомого
— Основатель небольшого интернет-магазина
— Менеджер малого бизнеса
05 Болевые точки аудитории
Что мешает пользователю обратиться
06 Проблемный стейтмент
Формулировка задачи
Потенциальные клиенты, попадая на сайт веб-студии Dragondelve, не получают ясного представления о её экспертизе, уровне проектов и процессе работы. Сайт был создан на раннем этапе развития студии и со временем перестал отражать её текущий уровень, из-за чего холодные посетители не формируют достаточного доверия и покидают сайт без обращения. В результате сайт не выполняет свою ключевую функцию — привлечение новых клиентов.
07 UI — применение системы
Как система работает на экране
Первый экран проектировался как главный носитель value proposition. Двухколоночная композиция: текстовый блок слева формирует последовательное раскрытие предложения, визуальный блок справа поддерживает фирменный образ. Иллюстрация дракона помещена в круглый контейнер, чтобы ограничить визуальную массу и не позволить декоративному элементу конкурировать с текстовой колонкой.
Иерархия: основное предложение → ключевое преимущество → раскрытие механики → CTA.
Три сервисные карточки с единой структурой: заголовок → иконка → описание → primary/secondary CTA. Монохромные иконки не конкурируют с акцентным цветом. Карточки построены с увеличенными внутренними отступами — каждая услуга воспринимается как самостоятельное предложение.
Секция «Ваш сайт в ваших руках» выделена светлым фоном и намеренно выбивается из тёмной палитры. Это разделяет scroll-flow и акцентирует внимание на ключевом конкурентном преимуществе — собственной административной панели. Светлый фон улучшает читаемость демонстрации продукта.
Горизонтальная временная ось — наиболее прямолинейный способ визуализации процесса. Пользователь считывает этапы последовательно слева направо. Финальный этап сформулирован как бизнес-результат: «Сайт приносит вам клиентов» — смещает фокус с процесса разработки на ценность для заказчика.
Split-layout: форма слева, trust-информация и контакты справа. Это поддерживает две пользовательские потребности одновременно — немедленное действие и дополнительную валидацию доверия. Trust-сигналы работают в момент принятия решения, а не после.
Мобильная версия
Мобильная версия спроектирована на базе десктопа с сохранением логики визуальной системы. Используется 4-колоночная сетка. Двухколоночная композиция секций перестраивается в одну колонку с сохранением иерархии. Перегруженные элементы переведены в вертикальный формат и прокрутку. Hero-иллюстрация убрана для снижения шума и ускорения восприятия. Текст — не менее 16px, интерактивные зоны и отступы увеличены.
08 Дизайн-решения
Что изменилось в сравнении со старым дизайном и почему
Каждое решение продиктовано исследованиями.
Что не работало в старом сайте
09 Было → Стало
Ключевые изменения интерфейса
Каждое решение продиктовано данными исследования. Ниже — четыре ключевых экрана с объяснением логики изменений.
Старый hero не выполнял базовую коммуникационную задачу: пользователь видел название бренда и декоративную иллюстрацию, но не получал ответа на ключевые вопросы. В обновлённой версии первый экран перестроен вокруг value proposition. Заголовок сменился с названия бренда на прямое продуктовое сообщение.
Девять карточек с техническими деталями сокращены до трёх ключевых направлений: разработка сайтов, графический дизайн, SEO. Введена CTA-иерархия: вместо единого «Read More» — primary и secondary действия.
Смешанный формат карточек со стрелками → единая горизонтальная временная шкала. Последовательность стала линейной и предсказуемой. Финальный этап переосмыслен: с технического завершения на бизнес-результат для клиента.
Форма и контактная информация были визуально разделены → собраны в единую split-layout композицию с формой, trust-блоком и альтернативными каналами связи. Trust-блок рядом с формой снимает последние барьеры в момент принятия решения.
10 Метрики
Как будем оценивать результат
На момент публикации кейса сайт находится в стадии разработки — редизайн передан в разработку и реализуется на новой кодовой базе. Метрики заложены на этапе проектирования как часть продуктового подхода и будут отслеживаться после релиза.
11 Карточка проекта
Итог
В результате редизайн был построен на данных: маркет-ресерч (опроверг ключевые гипотезы о рынке), практически нулевой SEO-конкуренции и показателем того, что визуальная планка у лидеров рынка низкая. Это определило стратегию: не нужно догонять конкурентов, нужно делать базовые вещи правильно. Старый сайт не выполнял ни одну из своих функций — не индексировался, не удерживал внимание, не конвертировал. Новый выстроен вокруг конкретного пользовательского пути: от первого экрана с чёткой value proposition до контактной секции с trust-сигналами рядом с формой. Каждое структурное решение — иерархия CTA, три услуги вместо девяти, горизонтальный процесс с бизнес-результатом в финале — продиктовано данными аудита и поведенческими гипотезами. На момент публикации проект передан в разработку; метрики заложены и будут отслеживаться после релиза.
UI/UX Design · 2026 © All Right Reserved.
Agafia Kalinina. e-mail: agata.cr.artist@gmail.com +7 (951) 981-85-94
