Deppa – это международный бренд-производитель мобильных аксессуаров
с представительствами в 2 странах, собственной производственной площадкой в Китае и двумя торговыми марками – DEPPA и AXXA. 19 лет успешной работы на рынке.
Ассортимент Deppa – это более 500 наименований качественных и стильных аксессуаров, от базовых устройств до премиум-сегмента.

О компании

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

Краткое описание

Я была единственным дизайнером на проекте. В моем распоряжении был гайдлайн по фирменному стилю, всю остальную работу по разработке концепции и визуалу, а также небольшие исследования я выполняла самостоятельно. В рамках этого проекта я работала в команде с руководителем направления «Электронная торговля», маркетологом, продукт-менеджерами и frontend-разработчиком.

Моя роль

Сделать редизайн существующего сайта. В дизайне учесть SEO-требования для продвижения.

Задача

1. Не уронить в первую неделю WAU. Так мы поймем, что обновление сайта не испугало пользователей и перевесило привязанность к старой версии.

Февраль – Май 2024

Критерии успеха

E-commerce сайт Deppa.ru

Разработка корпоративного сайта и онлайн-каталога мобильных аксессуаров

1. Изучение аналитики по текущей версии сайта
Этот этап был нужен мне, чтобы понять, как пользователи сейчас взаимодействуют с сайтом, какие основные разрешения устройств, какая целевая аудитория по возрасту и полу, откуда идет источник трафика.

Adaptive design

Этапы работы

UX/UI

Я собрала визуальный анализ конкурентов, потому что, как говорится, их надо знать в лицо. Кто наши прямые конкуренты я узнала у продукт-менеджеров, ведь они знают этот рынок вдоль и поперек.
Анализировала по разным параметрам: от структуры страниц и компонентов до анимации и стилей креативов эти страницы:

• Главная
• Для бизнеса (партнерам)
• Каталог
• Список товаров и фильтрация
• Карточка товара

Выделила плюсы и минусы, поняла, что стоит повторить, а где есть возможности отстроиться.

2 этап. Анализ конкурентов

E-commerce

Предыдущая версия сайта существовала с 2018 года, она была написана на Ruby и не могла поддерживаться на хорошем уровне по backend. Плохо работали фильтры, поиск. За время работы накопилось много неактуальных, пустых, закрытых страниц. Некоторые страницы находились не на своих урлах, дублировали друг друга.
Проблемы существовали и с визуальной частью – она устарела, не было консистентности, а так как мы – технологичная компания, я предложила генеральному директору идею сделать новый дизайн, который бы лучше работал, соответствовал миссии компании и был в более актуальном, современном дизайне.
Но для этого нужно было найти решение по backend. Мы с маркетологом изучили рынок коробочных решений, подходящих под наши цели, ведь нам нужен был не просто корпоративный сайт, но еще и онлайн каталог с переходами из карточек товаров на Ozon/Wildberries. Остановились на insales.ru.

Проблематика

Выручка Deppa в 2023 году составила 10,4 млрд рублей. К первому кварталу 2025 года цель – увеличить выручку компании до 13,5 млрд рублей (30%), увеличив количество совершенных покупок и новых контрактов с оптовиками.

Цели бизнеса

Количество пользователей за 2023 год – 216 350 человек.
Мужчины 68%, женщины 32%.
Доля визитов, в рамках которых состоялся лишь один просмотр страницы, продолжавшийся менее 15 секунд составляет 21,4% (bounce rate).

Аудитория

Как выглядела старая версия сайта

Разработка продукта всегда начинается с Discovery. Вот и я начала с анализа аналитики. Выделила костяк целевой аудитории, изучила поисковые запросы, чтобы понять, откуда и зачем пользователи приходят к нам на сайт.
Результаты не впечатляли: конверсия на главном баннере составляла всего 3% от общего числа посетителей, переходы в раздел для бизнеса <2%, в каталог – 8%.

1 этап. Изучение аналитики по текущей версии сайта

