CITILINK.RU
КРУПНЕЙШИЙ ИНТЕРНЕТ МАГАЗИН ТЕХНИКИ В РОССИИ

О клиенте

«Ситилинк» — одна из крупнейших сетей магазинов электроники и бытовой техники, на рынке с 2008 года. Компания входит в топ-11 крупнейших интернет-магазинов России. Ситилинк продает порядка 100 тысяч наименований цифровой и бытовой техники, электроники.

 

Сейчас у компании более 300 собственных пунктов выдачи заказов, число которых холдинг планирует нарастить до 500, и более 100 полноформатных магазинов. Помимо этого, выдача заказов осуществляется в 30 000 партнерских пунктах выдачи заказов по всей стране. В портфеле услуг – сборка компьютеров и серверов под заказ, аутсорсинг ИТ-инфраструктуры, монтаж систем видеонаблюдения, установка бытовой и климатической техники, услуги страхования, покупка товаров в лизинг и другие услуги.

Задачи

Обязанности

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

 

Была выстроена чёткая структура работы отделов и направлений: закрепили зоны ответственности, прописали регламенты взаимодействия между командами (в том числе кросс‑функциональными), внедрили единые стандарты постановки и контроля задач. Это позволило сократить количество согласований, ускорить принятие решений и повысить прозрачность работы на всех уровнях.

 

Техническая составляющая была полностью реорганизована с учётом масштабируемости: подобрали и настроили инструменты для совместной работы и трекинга задач, выстроили процессы для быстрой доставки обновлений в продакшн, обеспечили надёжное хранение и резервное копирование данных, а также проработали архитектуру для бесшовной интеграции с внешними сервисами и платёжными системами.

 

Отдельно была разработана система внутренних стандартов — написаны гайдлайны и правила, охватывающие ключевые аспекты работы команд. В них зафиксировали требования к качеству обоснований развивающихся или новых проектов, правила оформления документации, стандарты UX/UI, порядок проведения ревью и критерии приёмки и передачи задач. Эти документы и правила стали обязательным для всех команд и как следствие, существенно снизили количество недоработок, ошибок и расхождений в процессах разработки продуктов компании.

 

Важной частью работы стал полный редизайн сайта крупнейшего E‑Commerce в России. Проект включал не только визуальное обновление, но и глубокую проработку пользовательских сценариев: провели исследования аудитории, проанализировали поведение пользователей на сайте, выявили основные барьеры и точки оттока. На основе этих данных полностью переработали информационную архитектуру, навигацию и логику ключевых страниц. Особое внимание уделили адаптивности и скорости загрузки, чтобы обеспечить комфортный опыт на любых устройствах.

 

Параллельно с редизайном, была выполнена оптимизация более 50 проектов. Каждый из них рассматривался индивидуально: для одних требовалось устранить критические проблемы с юзабилити, для других — добавить функционал, закрывающий конкретные потребности аудитории. В результате удалось повысить конверсию, снизить количество обращений в поддержку и улучшить общее восприятие сервисов пользователями.

2000+

Экранов с адаптивными версиями

2000+

Компонентная база

400+

Пользовательских сценариев

6

Лет оптимизации и улучшения продукта

Поиск и анализ проблем

Анализ рынка конкурентов

Ведение и контроль бэклога

Организация процесса сбора требований от бизнес заказчиков

Внедрение системы распределения нагрузки

Организация процесса анализа и постановки задач на команды

Транслирование информации на все команды по общему уровню загрузки и роадмапов проектов

Анализ аудитории

Анализ существующих проблем

Консультация компаний подрядчиков (рекламные агенты/партнерские системы)

Создание новой дизайн системы (UI-Kit’s)

Создание библиотеки новых компонентов

Поддержка существующей дизайн системы (UI-Kit’s)

Сбор требований к каждому из продуктов

Создание и внедрение новой дизайн-системы

Организация процессов

Разработка гайдлайнов и контроль качества

