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. Алгоритмы учитывают множество факторов, в первую очередь популярность отдельных категорий, частоту запросов и сезонность спроса. Благодаря этому наиболее востребованные товарные группы автоматически занимают более заметные позиции в ленте, повышая вероятность взаимодействия с ними со стороны пользователей.
Важным управленческим инструментом выступает возможность ручной корректировки порядка категорий в ленте. Если в определённых сегментах фиксируется проседание продаж, специалисты могут поднять эти категории выше на странице, тем самым увеличивая их видимость и стимулируя покупательскую активность. Такая гибкость позволяет оперативно реагировать на изменения рыночной ситуации и перераспределять внимание аудитории в зависимости от текущих бизнес‑задач.
Для дополнительного вовлечения пользователей на странице размещён баннер с информацией о действующих акциях в рамках каталога. Элемент визуально выделяется и служит точкой входа в промо‑коммуникацию: по клику пользователь переходит на отдельную страницу акций, где может детально изучить условия предложений. Это решение помогает не только информировать аудиторию о выгодных предложениях, но и направлять трафик в нужные товарные сегменты, усиливая эффект от маркетинговых активностей.
«ЛИСТИНГ ТОВАРОВ / БЫСТРЫЙ ПРОСМОТР / СТАТУСЫ ТОВАРОВ» ПОТРЕБИТЕЛЬ ВСЕГДА ТОЧНО ЗНАЕТ ГДЕ
И КОГДА СМОЖЕТ ПОЛУЧИТЬ НУЖНЫЙ ЕМУ ЗАКАЗ
Листинг товаров — ключевой элемент сайта, который прошёл многоуровневую доработку и оптимизацию в ходе редизайна. В процессе было реализовано множество итераций, затронувших даже мельчайшие элементы интерфейса. Все изменения направлены на улучшение пользовательского опыта: они упрощают поиск нужных товаров и помогают быстрее принимать решение о покупке.
Для поддержки пользователей в выборе товаров разработаны рекомендательные статьи и помощник подбора — они создаются индивидуально для каждой категории и сегмента. В инструкциях и рекомендациях описаны функциональные особенности товаров, важные критерии выбора и полезные советы, которые помогают сориентироваться в ассортименте и подобрать оптимальный вариант.
В листинг интегрирован альтернативный инструмент подбора — квиз‑опросники. Для каждой категории разработаны свои квизы: они помогают быстро подобрать товары на основе ответов пользователя. Для клиента это удобный способ найти подходящее решение за счёт «умного» подбора по выявленным потребностям. Для компании квизы — источник ценных данных: они позволяют собирать информацию о критериях выбора, ценностях и приоритетах покупателей, а также формировать ценовую аналитику и уточнять портрет целевой аудитории (в том числе для компании «Ситилинк»).
Отдельный блок функционала — популярные подборки товаров. Они формируются на основе частых пользовательских запросов и рыночных тенденций. В подборки включают товары с наибольшим спросом, новинки с активной маркетинговой поддержкой и другие позиции, популярность которых подтверждена поведением покупателей.
Фильтры и сниппеты товаров также были существенно переработаны. Фильтры организованы по заранее заготовленным критериям и адаптированы под потребности покупателей: наиболее востребованные (например, по цене, скидкам, срочности доставки или самовывоза, приоритетным брендам) вынесены наверх. Для каждой категории набор фильтров формируется индивидуально, а часто используемые опции поднимаются в верхнюю часть интерфейса — это ускоряет уточнение критериев поиска.
Сниппеты товаров проработаны с особым вниманием: было протестировано множество вариантов, чтобы пользователи могли максимально быстро считывать ключевую информацию. В сниппетах отображаются маркетинговые статусы и активности, приоритезируется клубная цена для постоянных клиентов, показывается рейтинг товара на основе отзывов покупателей. Кроме того, предусмотрена возможность ознакомиться с вопросами и ответами от других клиентов — это помогает получить дополнительные сведения и принять более взвешенное решение.
Таким образом, страница листинга объединяет широкий набор маркетинговых и информационных инструментов. Они дают пользователю расширенный функционал и позволяют глубже погрузиться в выбор товаров: получить не только детальные сведения о конкретных позициях, но и консультации по категориям в целом. Это делает процесс поиска прозрачным и удобным, помогая точнее формулировать критерии выбора и находить именно то, что нужно.