Это ответственный этап. На нём можно надолго застрять с бесчисленными референсами и поиском того самого стиля, который понравится стейкхолдерам, пользователям и самой себе, конечно, куда же без дизайнерского перфекционизма.

3 этап. Подбор референсов и разработка концепции

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

4 этап. Защита своих решений перед командой и генеральным директором

Разработка навигационной структуры — это фундаментальный этап при создании сайта, который влияет как на пользовательский опыт, так и на успешность взаимодействия с контентом. Хорошо спроектированная структура помогает пользователям быстро и легко находить нужные элементы, улучшает видимость сайта в поисковых системах и поддерживает бизнес-цели, делая сайт интуитивным, понятным и масштабируемым

5 этап. Навигационная структура

Начало проекта всегда подразумевает создание первых базовых элементов Ui-kit на основе утвержденного концепта. Я создала Ui-kit, что сократило и упростило работу в дальнейшем, а также для того, чтобы дизайн получился единообразным на разных страницах.

6 этап. Разработка компонентов и Ui-kit

После согласования концепции и разработки Ui-kit я сделала макеты для ключевых страниц. На этом этапе было важно продумать расположение элементов, цветовую палитру и общую визуальную иерархию, чтобы пользователю было легко взаимодействовать с интерфейсом.
Затем я перешла к созданию кликабельных прототипов, которые помогают протестировать навигацию и логику работы сайта ещё до его разработки. Это позволяет выявить потенциальные проблемы на ранних этапах и внести необходимые коррективы, что значительно ускоряет процесс разработки и минимизирует возможные доработки в будущем.

7 этап. Дизайн макетов и кликабельного прототипа

2. Анализ конкурентов
Мне нужно было понять, где стоит сделать упор, чтобы не повторить ошибок конкурентов и улучшить взаимодействие пользователей на основе удачных решений.

3. Подбор референсов и разработка концепции
Чтобы приступить к визуалу, мне важно было определить в каком стиле делать дизайн, так чтобы он был актуален, соответствовал гайдам и понравился генеральному директору.

2. Статистически значимый рост CR (коэффициент конверсии) в переход на маркетплейсы, а для оптовиков – в переход на страницу «Для бизнеса» и заполнение формы обратной связи.

3. В идеале – увеличение retention и среднюю продолжительности визита пользователей.

8. Тестирование

Макеты ключевых страниц сайта

Для проверки удобства использования сайта я провела коридорное тестирование на 8 респондентах. Я хотела проверить общий пользовательский опыт, функцию покупки через переход на маркетплейсы, навигацию по сайту, раздел для оптовых покупателей.

8 этап. Тестирование

✅ Поиск товара по категориям
Пользователи быстро находят раздел с аудиоаксессуарами, категории четко структурированы.

✅ Использование фильтров
Фильтр работает корректно, пользователи быстро находят нужные товары.

✅ Покупка товара на маркетплейсе
Пользователи легко находят возможность купить на стороннем маркетплейсе, переходят по ссылке на Вайлдбериз.

✅ Проверка раздела «О компании»
Информация о компании доступна, легко читается, вызывает доверие у пользователей.

✅ Заполнение заявки на сотрудничество
Форма проста в использовании, пользователи легко понимают, что нужно указать.

✅ Поиск раздела «Для бизнеса»
Раздел для бизнеса легко находится, пользователи быстро попадают в нужную категорию.

✅ Просмотр условий для бизнеса
Условия для бизнеса четко и ясно описаны, пользователи понимают, как работать с компанией.

После проверки сайта на пользователях я подготовила макеты и Ui-kit для передачи фронтенд разработчику. Мы провели совместную проверку макетов, обсудили функционал, анимацию. В процессе работы я вносила мелкие изменения для соответствия дизайну.

9 этап. Передача в разработку и дизайн-ревью с разработчиком. Итоги

Сайт www.deppa.ru работает, 3D дизайнер готовит видео-баннер на главной, разработчик доделывает анимацию интерфейса.

К сожалению, после запуска сайта не подключили аналитику и количественных данных не удалось получить. После подключения аналитики я добавлю данные в этот кейс.