Ревью и тестирование продуктов

PixelPerfect ревью

Курирование руководителей и дизайнеров в правила новой дизайн системы

Разработка и описание карт пользовательский путей

Консультация команд маркетинга и  разработки (более 50 человек)

Лоббирование и защита принятых в дизайн системе решений

Проведение A-B-C тестов

Ведение проектной документации

Создание многоуровневой системы версионности дизайн системы

Обучение сотрудников

Рекомендации к команде аналитиков по разметке карт пользовательский путей для анализа пользовательского опыта взаимодействия с продуктами компании

Проведение ревью тестирований и контроля качества

Консультация разработчиков и менеджеров по продуктам

Совместная работа с менеджерами и разработчиками по оптимизации

Проектирование интерфейсов в Figma с учётом гайдов и адаптация на Mobile и App

Создание креативных концепции, основанных на продуктовых требованиях

Тесное взаимодействие с отделом разработки (свыше 100 человек)

Формирование долгосрочного развития продукта

Атомарная дизайн система

Разработана дизайн‑система — от концепции и структуры до реализации в Dev.UI‑Kit и вывода в продакшн. Обеспечен полный контроль качества на всех этапах.

 

Дизайн‑система построена по принципам атомарного дизайна: изначально зафиксированы правила поведения компонентов. В неё входят:

сетки и шаг сетки

кнопки и другие интерактивные элементы

адаптивность под 5 промежуточных разрешений

более 50 вариантов шрифтовых наборов

свыше 2000 элементов системы

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

 

Подготовлена проектная документация со схемой связей элементов. Она упрощает работу как опытным разработчикам, так и новым сотрудникам: помогает быстро разобраться в логике построения системы и правилах использования компонентов.

 

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

 

Для повышения удобства и снижения количества ошибок выбран нестандартный шаг сетки — 5px. Этот параметр закреплён в Figma и Dev.Kit: он встроен в большинство компонентов на этапе проектирования. Такой подход обеспечивает точное построение блоков с учётом всех отступов и адаптивных версий, а также исключает расхождения между макетами и реализацией.

Гайдлайны

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

 

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

 

Особое внимание следует уделить гайдлайнам, связанным с рекламными кампаниями. На всём сайте предусмотрено множество точек входа для маркетинговых активностей: они выделены баннерами, нестандартными маркетинговыми решениями в интерфейсах, а также псевдо‑push‑уведомлениями для привлечения внимания пользователей к выгодным предложениям компании. Все материалы были разработаны и согласованы как с заказчиками (в лице коммерческих директоров), так и с командой разработки и дизайна — чтобы найти оптимальный баланс и снизить затраты ресурсов на создание большого количества маркетинговых материалов. Каждый игровой набор для маркетинговой активности описан с точки зрения логики поведения: учтены и адаптация к различным форматам, и механика работы самого набора.

CJM & ROADMAPS

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

 

Мы изучили как существующую целевую аудиторию, её потребности и запросы, так и возможности адаптации под новую аудиторию. Для этого провели комплексный анализ: собрали данные из веб‑аналитики, изучили поведение пользователей на сайте (тепловые карты, записи сессий), провели глубинные интервью и опросы. Это позволило сформировать детальные портреты сегментов аудитории, выделить ключевые сценарии использования сайта и определить, какие боли и барьеры мешают пользователям достигать своих целей.

 

Отдельное направление работы было посвящено привлечению более молодой аудитории. Здесь фокус сместился на визуальную динамику, скорость восприятия информации и привычные для этой возрастной группы паттерны взаимодействия: например, более крупные и заметные CTA‑элементы, упрощённую навигацию, акцент на визуальном контенте и быстрые способы получения нужной информации. В дизайн‑систему были заложены соответствующие стилистические и функциональные решения, которые органично вписывались в общую концепцию, но при этом лучше резонировали с новой аудиторией.

 

В рамках рабочей группы для каждого из существующих сегментов на сайте были разработаны CJM‑модели (Customer Journey Maps). Они охватывали весь путь пользователя — от первого знакомства с брендом (через рекламу, соцсети, поисковую выдачу) и формирования первичного интереса до выстраивания лояльных отношений и, наконец, закрытия всех необходимых потребностей на всех этапах взаимодействия с продуктом.

Новые модели стали основой для приоритизации задач по доработке интерфейса и контента: в первую очередь брались в работу те участки пути, где наблюдался наибольший отток или самые острые проблемы пользователей.

 

Также важно отметить работу над существующими барьерами пользователей перед покупкой и дальнейшие решения по их предотвращению. Среди наиболее распространённых барьеров были выявлены: неясность условий доставки и возврата, перегруженные формы оформления заказа, отсутствие прозрачной информации о сроках и стоимости, а также сложности с поиском нужных товаров.

Для устранения этих проблем внедрили ряд решений:

упростили и структурировали формы, сократив количество полей
и добавив понятные подсказки;

вынесли ключевую информацию (сроки, стоимость, условия)
на видные места и сделали её максимально доступной;

улучшили фильтры и поиск, чтобы пользователи быстрее находили нужные товары;

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

Для достижения поставленных целей по новому продукту был проведён ряд исследовательских и аналитических процессов в формате A/B‑тестирования. Тестировались разные варианты ключевых страниц и элементов: главная страница, карточки товаров, страницы категорий, форма корзины и оформления заказа. В качестве метрик использовали конверсию, среднее время на сайте, показатель отказов, глубину просмотра и другие релевантные KPI. По результатам тестов отбирались наиболее эффективные решения, которые затем масштабировались на весь сайт и фиксировались в дизайн‑системе как эталонные паттерны. Такой подход позволил принимать решения на основе данных, а не предположений, и гарантировать, что изменения действительно улучшают пользовательский опыт и бизнес‑результаты.

Контроль качества QA

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

 

В работе применялся метод Pixel Perfect с допустимыми уровнями отклонения от нормы — при этом строго соблюдалось условие, что отклонения не должны ухудшать общий внешний вид продукта.

 

Процесс проверки качества был встроен в несколько этапов разработки. Контроль осуществляли менеджеры, разработчики, заказчики и команда препродакшена — перед тем как продукт поступал в производство.

 

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

 

Если в процессе возникали проблемы, к работе подключались дизайнеры, ответственные за продукт. Они получали доступ к дизайн‑системе, сверяли продукт с предрелизной версией и при обнаружении несоответствий оперативно устраняли выявленные недочёты.

ГЛАВНАЯ СТРАНИЦА «ЛИЦО КОМПАНИИ» И ГЛАВНОЕ — ПРЕДОСТАВИТЬ ПОТРЕБИТЕЛЮ ВСЕ, ЧТО НУЖНО

Главная задача приветственной страницы компании — показать пользователю широкий ассортимент продукции, способный покрыть все возможные потребности, продемонстрировать рекламные акции (с акцентом на их временность) и обозначить основное направление деятельности на ближайшие годы: развитие B2B‑сегмента и выгоды от сотрудничества с компанией.

 

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

 

Страница построена по модульному принципу: блоки взаимозаменяемы. Акционные товары отображаются в верхней части страницы; если акций нет, блок можно быстро отключить в системе администрирования — в пару кликов. Тот же принцип применяется и к остальным блокам.

Гибкая система ранжирования блоков позволяет выстраивать их в оптимальном порядке — с учётом популярности и удобства для пользователя. В состав страницы входят блоки, ориентированные на популярные запросы, а также на новинки, недавно поступившие в продажу и максимально релевантные целевой аудитории в ключевых категориях.

 

Важное преимущество такого подхода — возможность тестировать новые форматы презентации продуктов. Благодаря модульной структуре новые блоки легко интегрировать на страницу без существенных трудозатрат.

РЕГИСТРАЦИЯ «КАК СИСТЕМА МОТИВАЦИИ» — ОСНОВНОЙ СПОСОБ СБОРА АУДИТОРИИ И МОТИВАЦИИ К ПОКУПКЕ

Отдельного внимания заслуживает продуманная система регистрации и авторизации пользователей. В ходе редизайна сайта её разработка прошла несколько этапов — это было связано с техническими ограничениями и задачей компании по увеличению числа зарегистрированных пользователей.

 

Систему регистрации оптимизировали и сделали максимально удобной: теперь валидация пользователя осуществляется только по номеру телефона с последующей верификацией его присутствия в системе. Это позволило сократить количество шагов как для новых пользователей, так и для тех, кто ранее регистрировался только по электронной почте — их данные удалось перенести в обновлённую систему.

Дополнительно в систему интегрировали механизм мотивации пользователей. Он включает более выгодные предложения для зарегистрированных клиентов и внутреннюю бонусную систему: бонусы начисляются в зависимости от объёма покупок за определённый период. Это стимулирует пользователей совершать покупки на более выгодных условиях.

 

Для выбора наиболее эффективных способов привлечения пользователей к регистрации провели A/B/C‑тесты. В ходе них проверяли разные дизайнерские решения и варианты подачи информации — чтобы оценить, какие из них лучше влияют на мотивацию пользователей.

«КАТАЛОГ / КАТЕГОРИИ» УДОБНЫЙ, ИНФОРМАТИВНЫЙ, ГИБКИЕ НАСТРОЙКИ ДЛЯ КАЖДОГО ПОЛЬЗОВАТЕЛЯ

Глобальный каталог был переработан: в нём доступны как глобальные категории, так и предпросмотры контента с возможностью расширенного поиска по интересующим пользователя темам.

 

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

 

В блок также интегрирован поиск не только по категориям, но и по брендам — это удобно, ведь многие пользователи ищут товары определённых марок.

Кроме того, в рамках модуля реализован функционал и разработана CMS‑система для размещения рекламных мест от поставщиков. Поставщик может самостоятельно выбрать подкатегорию для размещения и определить объём рекламных материалов, которые будут показываться аудитории.

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

 

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

Важным управленческим инструментом выступает возможность ручной корректировки порядка категорий в ленте. Если в определённых сегментах фиксируется проседание продаж, специалисты могут поднять эти категории выше на странице, тем самым увеличивая их видимость и стимулируя покупательскую активность. Такая гибкость позволяет оперативно реагировать на изменения рыночной ситуации и перераспределять внимание аудитории в зависимости от текущих бизнес‑задач.

 

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

«ЛИСТИНГ ТОВАРОВ / БЫСТРЫЙ ПРОСМОТР / СТАТУСЫ ТОВАРОВ» ПОТРЕБИТЕЛЬ ВСЕГДА ТОЧНО ЗНАЕТ ГДЕ
И КОГДА СМОЖЕТ ПОЛУЧИТЬ НУЖНЫЙ ЕМУ ЗАКАЗ

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

 

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

 

В листинг интегрирован альтернативный инструмент подбора — квиз‑опросники. Для каждой категории разработаны свои квизы: они помогают быстро подобрать товары на основе ответов пользователя. Для клиента это удобный способ найти подходящее решение за счёт «умного» подбора по выявленным потребностям. Для компании квизы — источник ценных данных: они позволяют собирать информацию о критериях выбора, ценностях и приоритетах покупателей, а также формировать ценовую аналитику и уточнять портрет целевой аудитории (в том числе для компании «Ситилинк»).

 

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

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

 

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

 

Таким образом, страница листинга объединяет широкий набор маркетинговых и информационных инструментов. Они дают пользователю расширенный функционал и позволяют глубже погрузиться в выбор товаров: получить не только детальные сведения о конкретных позициях, но и консультации по категориям в целом. Это делает процесс поиска прозрачным и удобным, помогая точнее формулировать критерии выбора и находить именно то, что нужно.